@charset "utf-8";

/* @backgrounds :: modify or add yours below 
------------------------------------------------------------------- */
body{ background-color:#bdeeec;font-family:"Roboto Condensed",Arial,Helvetica,sans-serif;line-height:1.231;font-weight:400;font-size:14px;color:#34495E }
/* @form wrappers 
---------------------------------- */
.smartLogin-wrap{padding:30px}
.smartLogin,.smartLogin *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.smartLogin{font-family:"Roboto Condensed",Arial,Helvetica,sans-serif;line-height:1.231;font-weight:400;font-size:14px;color:#34495E}
.smart-container{margin:20px auto;margin-top:50px;background:#fff;max-width:340px;padding:0;padding-bottom:20px;border-radius: .1rem;box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);}
.login .photo{position:relative;width:100px;height:100px;margin:30px auto;border-radius:50%;background:#dfdfdf;border:13px solid #dfdfdf;overflow:hidden!important;transform:rotate(-1deg)}
.login .photo:before{position:absolute;content:'';width:35px;height:35px;top:0;right:20px;border-radius:50%;background:#aaa;border:2px solid #fff;transform:scale(0);transition:.5s cubic-bezier(0.68,-0.55,0.27,1.55);-webkit-animation:user-head .5s 0 forwards;-moz-animation:user-head .5s 0 forwards;animation:user-head .5s 0 forwards}
.login .photo:after{position:absolute;content:'';width:140px;height:220px;top:38px;right:-32px;border-radius:50%;background:#aaa;border:2px solid #fff;transform:translateY(36px);transition:.5s cubic-bezier(0.68,-0.55,0.27,1.55);-webkit-animation:user-body .5s .3s forwards;-moz-animation:user-body .5s .3s forwards;animation:user-body .5s .3s forwards}
.smartBounce .smart-container{transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);opacity:1}
.smartLogin .elem-group{margin-bottom:15px}


/*Photo*/
.photo {position: relative;width: 100px;height: 100px;margin: 30px auto;border-radius: 50%;background: rgb(223, 223, 223);border: 13px solid rgb(223, 223, 223);overflow: hidden !important;transform: rotate(-1deg)}
.photo:before {position: absolute;content: '';width: 32px;height: 32px;top: 0px;right: 19px;border-radius: 50%;background: #aaa;border: 2px solid #fff;	transform: scale(0);transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);	-webkit-animation: user-head 0.5s 0s forwards;-moz-animation: user-head 0.5s 0s forwards;animation: user-head 0.5s 0s forwards;}
.photo:after {position: absolute;content: '';width: 140px;height: 220px;top: 38px;right: -32px;border-radius: 50%;background: #aaa;	border: 2px solid #fff;	transform: translateY(36px);transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);	-webkit-animation: user-body 0.5s 0.3s forwards;-moz-animation: user-body 0.5s 0.3s forwards;animation: user-body 0.5s 0.3s forwards;}
span {display: block;text-align: center;margin: -15px 0;font-size: 1.2rem;color: #3f3f3f}


.tile-header {
    background-image:url(../images/login.jpg);
    background-position: center;
    background-size: cover;
    height: 12rem;
	margin-bottom: 2rem
}

h2 {color: white; opacity: .75;margin:0; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;}

/* -- highlighter animation --------------------------- */
@-webkit-keyframes inputHighlighter {from { background:#5264AE; } to { width:0; background:transparent;}}
@-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent;}}
@keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; }}
@-webkit-keyframes user-head {100% {-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1);} }
@-moz-keyframes user-head {100% {-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1);} }
@keyframes user-head {100% {-webkit-transform:scale(1);transform:scale(1);-moz-transform:scale(1);} }
@-webkit-keyframes user-body {100% {-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px);} }
@-moz-keyframes user-body {100% {-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px);} }
@keyframes user-body {100% {-webkit-transform:translateY(2px);transform:translateY(2px);-moz-transform:translateY(2px);} }




/* @form header + footer sections 
----------------------------------------- */
.smartLogin .frm-header,.smartLogin .frm-footer{overflow:hidden;padding:20px 30px}
.smartLogin .frm-footer{padding-top:5px}

.smartLogin .frm-header h4 i{font-size:28px;margin-right:3px;color:#E1E6E9}

/* @form body  
------------------------------------------------------------ */	
.smartLogin .frm-body{ 	padding:30px 30px 0 30px;}


/* @element general styling :: fonts :: adjust accordingly
------------------------------------------------------------- */
.smartLogin :not(output):-moz-ui-invalid,.smartLogin input:invalid{box-shadow:none}
.smartLogin label,.smartLogin input,.smartLogin button{margin:0;font-size:1.1rem;color:#3f3f3f;outline:none}

/* @remove browser specific styling
----------------------------------------------- */
.smartLogin .flo-input{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-border-radius:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}

/* @labels font-size styling :: adjust to fit your needs 
--------------------------------------------------------- */
.smartLogin .field-label{ font-size:14px; }


/* @universal rules for all elements 
---------------------------------------------------- */
.smartLogin .flo-input,.smartLogin .flo-button,.smartLogin .flo-notification{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .5s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;outline:none}

/* @control border-size :: color etc for these elements 
----------------------------------------------------------- */
.smartLogin .flo-input{font-family: "Roboto Condensed", sans-serif;position:relative;vertical-align:top;border:1px solid rgba(117,117,117,0.35);display:-moz-inline-stack;display:inline-block;*display:inline;color:#3f3f3f;outline:none;padding:10px;height:42px;width:100%;*zoom:1}
.smartLogin .flo-input:hover{border-color:#D1DEE7}
.smartLogin .flo-input:focus{border-color: #007aff;color: #3f3f3f;box-shadow: 0 0 6px #007aff;}

/* @buttons 
----------------------------------------------------- */
.smartLogin .flo-button{border:0;height:42px;width:100%;color:#fff;line-height:1;font-size:1.2rem;font-weight:400;cursor:pointer;padding:0 18px;text-align:center;vertical-align:top;background:#007aff;display:inline-block;-webkit-user-drag:none;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.08);font-family: "Roboto Condensed", sans-serif;}

/* @buttons :hover, :active states 
---------------------------------------------------------------- */
.smartLogin .flo-button:hover, 
.smartLogin .flo-button:active{ color: #fff; background: #0169da; }

/* @validaion - error and success
------------------------------------- */
.smartLogin .state-error .flo-input{background:#FDE9E1;border-color:#F5AE96}
.smartLogin .state-error .flo-input:focus{-webkit-box-shadow:0 0 3px #E94E1B inset;-moz-box-shadow:0 0 3px #E94E1B inset;-o-box-shadow:0 0 3px #E94E1B inset;box-shadow:0 0 3px #E94E1B inset;border-color:#E94E1B}
.smartLogin .state-error + em{display:block!important;margin-top:6px;padding:0 3px;font-style:normal;line-height:normal;color:#E94E1B;font-size:.95rem}
.smartLogin .state-success .flo-input{background:#F0FEE9;border-color:#A5D491}
.smartLogin .state-success .flo-input:focus{-webkit-box-shadow:0 0 3px #A5D491 inset;-moz-box-shadow:0 0 3px #A5D491 inset;-o-box-shadow:0 0 3px #A5D491 inset;box-shadow:0 0 3px #A5D491 inset}

/* @notifications
-------------------------------------------------------------- */
.smartLogin .form-msg{display:none}
.smartLogin .flo-notification{color:#444;padding:15px;position:relative;margin-bottom:10px}
.smartLogin .flo-notification p{margin:0;padding:0 15px;padding-left:5px;line-height:normal}
.smartLogin .flo-notification .close-btn{margin-top:-7px;padding:inherit;position:absolute;text-decoration:none;font:bold 20px/20px Arial,sans-serif;opacity:.65;color:inherit;display:block;right:1px;top:14%}
.smartLogin .flo-notification .close-btn:hover{opacity:1}
.smartLogin .alert-info{color:#163161;background-color:#cfe6fc}
.smartLogin .alert-success{color:#363;background-color:#d2f7ad}
.smartLogin .alert-warning{color:#C60;background-color:#fae7a2}
.smartLogin .alert-error{color:#900;background-color:#FBDBCF}