s

app/pub/css/an.css

@@ -1,3 +1,14 @@
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+    header .lite-logo {
+        width:25%;
+    }
+    .lite-logo IMG {
+        width:100%;
+    }
 body {
     width: 80%;
     margin: 0px auto;
@@ -36,8 +47,13 @@ h1 {
     font-size: 1.5em;
     font-weight: bold;
 }
-
-
+#auth a {
+    color: #4d4e55;
+    font-size:1.1em;
+    font-weight:bold;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
 #downloadtitle{
     width: 100%;
     background: #69c;
@@ -119,36 +135,59 @@ h1 {
 }
 
 
-#container_form{
-    width:450px;
-    height: 500px;
-    margin: 100px auto 0 auto;
+#container_form {
+    width: 100%;
+    margin-top: 10%;
     text-align: center;
-    margin: 100px auto 0 auto;
-    text-align: center;
-   }   
+}   
 
 #form_title{
     font-size: 18px;
 }   
-
+#container_form p {
+    font-size: 1.3em;
+    margin-bottom: 8px;
+    display: flex;
+    font-weight: bold;
+    color: #181716;
+}
 input[type="email"],input[type="password"]{
-    width: 300px;
-    height:50px;
-    font-size: 18px;
-    margin-bottom: 25px;
-    border-radius: 4px;
+    background: #fff;
+    transition: all 800ms;
+    width: calc(100% - 50px);
+    border-radius: 3px 0 0 3px;
+    border: solid 1px #ccc;
+    border-right: none;
+    outline: none;
+    color: #999;
+    height: 37px;
+    line-height: 35px;
+    display: inline-block;
     padding-left: 10px;
-   } 
-   
+    font-size: 16px;
+    box-sizing: border-box;
+}   
+#container_form span.icon {
+    width: 50px;
+    transition: all 800ms;
+    justify-content: center;
+    color: #999;
+    border-radius: 0 3px 3px 0;
+    background: #e8e8e8;
+    display: flex;
+    border: solid 1px #ccc;
+    border-left: none;
+    font-size: 25px;
+    box-sizing: border-box;
+    align-items: center;
+}
    .submit {
     padding: 13px 30px;
     margin: 5px 0 20px 0;
     font-size: 15px;
     color: #fff;
-    background-color: #2ca8c6;
+    background-color: #69c;
     border: none;
-    border-bottom: 4px solid #6ee9fd;
     cursor: pointer;
    }    
    
@@ -170,9 +209,22 @@ input[type="email"],input[type="password"]{
     padding: 4px;
 }
 
+@media screen and (max-width: 1000px) {
+    header .lite-logo {
+        width: 30%;
+    }
+}
 
+@media screen and (max-width: 768px) {
+    header .lite-logo {
+        width: 35%;
+    }
+}
 
 @media screen and (max-width: 560px) {
+    header .lite-logo {
+        width: 45%;
+    }
     #brand_title, #page_title {
         font-size: .8em;
     }