html {
background-image: url(/media/hofdi_login.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%; 
}

body {
background-color: transparent;
}





.form-signin {
  max-width: 430px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
}
.login_logo {
background: white url(/login/images/Hofdi.jpg) no-repeat;
background-size: 90%;
height: 80px;
background-position: 50% 50%;
margin-bottom: 20px;
border-radius: 4px;
position: relative;
}

#user_login {
margin-bottom: 20px;
background: white;
}

#user_pass {
margin-bottom: 20px;
background: white;
}

.login_info {
  margin: 10px 15px 0px 15px;
  background: #24890D;
  color: white;
  min-height: 100px;
  padding: 6px  12px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.7;
}

.wrong_credentials {
  margin: 10px 15px 0px 15px;
  background: #711515;
  color: white;
  height: auto;
  padding: 6px  12px;
  border-radius: 4px;
  display: none;
    font-size: 16px;
  line-height: 1.7;
}
 
.forgott_credentials {
height: 44px;
margin-top: 20px;
float: right;
}

.gleymt {
	margin-top: 19px;
	border: none;
	background: chocolate;
}

body {
overflow-y: scroll;
}

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 400;
  src: local('FontAwesome'), local('FontAwesome'), url('http://l-lin.github.io/font-awesome-animation/vendor/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff');
}

@font-face{
font-family: 'FontAwesome';
src: url('https://l-lin.github.io/font-awesome-animation/vendor/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0'), url('https://l-lin.github.io/font-awesome-animation/vendor/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff');
color: white;
}

#spin {
opacity: 0;
-display: none;
color: blue;
font-size: 35px;
padding: 0 9px;
line-height: 80px;

}

.forgot_passw_input {

  margin-top: 22px;
  background: white;
  color: black;
  height: auto;
  padding: 6px  12px;
  border-radius: 4px;
  display: none;

}

.hide_when_resetting {


display: none;

}

.confirm_info {
	margin-top: 22px;
	margin-bottom: 22px;
	display: none;
  background: #FFFFE0;
  color: #333;
  border: 1px solid #e6db55;
  padding: 6px  12px;
  border-radius: 4px;


}

.confirm_info_show {
 display: block;
}


#passw_strength {
background-color: #eee;
border-color: #ddd !important;
border-style: solid;
border-width: 1px;
margin: 12px 5px 5px 1px;
padding: 3px 5px;
text-align: center;
margin-bottom: 20px;
border-radius: 4px;
}

#passw_strength.good {
background: cyan;
}

.passw_strength_hint {
 background: white;
border-color: #ddd !important;
border-style: solid;
border-width: 1px;
margin: 12px 5px 5px 1px;
padding: 3px 5px;
margin-bottom: 20px;
border-radius: 4px;
}

#progress_spin {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
text-align: center;
}

<style>

html { background-image: url("/media/hofdi_login.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100%; }
body { background-color: transparent; }
.form-signin .form-control { position: relative; height: auto; box-sizing: border-box; padding: 10px; font-size: 16px; }
.form-signin .form-control:focus { z-index: 2; }
body { overflow-y: scroll; }
::selection { background: rgb(255, 42, 91); }
::-webkit-selection { background: rgb(255, 42, 91); }
body { color: rgb(114, 114, 114); font-size: 1rem; font-family: "Open Sans", sans-serif; }
a { color: rgb(81, 55, 80); }
a:hover { color: rgb(255, 42, 91); }
h1, h2, h3, h4, h5, h6 { color: rgb(81, 55, 80); font-weight: 400; font-family: Montserrat; }
h1 { font-size: 1.875em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.125em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875em; }
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span { color: rgb(81, 55, 80); }
small { font-family: "Open Sans", sans-serif; font-size: 0.75em; }
blockquote { border-left: 2px solid rgb(255, 42, 91); }
input[type="reset"] { background: rgba(0, 0, 0, 0.4); }
input[type="reset"]:hover, input[type="reset"]:focus { background: rgba(0, 0, 0, 0.6); }
label { color: rgb(127, 86, 125); }
input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="text"], input[type="email"], input[type="password"] { border-bottom: 1px solid rgb(186, 154, 185); color: rgb(0, 0, 0); }
input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="url"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-bottom: 1px solid rgb(255, 32, 83); }
select { border-bottom: 1px solid rgb(186, 154, 185); color: rgb(0, 0, 0); }
select:focus, select:active { border-bottom: 1px solid rgb(255, 32, 83); }
textarea { border-bottom: 1px solid rgb(207, 184, 206); color: rgb(0, 0, 0); }
textarea:focus { border-bottom: 1px solid rgb(255, 32, 83); }
fieldset { border: 1px solid rgba(0, 0, 0, 0.0980392); }
fieldset legend { color: rgb(114, 114, 114); background: rgb(255, 255, 255); }
fieldset label { color: rgb(114, 114, 114); }
.fancy-checkbox label::after { border: 1px solid rgb(179, 179, 179); }
.fancy-checkbox input:checked + label::after { border-color: rgb(255, 42, 91); }
.kleo-login-wrap .fb-register-title { font-family: Montserrat; }
.kleo-login-wrap .kleo-facebook-connect { font-family: Montserrat; }
.kleo-login-wrap .login-form-wrapper .kleo-pop-title { font-family: Montserrat; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label::after { border-bottom: 2px solid rgb(255, 32, 83); }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field { -webkit-appearance: none; }
.kleo-login-wrap .login-form-wrapper button.login-button, .kleo-login-wrap .login-form-wrapper input[type="submit"].login-button { background-color: rgb(255, 42, 91); font-family: Montserrat; }
.kleo-login-wrap .login-form-wrapper button.login-button:hover, .kleo-login-wrap .login-form-wrapper input[type="submit"].login-button:hover { background-color: rgb(255, 17, 71); }
.kleo-login-wrap .login-form-wrapper .kleo-other-action { color: rgb(81, 55, 80); }
.kleo-login-wrap .login-form-wrapper .kleo-other-action:hover { color: rgb(255, 42, 91); }
.kleo-login-wrap .login-form-wrapper .login-demo-info p { color: rgb(81, 55, 80); }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link { color: rgb(81, 55, 80); }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link > a.new-account { color: rgb(81, 55, 80); }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link > a.new-account:hover { color: rgb(255, 42, 91); }
.kleo-login-wrap.dark-login .login-form-wrapper .login-input-wrapper .login-label::after { border-bottom: 2px solid rgb(255, 11, 67); }
.kleo-login-wrap.dark-login .login-form-wrapper button.login-button:hover { background-color: rgb(255, 32, 83); }
html { font-family: sans-serif; text-size-adjust: 100%; }
body { margin: 0px; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0px; }
[hidden], template { display: none; }
a { background-color: transparent; }
a:active, a:hover { outline: 0px; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0px; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0px; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0px; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; margin: 0px; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid rgb(192, 192, 192); margin: 0px 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0px; padding: 0px; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0px; }
td, th { padding: 0px; }
* { box-sizing: border-box; }
::before, ::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.42857; color: rgb(51, 51, 51); }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
a { color: rgb(51, 122, 183); text-decoration: none; }
a:hover, a:focus { color: rgb(35, 82, 124); text-decoration: underline; }
a:focus { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; }
figure { margin: 0px; }
img { vertical-align: middle; }
hr { margin-top: 22px; margin-bottom: 22px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(238, 238, 238); }
[role="button"] { cursor: pointer; }
.clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after { content: " "; display: table; }
.clearfix::after, .container::after, .container-fluid::after, .row::after { clear: both; }
.clear, .clearfix::after, .responsive-items::after, .section::after { clear: both; }
blockquote p, dl dd { font-style: italic; }
* { backface-visibility: hidden; }
dd, dl, dt, li, ol, ul { margin: 0px; padding: 0px; }
body, h5 { font-size: 1rem; }
::selection { color: rgb(255, 255, 255); text-shadow: none; }
::-webkit-selection { color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: 0px !important; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { transition: color 0.4s ease; text-decoration: none !important; }
a img { border: none; }
img { max-width: 100%; }
iframe { border: none !important; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5; margin: 0px 0px 30px; letter-spacing: 0.04em; }
h5, h6 { margin-bottom: 20px; }
h1 { font-size: 1.875em; font-weight: 700; letter-spacing: 0.06em; }
h2 { font-size: 1.5em; }
h3, h4 { font-size: 1.125em; }
h6 { font-size: 0.875em; }
h5:empty { display: none; }
address, blockquote, dd, dl, fieldset, form, ol, pre, table, ul { margin-bottom: 30px; }
small { font-size: 0.75em; }
blockquote cite, pre { font-size: 13px; }
blockquote { font-size: 1.1rem; margin: 20px 0px; padding: 20px 20px 20px 30px; }
blockquote blockquote { margin: 0px; padding: 0px; border: none; }
blockquote p { margin-bottom: 15px; font-size: 1.1rem !important; }
q { letter-spacing: 0.03em; }
.light { font-weight: 300; }
input[required], select { box-shadow: none; }
.clearfix::after, .clearfix::before, .section::after, .section::before { content: ""; display: table; }
dir li, label, menu li, ul li { position: relative; }
select[size]:not([size="1"]), textarea { background: 0px 0px; }
dir, menu, ul { margin: 0px; padding: 0px; }
ol { padding: 0px 0px 0px 30px; margin-left: 10px; }
form { font-size: 1rem; }
input[type="url"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:active, select:focus, textarea:focus { border-color: transparent; }
input[type="reset"] { transition: background 0.3s ease-out; }
label { display: inline-block; font-size: 0.75rem; margin: 0px; }
input[type="url"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"] { height: 40px; line-height: normal; padding: 0px 15px 0px 0px; font-weight: 400; font-size: 0.813rem; border: none; display: block; margin-bottom: 20px; background-color: transparent; transition: border-color 0.3s ease-out; }
input[type="checkbox"], input[type="radio"] { position: relative; top: 2px; margin-right: 15px; }
select { padding: 3px 40px 3px 0px; height: 40px; line-height: normal; background-image: none; -webkit-appearance: none; cursor: pointer; margin-bottom: 30px; font-size: 0.813rem; font-weight: 400; border: none; border-radius: 0px; transition: border 0.3s ease-out, padding 0.4s ease-out; }
select:not([multiple]) { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAoCAYAAAAVBmHYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg2NTFFNjIxNTYwQjExRTU5QzJDRDY4QTkwOTFFNjg4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg2NTFFNjIyNTYwQjExRTU5QzJDRDY4QTkwOTFFNjg4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODY1MUU2MUY1NjBCMTFFNTlDMkNENjhBOTA5MUU2ODgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODY1MUU2MjA1NjBCMTFFNTlDMkNENjhBOTA5MUU2ODgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5aRzKvAAAAeklEQVR42mL8//8/A60AEwMNwajho4aPGj5q+Kjhw8NwxkDzgEdAuhKIlyKJRwNx+7oT6+UoMZwFiHOAeDUQCwLxFCi/F4hDKXU5yPBNUIPWALEPEDsBcQhUnCphvglqoBm1DAaH+WjtP2r4qOGjho8aPmr4gBoOEGAA1cYU3Dv/MDAAAAAASUVORK5CYII=") 100% 50% no-repeat; }
textarea { border: none; padding: 8px 15px 8px 0px; font-size: 0.813rem; overflow-y: hidden; min-height: 40px; line-height: 26px; height: auto; resize: vertical; transition: border-color 0.3s ease-out; }
textarea:focus { background-color: transparent; }
fieldset { padding: 20px; }
fieldset legend { padding: 0px 10px; font-weight: 700; margin-left: -10px; }
fieldset label { font-weight: 400; }
.fancy-checkbox input { position: absolute; }
.fancy-checkbox { position: relative; }
.fancy-checkbox label { width: 12px; height: 12px; position: relative; display: inline-block; transition: 0.4s; border: none; }
.fancy-checkbox label::after { content: ""; position: absolute; z-index: 2; left: 0px; top: 0px; opacity: 1; width: 12px; height: 12px; transition: border-color 0.2s 0.2s, transform 0.3s, opacity 0.3s, left 0.3s; transform: rotate(0deg); }
.fancy-checkbox input { left: 0px; top: 0px; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; }
.fancy-checkbox input:hover + label::after { opacity: 0.5; }
.fancy-checkbox input:checked + label::after { opacity: 1; width: 6px; left: 3px; border-top: none; border-left: none; transform: rotate(45deg); }
body, html { overflow-x: hidden; }
.kleo-login-wrap .kleo-facebook-connect, .menu-list > li > .menu-arrow { transition: all 0.3s ease-out; }
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child { margin-bottom: 0px; }
.btn, .kleo-login-wrap { -webkit-font-smoothing: subpixel-antialiased; }
.kleo-login-wrap .login-form-wrapper .kleo-other-action, .news-widget-wrap .news-content .news-link .news-headline { transition: color 0.3s ease-out; }
.btn { text-transform: uppercase; }
.kleo-login-wrap { text-align: center; margin: 0px; }
.kleo-login-wrap .login-logo-wrapper .logo { margin: 10px 0px; }
.kleo-login-wrap .login-shadow-wrapper { box-shadow: rgba(60, 48, 97, 0.14902) 0px 8px 24px; }
.kleo-login-wrap .before-login-form-wrapper { padding: 30px; background-color: rgba(255, 255, 255, 0.341176); box-shadow: rgba(60, 48, 97, 0.0980392) 0px 1px 0px; margin-bottom: 1px; }
.kleo-login-wrap .before-login-form-wrapper:empty { display: none; }
.kleo-login-wrap .fb-register-title { margin: 0px 0px 20px; padding: 0px; color: rgb(44, 37, 56); text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; font-weight: 400; font-size: 1em; }
.kleo-login-wrap .kleo-facebook-connect { text-align: center; display: table; width: 100%; height: 50px; padding: 0px; border-radius: 0px; background-color: rgb(58, 87, 149); font-weight: 700; letter-spacing: 0.03em; font-size: 0.688em; transition: all 0.3s ease-out; }
.kleo-login-wrap .kleo-facebook-connect > span { padding: 0px 10px; display: table-cell; vertical-align: middle; width: 100%; }
.kleo-login-wrap .kleo-facebook-connect > i { float: left; width: 50px; height: 50px; line-height: 50px; background-color: rgb(51, 78, 137); transition: all 0.3s ease-out; }
.kleo-login-wrap .kleo-facebook-connect:hover { opacity: 1; color: rgb(255, 255, 255); background-color: rgb(51, 76, 131); }
.kleo-login-wrap .kleo-facebook-connect:hover > i { background-color: rgb(44, 67, 118); }
.kleo-login-wrap .login-form-wrapper { padding: 30px 30px 20px; background-color: rgba(255, 255, 255, 0.341176); box-shadow: rgba(60, 48, 97, 0.0980392) 0px 1px 0px; }
.kleo-login-wrap .login-form-wrapper .kleo-pop-title { margin: 0px 0px 20px; padding: 0px; display: block; color: rgb(44, 37, 56); text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; font-weight: 400; font-size: 1em; }
.kleo-login-wrap .login-form-wrapper form { margin-bottom: 0px; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper { position: relative; z-index: 1; display: block; width: 100%; vertical-align: top; overflow: hidden; height: 55px; margin-bottom: 15px; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label { display: block; position: absolute; font-size: 0.813em; -webkit-font-smoothing: antialiased; user-select: none; bottom: 0px; left: 0px; width: 100%; height: 40px; line-height: 40px; padding: 0px; margin: 0px; text-align: left; pointer-events: none; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label::after, .kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; border-bottom: 1px solid rgba(44, 37, 56, 0.498039); }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label::after { transform: translate3d(-100%, 0px, 0px); transition: transform 0.3s; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label .login-label-content { position: absolute; display: block; width: 100%; color: rgb(44, 37, 56); text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; font-weight: 400; transition: all 0.3s ease-out; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field { position: relative; display: block; float: right; border: none; border-radius: 0px; -webkit-appearance: none; margin-top: 10px; height: 40px; width: 100%; color: rgb(44, 37, 56); text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; padding: 0px; background-color: transparent !important; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:focus { outline: 0px; background: 0px 0px !important; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:focus + .login-label::after, .kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:valid + .login-label::after { transform: translate3d(0px, 0px, 0px); }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:focus + .login-label .login-label-content, .kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:valid + .login-label .login-label-content { font-size: 10px; transform: translate3d(0px, -25px, 0px); }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill, .kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill:active, .kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill:focus, .kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill:hover { transition: background-color 50000s ease-in-out !important; }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill + .login-label::after { transform: translate3d(0px, 0px, 0px); }
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field:-webkit-autofill + .login-label .login-label-content { font-size: 10px; transform: translate3d(0px, -25px, 0px); }
.kleo-login-wrap .login-form-wrapper .kleo-result { font-size: 0.813em; color: rgb(44, 37, 56); }
.kleo-login-wrap .login-form-wrapper button.login-button, .kleo-login-wrap .login-form-wrapper input[type="submit"].login-button { width: 100%; border: none; height: 50px; border-radius: 0px; margin: 15px 0px 0px; padding: 0px; color: rgb(255, 255, 255); letter-spacing: 0.03em; font-size: 0.688em; }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox { margin-top: 25px; width: 100%; float: left; }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox label { border: none; margin: 0px 0px 0px 2px; float: left; }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox label::after { opacity: 1; width: 12px; height: 12px; border: 2px solid transparent; left: 0px; top: 3px; background-color: rgba(44, 37, 56, 0.298039); transition: border-color 0.3s, background-color 0.2s, left 0.2s, top 0.2s, transform 0.2s; transform: rotate(0deg); }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox input { width: 50%; }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox > span { display: block; position: relative; float: left; margin-left: 10px; font-size: 0.813em; color: rgb(44, 37, 56); text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; margin-bottom: 15px; }
.kleo-login-wrap.dark-login .before-login-form-wrapper .fb-register-title, .kleo-login-wrap.dark-login .login-create-account-wrapper .kleo-register-link, .kleo-login-wrap.dark-login .login-create-account-wrapper .kleo-register-link > a.new-account, .kleo-login-wrap.dark-login .login-form-wrapper .fancy-checkbox > span, .kleo-login-wrap.dark-login .login-form-wrapper .kleo-other-action, .kleo-login-wrap.dark-login .login-form-wrapper .kleo-pop-title, .kleo-login-wrap.dark-login .login-form-wrapper .kleo-result, .kleo-login-wrap.dark-login .login-form-wrapper .login-demo-info p, .kleo-login-wrap.dark-login .login-form-wrapper .login-input-wrapper .login-field, .kleo-login-wrap.dark-login .login-form-wrapper .login-input-wrapper .login-label .login-label-content { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 0px; }
.kleo-login-wrap .login-form-wrapper .fancy-checkbox > input:checked + label::after { width: 7px; border-right-color: rgb(198, 33, 71); border-bottom-color: rgb(198, 33, 71); border-top: none; border-left: none; background-color: transparent; top: 0px; left: 7px; transform: rotate(45deg); }
.kleo-login-wrap .login-form-wrapper .kleo-other-action { display: block; float: right; font-size: 0.813em; text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; transition: color 0.3s ease-out; text-decoration: underline !important; }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link > a.new-account, .kleo-login-wrap + .mfp-close { transition: color 0.3s ease-out; }
.kleo-login-wrap .login-form-wrapper .login-demo-info { margin-bottom: 5px; }
.kleo-login-wrap .login-form-wrapper .login-demo-info p { text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; font-size: 0.813em; font-style: italic; margin: 0px; padding: 0px; background: 0px 0px; }
.kleo-login-wrap .login-form-wrapper .login-demo-info p strong { font-weight: 600; }
.kleo-login-wrap .login-create-account-wrapper { background-color: rgba(255, 255, 255, 0.341176); padding: 20px 0px; margin: 1px 0px 0px; }
.kleo-login-wrap.dark-login .before-login-form-wrapper, .kleo-login-wrap.dark-login .login-form-wrapper { background-color: rgba(0, 0, 0, 0.4); }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link { font-size: 0.813em; display: block; text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; }
.kleo-login-wrap .login-create-account-wrapper .kleo-register-link > a.new-account { display: block; text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px; transition: color 0.3s ease-out; text-decoration: underline !important; }
.kleo-login-wrap.dark-login .login-shadow-wrapper { box-shadow: none; }
.kleo-login-wrap.dark-login .login-form-wrapper .login-input-wrapper .login-label::after, .kleo-login-wrap.dark-login .login-form-wrapper .login-input-wrapper .login-label::before { border-bottom: 1px solid rgba(255, 255, 255, 0.498039); }
.kleo-login-wrap.dark-login .login-form-wrapper .kleo-result a { text-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 0px; }
.kleo-login-wrap.dark-login .login-form-wrapper .fancy-checkbox label::after { background-color: rgba(255, 255, 255, 0.4); }
#kleo-lostpass-modal .kleo-other-action { float: none; text-align: left; margin-top: 25px; }
.kleo-login-wrap + .mfp-close { overflow: hidden; transition: color 0.3s ease-out; }
.kleo-login-wrap + .mfp-close::before { content: ""; display: block; font-family: icomoon; color: rgb(44, 37, 56); font-size: 14px; font-weight: 400; transition: color 0.3s ease-out; }
.kleo-form-modal .kleo-login-wrap .before-login-form-wrapper, .kleo-form-modal .kleo-login-wrap .login-create-account-wrapper, .kleo-form-modal .kleo-login-wrap .login-form-wrapper { background-color: rgba(255, 255, 255, 0.901961); }
.kleo-form-modal .kleo-login-wrap.dark-login .before-login-form-wrapper, .kleo-form-modal .kleo-login-wrap.dark-login .login-create-account-wrapper, .kleo-form-modal .kleo-login-wrap.dark-login .login-form-wrapper { background-color: rgba(0, 0, 0, 0.85098); }
#kleo-login-modal, #kleo-lostpass-modal { max-width: 500px; position: relative; margin: 0px auto; }
.mfp-content:hover .login-field:-webkit-autofill, .mfp-content:hover .login-field:-webkit-autofill:active, .mfp-content:hover .login-field:-webkit-autofill:focus, .mfp-content:hover .login-field:-webkit-autofill:hover { transition: background-color 50000s ease-in-out !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.mfp-hide { }
.rtm-user-meta-details .username { font-size: 16px; line-height: 1; margin-bottom: 6px; }
.mfp-hide { }



</style>