MT-168: Updated login page styles

src/main/webapp/WEB-INF/css/login.css

@@ -10,13 +10,13 @@
 }
 .myteam-login .login {
     background: #fff;
-    border: 1px solid #00b4e5;
-    height: calc(100% - 136px);
-    margin: 10px;
+    height: 100%;
     padding: 0 50px;
     position: absolute;
     right: 0;
     top: 0;
+    width: 25%;
+    z-index: 10;
     /* transform: translate(0, -50%); */
 }
 .myteam-login .login > div {
@@ -30,7 +30,7 @@
     width: 100%vw !important; 
 } */
 .carousel-inner .slide1, .slide2, .slide3, .slide4, .slide5 {
-	width: 100%;
+	width: 75%;
     height: 100vh;
     background-position: center !important;
     background-repeat: no-repeat !important;
@@ -55,14 +55,15 @@
     border-radius: 15px;
 }
 .carousel-control.left, .carousel-control.right {
+    background: transparent;
 	border-radius: 0 !important;
 }
 .carousel-caption {
 	background: #000;
-	opacity: 0.6;
+	opacity: 0.8;
 	bottom: 0;
 	left: 0;
-	width: 100%;
+	width: 75%;
 }
 .carousel-caption h3 {
 	margin: 0 0 10px 0;
@@ -71,7 +72,7 @@
 	bottom: 10px;
 	left: 0;
 	margin: 0;
-	width: 100%;
+	width: 75%;
 }
 
 /* ===== For Mobile Devices ===== */
@@ -86,10 +87,23 @@
         right: 50%;
         top: 50%;
         transform: translate(50%, -50%);
+        width: auto;
     }
     .myteam-login .login > div {
         position: relative;
         top: 0;
         transform: translate(0, 0);
     }
+    .carousel-inner .slide1, .slide2, .slide3, .slide4, .slide5, .carousel-caption, .carousel-indicators {
+        width: 100%;
+    }
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    .carousel-inner .slide1, .slide2, .slide3, .slide4, .slide5, .carousel-caption, .carousel-indicators {
+        width: 65%;
+    }
+    .myteam-login .login {
+        padding: 0 20px;
+        width: 35%;
+    }
 }
\ No newline at end of file