@charset "UTF-8";
* {
  box-sizing: border-box;
}

html {
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: none;
  font-family: "Lato", sans-serif;
  font-size: 4vw;
}

body {
  margin: 0;
  padding: 0;
  color: #fff;
  background-repeat: repeat;
  background-size: contain;
  background-position: center;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

.wrapper {
  position: relative;
}

.container {
  margin: 0 auto;
}

.pxl,
.hidden {
  display: none !important;
}

.js-blink {
  cursor: pointer;
}

.blink {
  animation: blink 300ms linear;
  animation-iteration-count: infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
input,
select,
button {
  font-size: 1em;
}

.js-step {
  transition: all 500ms linear;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
@media (min-width: 568px) {
  html {
    font-size: 15px;
  }
}
@media (min-width: 810px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .container > div {
    width: 50%;
  }
}
@media (max-width: 1025px) and (min-height: 1240px) {
  html,
body,
.wrapper {
    height: 100%;
  }

  body {
    background-size: 100%;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .container {
    flex: auto;
  }
}
@media (min-width: 1640px) {
  html {
    font-size: 0.8vw;
  }

  .container {
    max-width: 106.67em;
  }
}
@media (min-width: 1880px) and (min-height: 885px) {
  html {
    font-size: 1.69vh;
  }

  body {
    background-size: auto 118vh;
  }
}
button {
  cursor: pointer;
  outline: none;
}

#regform .button-list .btn,
#regform .btn-group .btn,
.form-group-radio-buttons .radio-button label,
.btn-login {
  border: none;
  outline: none;
  padding: 0.67em 1.67em;
  font-size: 1.5em;
  border-radius: 0.3em;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  background: #fff;
  color: #324846;
  font-family: "Lato", sans-serif;
  margin: 0.47em 0.33em;
}

#regform .button-list .btn.btn-primary,
#regform .btn-group .btn.btn-primary,
.form-group-radio-buttons .radio-button input:checked + label,
.btn-login {
  background-color: #d9f9d4;
}

.btn-login {
  font-size: 1em;
  margin: 0;
  padding: 0.67em 0.2em;
  min-width: 6em;
  display: inline-block;
  text-align: center;
  margin-left: 0.5em;
}
.btn-login:hover, .btn-login:focus {
  text-decoration: none;
}

.form-group-radio-buttons .radio-button label {
  display: block;
}

.form-group-radio-buttons .form-group-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

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

p {
  margin: 0;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.register-box > h2 {
  margin: 2em 0;
}

.headline-1 {
  font-size: 1.5em;
  font-weight: bold;
  padding: 0px;
  margin-bottom: 0.67em;
}

.required,
.unknown-error-msg {
  display: block;
  margin-bottom: 0.7em;
  text-shadow: 0.1em 0.1em 0px #000000;
  color: #f2ff3e;
}

.login-form-holder .login-form-holder-inner .required {
  text-shadow: none;
}

@media (min-width: 992px) {
  .register-box > h2,
.headline-1 {
    font-size: 2em;
  }
}
@media (min-width: 1240px) {
  .list-box ul li > .user-left-item-info h3 {
    margin: 0.5em 0;
  }
  .list-box ul li > .user-left-item-info p {
    color: #666;
    font-size: 1.07em;
  }
}
.header {
  background: #320729;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1em 0.5em;
}
.header .header-left .logo {
  text-align: center;
}
.header .header-left .logo a {
  text-decoration: none !important;
  font-size: 2em;
  background-image: url(/img/_btns/icons_whatsup.png);
  background-repeat: no-repeat;
  background-position: -0.3em 0em;
  background-size: 1.6em;
  display: inline-block;
  padding: 0.2em 0 0.2em 1.2em;
}
.header .header-right {
  display: none;
}

@media (min-width: 568px) {
  .header .header-right {
    display: block;
    border-top: 0.1em solid #320729;
    padding: 1em;
  }
  .header .header-right .user-header {
    display: flex;
    flex-wrap: wrap;
  }
  .header .header-right .user-header li {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .header .header-right .user-header li .user-header-item-img {
    position: relative;
    width: 3.5em;
    height: 3.5em;
    border-radius: 100%;
    border: 0.15em solid #fff;
    overflow: hidden;
    margin-right: 0.5em;
  }
  .header .header-right .user-header li .user-header-item-img:hover img {
    width: 110%;
  }
  .header .header-right .user-header li .user-header-item-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: none;
    border-radius: 50%;
    vertical-align: middle;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
  }
  .header .header-right .user-header li .user-header-item-info-name {
    margin: 0px;
    font-weight: normal;
  }
  .header .header-right .user-header li .user-header-item-info-name span {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 100%;
    background: #ff0000;
  }
  .header .header-right .user-header li .user-header-item-info-name span.online {
    background: #00ff00;
  }
  .header .header-right .user-header li .user-header-item-info-action {
    margin: 0px;
    font-size: 0.8em;
    font-style: italic;
  }
}
@media (max-aspect-ratio: 1/1) and (min-width: 768px) {
  .header {
    flex-wrap: wrap;
    padding: 1em;
    padding-bottom: 0;
  }
  .header .header-right {
    width: 100%;
  }
}
@media (min-aspect-ratio: 1/1) and (min-width: 992px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 2em 0.5em;
  }
  .header .header-left {
    margin-right: 1em;
  }
  .header .header-left .logo a {
    font-size: 3.3em;
    padding-left: 1.21em;
    background-size: 1.52em;
    background-position: -0.2em 0.05em;
  }
  .header .login-box {
    order: 2;
  }
  .header .header-right {
    border: none;
    flex: 1;
    max-width: 55.67em;
  }
}
@media (min-aspect-ratio: 1/1) and (max-width: 991px) {
  .header {
    flex-wrap: wrap;
    padding: 1em;
    padding-bottom: 0;
  }
  .header .header-right {
    width: 100%;
  }
}
.list-box {
  display: none;
}

@media (min-width: 1240px) {
  .list-box {
    display: block;
    width: 25% !important;
    background: #fff;
    color: #000;
  }
  .list-box ul {
    display: flex;
    flex-direction: column;
  }
  .list-box ul li {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5em 1em;
  }
  .list-box ul li:not(:last-child) {
    border-bottom: 0.1em solid #ccc;
  }
  .list-box ul li > .user-left-item-img {
    width: 27%;
    margin-right: 1em;
  }
  .list-box ul li > .user-left-item-img img {
    border-radius: 50%;
    width: 100%;
    padding: 0.15em;
    background-color: #aaa;
  }
  .list-box ul li > .user-left-item-info {
    width: 67%;
  }
}
.register-box {
  text-align: center;
  padding: 0 1em;
}

.step-age-range .form-group-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.step-age-range .form-group-inner select {
  outline: none;
  padding: 0.67em 2em 0.67em 1.33em;
  font-size: 1.5em;
  border-radius: 0.3em;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  color: #324846;
  background-color: #fff;
  font-family: "Lato", sans-serif;
  border: thin solid #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/img/_btns/bg_select.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.5em;
}
.step-age-range .form-group-inner select::-ms-expand {
  display: none;
}
.step-age-range .form-group-inner select.error {
  border: 0.1em solid #ff0000 !important;
  background-color: #ffdede;
}
.step-age-range .form-group-inner .form-control-wrapper {
  margin: 0.7em 0.5em;
}
.step-age-range .form-group-inner .separate {
  display: none;
}

.form-text {
  margin: 1.5em 0;
}
.form-text a {
  text-decoration: underline;
}

#birthYear {
  margin-bottom: 0.47em;
}

.processing-bar span {
  display: block;
  overflow: hidden;
  background-color: #d9f9d4;
  border-radius: 0.2em;
  padding: 0.33em;
  color: #324846;
  width: 0%;
}

.step-animation-texts li {
  display: none;
  animation: fadeIn 300ms linear;
  text-align: left;
  position: relative;
  font-size: 1.4em;
  margin: 0.71em 0 0.36em;
}
.step-animation-texts li > span {
  text-transform: uppercase;
  color: #93ccff;
}
.step-animation-texts li.active {
  display: block;
}
.step-animation-texts li .fa {
  margin-right: 0.24em;
}

.field-inputs input {
  padding: 0px 0.5em;
  text-transform: inherit;
  border: 0;
  cursor: text;
  margin: 0.47em 0;
  font-weight: 200;
  width: 100%;
  border-radius: 0.3em;
  /* max-width: 70%; */
  background-color: #fff;
  height: 2em;
  font-size: 1.5em;
  color: #333;
}

.legal-warning-text {
  margin: 0.5em 0;
}
.legal-warning-text a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
}

.visual-checked::after {
  content: "✗︎";
  position: absolute;
  top: 1.5em;
  right: 0.5em;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  color: #fff;
  background-color: #ff0000;
}
.visual-checked.visual-checked-success::after {
  content: "✓︎";
  color: #fff;
  background-color: #228B22;
}
.visual-checked.visual-checked-success .form-control {
  border: none;
  background-color: #e3ffe5;
}
.visual-checked .form-control {
  border: 0.1em solid #e9322d;
  background-color: #ffebef;
  outline: none;
}

@media (min-width: 568px) {
  .register-box .form-inner {
    min-height: 20em;
  }
  .register-box .form-inner > div:not(.field-inputs) {
    padding-top: 3em;
  }

  .field-inputs {
    width: 70%;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .field-inputs {
    width: 100%;
  }
}
@media (min-width: 1240px) {
  .register-box {
    width: 45% !important;
  }

  .field-inputs {
    width: 70%;
  }
}
.progress-bar {
  display: flex;
  border-radius: 0.2em;
  border: 0.15em solid #ffffff;
  background-color: transparent;
  margin: 1em 0 1.5em;
}
.progress-bar li {
  position: relative;
  height: 2em;
  flex-grow: 1;
}
.progress-bar li.active ~ li {
  background-color: transparent;
}
.progress-bar li.active ~ li > span {
  right: 100%;
}
.progress-bar li.active:nth-child(1) > span {
  left: 0;
  right: 0;
}
.progress-bar li.active:nth-child(2) > span {
  left: -100%;
}
.progress-bar li.active:nth-child(3) > span {
  left: -200%;
}
.progress-bar li.active:nth-child(4) > span {
  left: -300%;
}
.progress-bar li.active:nth-child(5) > span {
  left: -400%;
}
.progress-bar li.active:nth-child(6) > span {
  left: -500%;
}
.progress-bar li.active:nth-child(7) > span {
  left: -600%;
}
.progress-bar li.active > span {
  right: 0;
  visibility: visible;
  background-color: rgba(255, 255, 255, 0.5);
}
.progress-bar li > span {
  position: absolute;
  left: 0;
  right: -100%;
  visibility: hidden;
  line-height: 2.5em;
  height: 2.5em;
  font-size: 0.8em;
  overflow: hidden;
  transition: right 300ms linear;
  background-color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 568px) {
  .progress-bar li > span {
    font-size: 1em;
    line-height: 2.2;
    height: 2.2em;
  }
}
.phone-message {
  color: #000;
  background: url(/img/_patterns/tp-colum-right.jpg) center top repeat;
  background-size: cover;
}
.phone-message .phone-message-header {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.2em 0.5em;
}
.phone-message .phone-message-header > div {
  flex: 1;
}
.phone-message .phone-message-header .phone-message-header-left .phone-network .fa {
  font-size: 0.7em;
  color: #555;
}
.phone-message .phone-message-header .phone-message-header-left .phone-chat {
  color: #007eb1;
  font-size: 1.3em;
  font-weight: bold;
  margin: 0.6em 0px 0px;
}
.phone-message .phone-message-header .phone-message-header-center {
  text-align: center;
}
.phone-message .phone-message-header .phone-message-header-center .phone-time {
  font-size: 0.7em;
}
.phone-message .phone-message-header .phone-message-header-center .phone-name {
  font-size: 1.2em;
  font-weight: bold;
  color: #000;
  margin: 0.4em 0;
}
.phone-message .phone-message-header .phone-message-header-center .phone-status {
  font-size: 0.8em;
  color: #888;
}
.phone-message .phone-message-header .phone-message-header-right {
  text-align: right;
}
.phone-message .phone-message-header .phone-message-header-right .phone-battery {
  color: #555;
}
.phone-message .phone-message-header .phone-message-header-right .phone-user-img img {
  width: 3em;
  height: 3em;
  border-radius: 100%;
  border: 0.13em solid #aaa;
}
.phone-message .phone-message-content {
  padding: 1em 2em;
  display: flex;
  flex-wrap: wrap;
}
.phone-message .phone-message-content .message-default {
  background: #fff;
  border-radius: 1em;
  width: calc(50% + 3em);
  border: 0.3em solid #ccc;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}
.phone-message .phone-message-content .message-default::before, .phone-message .phone-message-content .message-default::after {
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  bottom: auto;
}
.phone-message .phone-message-content .message-default::before {
  top: 1em;
  border-color: transparent #ccc;
}
.phone-message .phone-message-content .message-default::after {
  top: 1.4em;
  border-color: transparent #fff;
}
.phone-message .phone-message-content .message-default p {
  line-height: 1.5em;
}
.phone-message .phone-message-content .message-default img {
  width: 1.5em;
}
.phone-message .phone-message-content .message-img-default {
  width: 50%;
  margin: 1em 0;
}
.phone-message .phone-message-content .message-img-default img {
  border-radius: 1em;
  box-shadow: 0 0.07em 0.13em rgba(0, 0, 0, 0.5);
}
.phone-message .phone-message-content .message-left::before {
  left: -2.1em;
  border-width: 1em 2em 1em 0;
}
.phone-message .phone-message-content .message-left::after {
  left: -1.33em;
  border-width: 0.6em 1.4em 0.6em 0;
}
.phone-message .phone-message-content .message-right {
  background: #d9f9d4;
  margin-left: auto;
  text-align: right;
}
.phone-message .phone-message-content .message-right::before {
  right: -2.1em;
  border-width: 1em 0px 1em 2em;
}
.phone-message .phone-message-content .message-right::after {
  right: -1.33em;
  border-width: 0.6em 0px 0.6em 1.4em;
  border-color: transparent #d9f9d4;
}
.phone-message .phone-message-content .message-timestame {
  text-align: right;
  color: #888;
  font-size: 0.8em;
  margin-top: 0.5em;
}
.phone-message .phone-message-content .message-timestame .fa {
  font-size: 0.8em;
  color: #007eb1;
}
.phone-message .phone-message-content .message-timestame .fa:nth-child(1) {
  margin-right: -0.5em;
}

@media (min-width: 1240px) {
  .phone-message {
    width: 30% !important;
  }
  .phone-message .phone-message-content .message-img-default img {
    width: 100%;
  }
}
.footer {
  background: #006047;
  margin: 0 auto;
  padding: 0.5em 0px 0.6em;
  color: #fff;
  text-align: center;
}
.footer .legal__container > div {
  display: inline-block;
  position: relative;
  padding: 0px 0.7em;
  font-size: 0.8em;
}
.footer .legal__container > div:not(:last-child) {
  border-right: 0.1em solid #fff;
}

@media (min-width: 568px) {
  .footer .legal__container > div {
    display: inline-block;
    position: relative;
    padding: 0px 0.8em;
  }
}
@media (max-width: 1025px) and (min-height: 1240px) {
  .footer {
    width: 100%;
  }
}
@media (min-width: 1640px) {
  .footer {
    max-width: 106.67em;
  }
}

/*# sourceMappingURL=style.css.map */