.page-content {
  flex-direction: column;
}

.page-inner.contact-page-inner {
  position: relative;
  display: flex;

  flex-direction: row;

  padding: 0;
  padding-top: 120px;

  line-height: 1.75;
  font-size: 16px;
  font-weight: 500;

  color: #72839a;
  background-color: #fff;
}

.page-inner.contact-page-inner > div {
  position: relative;
  flex: 1;
  width: 50%;
}

.contact-info-container {
  padding-top: 0;
  padding-right: 25px;
  padding-left: 75px;
}

.contact-info-container > .contact-info-item {
  position: relative;
  display: flex;
  z-index: 1;

  flex-wrap: nowrap;

  align-items: center;

  padding: 48px 35px;
}
.contact-info-container > .contact-info-item:not(.active) {
  border: 1px solid #e9f1fc;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;

  background-color: #f4f9ff;
}

.contact-info-container > .contact-info-item > .contact-info-item-meta {
  position: relative;

  margin-right: 36px;

  width: 130px;
  min-width: 130px;

  text-align: center;
}

.contact-info-container > .contact-info-item > .contact-info-item-meta > .contact-info-label {
  margin: 0;

  line-height: 1.25;
  font-size: 45px;
  font-weight: 800;

  color: #222;
}
.contact-info-container > .contact-info-item.active > .contact-info-item-meta > .contact-info-label {
  color: #fff;
}

.contact-info-container > .contact-info-item > .contact-info-item-meta > .contact-info-icon {
  position: absolute;
  z-index: -1;

  top: 50%;
  left: 50%;

  line-height: 1;

  -webkit-transform: translate(-50%,-50%);
  -khtml-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.contact-info-container > .contact-info-item > .contact-info-item-meta > .contact-info-icon > i {
  font-size: 80px;
  color: #d9ddea;
}
.contact-info-container > .contact-info-item.active > .contact-info-item-meta > .contact-info-icon > i {
  color: rgba(255,255,255,.14);
}

.contact-info-container > .contact-info-item > .contact-info-item-content {
  line-height: 1.66667;
  font-size: 21px;
  font-weight: 700;

  color: #00BCD4;
}
.contact-info-container > .contact-info-item.active > .contact-info-item-content {
  color: #fff;
}

.contact-info-container > .contact-info-item::after {
  content: '';
  position: absolute;
  z-index: -2;

  top: 0;
  left: -14px;

  width: calc(100% + 28px);
  width: -webkit-calc(100% + 28px);
  width: -ms-calc(100% + 28px);
  width: -o-calc(100% + 28px);
  height: 100%;

  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;

  opacity: 0;

  background-image: -webkit-linear-gradient(21deg,#005cea 0%,#00c5fb 100%);
  background-image: -moz-linear-gradient(21deg,#005cea 0%,#00c5fb 100%);
  background-image: -ms-linear-gradient(21deg,#005cea 0%,#00c5fb 100%);
  background-image: -o-linear-gradient(21deg,#005cea 0%,#00c5fb 100%);
  background-image: linear-gradient(21deg,#005cea 0%,#00c5fb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#005cea 0%',endColorStr='#00c5fb 100%');
}

.contact-info-container > .contact-info-item.active::after {
  opacity: 1;
}


.contact-form-container {
  position: relative;

  margin-bottom: -205px;

  padding-top: 0;
  padding-right: 59px;
  padding-left: 71px;
}

.contact-form {
  position: relative;
  display: flex;
  z-index: 2;

  flex-direction: column;

  padding: 40px 42px 47px;

  border: 1px solid #e9f1fc;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;


  -webkit-box-shadow: 0 0 38px rgba(34,34,34,.1);
  -khtml-box-shadow: 0 0 38px rgba(34,34,34,.1);
  -moz-box-shadow: 0 0 38px rgba(34,34,34,.1);
  -ms-box-shadow: 0 0 38px rgba(34,34,34,.1);
  -o-box-shadow: 0 0 38px rgba(34,34,34,.1);
  box-shadow: 0 0 38px rgba(34,34,34,.1);

  background-color: #f4f9ff;
}

.contact-form > .contact-form-meta {
  margin-bottom: 40px;
  text-align: center;
}

/* WHEN LOADING */
.contact-form-container .contact-form > .contact-form-meta.success,
.contact-form-container .contact-form > .contact-form-meta.failed,
.contact-form-container .contact-form > .contact-form-meta.loading {
  display: none;
}
.contact-form-container.success .contact-form > .contact-form-form,
.contact-form-container.failed .contact-form > .contact-form-form,
.contact-form-container.loading .contact-form > .contact-form-form,
.contact-form-container.success .contact-form > .contact-form-meta,
.contact-form-container.failed .contact-form > .contact-form-meta,
.contact-form-container.loading .contact-form > .contact-form-meta {
  display: none;
}
.contact-form-container.success .contact-form > .contact-form-meta.success,
.contact-form-container.failed .contact-form > .contact-form-meta.failed,
.contact-form-container.loading .contact-form > .contact-form-meta.loading {
  display: block;
}
/*  */

.contact-form > .contact-form-meta > .contact-form-subtitle {
  text-transform: uppercase;

  letter-spacing: .04em;
  font-size: 14px;
  font-weight: 800;

  color: #00BCD4;
}

.contact-form > .contact-form-meta > h3 {
  margin: 0;
  margin-top: 9px;

  line-height: 45px;
  font-size: 35px;
  font-weight: 800;

  color: #222;
}

.contact-form > .contact-form-form {
  position: relative;

  width: 100%;
}

.contact-form .input-filled {
  position: relative;
  z-index: 1;

  margin-bottom: 20px;

  width: 100%;

  padding-right: 15px;
  padding-left: 15px;
}

.contact-form .input-filled input,
.contact-form .input-filled textarea {
  width: 100%;
  height: 60px;
  padding: 6px 20px;

  line-height: normal;
  font-size: 16px;
  font-weight: 500;

  border: 1px solid #d0def1;

  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;

  color: #767c89;
  background-color: #f8fbff;

  -webkit-transition: all .2s linear 0ms;
  -khtml-transition: all .2s linear 0ms;
  -moz-transition: all .2s linear 0ms;
  -ms-transition: all .2s linear 0ms;
  -o-transition: all .2s linear 0ms;
  transition: all .2s linear 0ms;
}

.contact-form .input-filled textarea {
  padding-top: 18px;
  padding-bottom: 18px;
}

.contact-form .input-filled textarea {
  height: 175px;
  resize: vertical;
}

.contact-form .input-filled input::placeholder,
.contact-form .input-filled textarea::placeholder {
  color: #767c89;
}

.contact-form .input-filled input:focus,
.contact-form .input-filled textarea:focus {
  border-color: #00BCD4;
}

.contact-address-map-container {
  position: relative;
  display: flex;

  width: 100%;
  height: 600px;

  background: #333;
}

.contact-address-map-container > .contact-google-map {
  position: relative;

  width: 100%;
  height: 100%;
}













/* RESPONSIVE */

@media (max-width: 1199px) {
  .page-inner.contact-page-inner {
    flex-direction: column;
  }

  .page-inner.contact-page-inner > div {
    margin-top: 60px;
    width: 100%;
    padding: 0 15px;
  }

  .page-inner.contact-page-inner > div:first-child {
    margin-top: 0;
  }

  .contact-info-container > .contact-info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-info-container > .contact-info-item > .contact-info-item-meta {
    min-width: inherit;
    width: inherit;
  }

  .contact-info-container {
    padding: 0 25px!important;
  }

  .contact-form {
    padding: 24px 15px;
  }
}