.onloader {
	position: fixed;
	z-index: 999999999;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: #fff
}

.first-letter-cap::first-letter,
.tr::first-letter {
	text-transform: capitalize
}

.truncate {
	min-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.signin-modal {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	z-index: 998;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	padding: 20px;
	background-color: rgba(0, 0, 0, .8);
	transition: opacity .3s ease-in-out, visibility .3s ease-in-out
}

.signin-modal.active {
	opacity: 1;
	visibility: visible
}

.signin-modal .form-group {
	position: relative
}

.signin-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #ddd;
	cursor: pointer;
	display: block
}

.signin-modal__holder {
	position: relative;
	width: 100%;
	max-width: 450px;
	background-color: #fff;
	padding: 40px
}

@media(max-width:768px) {
	.signin-modal__holder {
		padding: 40px 20px
	}
}

.signin-modal__default>h1,
.signin-modal__resetpassword>h1 {
	font-weight: 700;
	font-size: 30px
}

.signin-modal .label-note {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 12px;
	cursor: pointer
}

.nap-pop {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .98);
	transition: opacity .3s ease-in-out, visibility .3s ease-in-out
}

.nap-pop__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center
}

.nap-pop__inner p {
	font-weight: 700;
	color: #222
}

body {
	font-family: helvetica neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px
}

header {
	color: #fff;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../images/bg.jpg");
	background-position: 50%;
	padding: 3px 0
}

header h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0
}

@media(max-width:576px) {
	header h3 {
		font-size: 1.25rem
	}
}

button {
	display: block;
	font-weight: 700;
	background-color: #6eac41;
	width: 100%;
	padding: 15px 30px;
	color: #fff;
	text-align: center;
	margin: 1em 0;
	border: none;
	outline: none;
	border-radius: 30px;
	cursor: pointer;
	text-transform: uppercase
}

.info h4 {
	text-align: center;
	margin: 1em 0
}

.info p {
	font-family: open sans, sans-serif;
	color: #686868
}

.info i {
	color: #6eac41;
	float: left;
	margin-right: 1em;
	margin-top: .2em;
	height: 50px
}

.info .bold-info h3 {
	font-weight: 700;
	text-align: right;
	color: #6eac41;
	font-size: 16.8px
}

.feature {
	margin-top: 50px;
	background-color: #fcfcfc;
	padding: 30px 0;
	color: #686868
}

.feature img {
	display: block;
	float: left
}

.feature-text {
	margin-left: 6em
}

.form-wrapper {
	text-align: center;
	box-shadow: 0 0 10px #b4b4b4;
	width: 100%;
	margin: 0 auto;
	padding: 2em 5em;
	border-radius: 10px
}

.form-wrapper small {
	text-align: center;
	color: #757575;
	margin-bottom: 30px;
	display: block;
	font-size: 13px
}

.form-wrapper h4 {
	font-size: 1.8rem;
	margin-top: 0;
	margin-bottom: .25em
}

.form-wrapper .subtitle {
	color: #000;
	font-size: 1rem
}

.form-wrapper .subtitle span+span {
	font-weight: 700
}

.form-wrapper p {
	font-size: .9em
}

.form-group input {
	border-radius: 30px;
	padding: 15px 30px;
	background-color: #fcfcfc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	transition: border-color .3s ease-in-out
}

.form-group span {
	margin-left: 10px
}

.form-group .invalid {
	border-color: red
}

.form-group .valid {
	border-color: lime
}

@media only screen and (max-width:992px) {
	.form-wrapper {
		padding: 2em
	}
}

@media only screen and (max-width:768px) {
	.whatdoiget {
		order: 2
	}
	.form {
		order: 1
	}
	.restriction {
		order: 3
	}
	.feature {
		order: 4
	}
}

.subform-link {
	text-align: center;
	font-size: 12px
}

.subform-link>div {
	cursor: pointer
}

.signin-modal h1 {
	font-size: 24px;
	margin-bottom: 1em;
	text-transform: capitalize
}

.signin-modal .label-note {
	top: -22px
}

.signin-modal input[type=password] {
	margin-top: 30px
}

#lang_btn {
	max-width: 180px
}

footer {
	background-color: #000;
	color: #686868;
	padding: 2% 0 10%
}

footer button {
	float: right;
	cursor: pointer
}

footer a {
	color: #686868
}

@media only screen and (max-width:768px) {
	footer {
		text-align: center
	}
	footer button {
		float: none
	}
}

.lang-container {
	position: relative;
}
.lang-container #modal-lang {
  display: none;
}
.lang-container.active #modal-lang {
  opacity: 1;
  display: inline-block;
}

@media (min-width: 1024px){
  .header-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      position: relative;
      padding-top: 30px;
  }

  .header-inner .logo {
    position: absolute;
    left:0;
    bottom:0;
  }
}

@media (max-width: 1024px){
  header {
    background-position: 43% 0;
  }
}