@charset "UTF-8";

* { padding:0; margin:0; }

body { background:url('../../img/view/logon/img-background-1.jpg') center center no-repeat; background-size:cover; }

button:focus,
input:focus,
select:focus,
textarea:focus { outline:none; }

#ly-Layout { width:100%; height:100%; min-width:300px; display:flex; align-items:center; justify-content:center; }

#ly-Logon { width:100%; min-width:280px; max-width:380px; padding:30px 35px; border:1px solid rgba(255, 255, 255, .2); background-color:rgba(255, 255, 255, .05); transition:all ease .5s; transition-property:background; }
#ly-Logon:hover { background-color:rgba(0, 0, 0, .15); }
#ly-Logon h1 { margin-bottom:30px; text-align:center; }
#ly-Logon h1 img { height:50px; }
#ly-Logon fieldset { border:none; }
#ly-Logon div.input input { width:100%; padding:10px 15px; color:#fff; font-size:1em; background-color:rgba(0, 0, 0, .75); border:none; border-bottom:1px solid rgba(255, 255, 255, .2);  transition:all ease .2s; transition-property:border, background; }
#ly-Logon div.input input:focus { border-color:#ff0; background-color:rgba(25, 25, 25, .75);  }
#ly-Logon div.button { margin-top:20px; text-align:center; }
#ly-Logon div.button button { width:100%; padding:10px 30px; font-size:1em; font-weight:700; border:2px solid rgba(255, 255, 255, .5); color:#fff; text-shadow:0 0 4px #000; background-color:transparent; cursor:pointer; transition:all ease .2s; transition-property:border, background, color; }
#ly-Logon div.button button:focus,
#ly-Logon div.button button:hover { border-color:rgba(0, 100, 0, .4); background-color:rgba(0, 100, 0, .4); color:#fff; }