/* ^^^^^^^^^^^^ NAVBAR ^^^^^^^^^^^^ */
 .nav {
     width: 100%;
     height: 60px;
     background-color: rgba(255, 255, 255, 0.8);
     border-bottom: 4px solid black;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     box-sizing: border-box;
     z-index: 9999;
     display: flex;
     justify-content: space-between;
 }

 /* ******** Nav - Logo ********* */
 .nav .logo {
     width: 50%;
     box-sizing: border-box;

     padding: 1px 3px 1px 3px;

     display: flex;
     overflow: hidden;
     align-items: center;

     cursor: default;
 }

 .nav .logo img {
     height: 50px;
     margin-right: 8px;
 }

 .nav .logo h3:hover {
     cursor: default;
 }

 /* body */
 body {
     display: flex;
     width: 100%;
     height: 100%;
     justify-content: center;
     align-items: center;
     background: #4e54c8;
     background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
     font-family: 'Poppins', sans-serif;
 }

 /* form */
 .form-Bg {
     z-index: 15;
     position: relative;
     font-size: 14px;
     padding-top: 40px;
     overflow: hidden;
 }

 .my-login-page .brand {
     width: 90px;
     background-color: #f7f9fb;
     height: 90px;
     overflow: hidden;
     border-radius: 50%;
     margin: 40px auto;
     box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
     position: relative;
     z-index: 15;
     margin-bottom: 20px;
 }

 .my-login-page .brand img {
     width: 100%;
 }

 .my-login-page .card-wrapper {
     width: 450px;
 }

 .my-login-page .card {
     border-color: transparent;
     box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
 }

 .my-login-page .card.fat {
     padding: 10px;
 }

 .my-login-page .card .card-title {
     margin-bottom: 30px;
 }

 .my-login-page .form-control {
     border-width: 2.3px;
 }

 .my-login-page .form-group label {
     width: 100%;
 }

 .my-login-page .btn.btn-block {
     padding: 12px 10px;
 }

 .my-login-page .footer {
     margin: 40px 0;
     color: #f7f9fb;
     text-align: center;
 }

 @media screen and (max-width: 425px) {
     .my-login-page .card-wrapper {
         width: 90%;
         margin: 0 auto;
     }
 }

 @media screen and (max-width: 320px) {
     .my-login-page .card.fat {
         padding: 0;
     }

     .my-login-page .card.fat .card-body {
         padding: 15px;
     }
 }

 /* Background */
 .circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .circles li {
     position: absolute;
     display: block;
     list-style: none;
     width: 20px;
     height: 20px;
     background: rgba(255, 255, 255, 0.2);
     animation: animate 25s linear infinite;
     bottom: -150px;

 }

 .circles li:nth-child(1) {
     left: 25%;
     width: 80px;
     height: 80px;
     animation-delay: 0s;
 }


 .circles li:nth-child(2) {
     left: 10%;
     width: 20px;
     height: 20px;
     animation-delay: 2s;
     animation-duration: 12s;
 }

 .circles li:nth-child(3) {
     left: 70%;
     width: 20px;
     height: 20px;
     animation-delay: 4s;
 }

 .circles li:nth-child(4) {
     left: 40%;
     width: 60px;
     height: 60px;
     animation-delay: 0s;
     animation-duration: 18s;
 }

 .circles li:nth-child(5) {
     left: 65%;
     width: 20px;
     height: 20px;
     animation-delay: 0s;
 }

 .circles li:nth-child(6) {
     left: 75%;
     width: 110px;
     height: 110px;
     animation-delay: 3s;
 }

 .circles li:nth-child(7) {
     left: 35%;
     width: 150px;
     height: 150px;
     animation-delay: 7s;
 }

 .circles li:nth-child(8) {
     left: 50%;
     width: 25px;
     height: 25px;
     animation-delay: 15s;
     animation-duration: 45s;
 }

 .circles li:nth-child(9) {
     left: 20%;
     width: 15px;
     height: 15px;
     animation-delay: 2s;
     animation-duration: 35s;
 }

 .circles li:nth-child(10) {
     left: 85%;
     width: 150px;
     height: 150px;
     animation-delay: 0s;
     animation-duration: 11s;
 }

 @keyframes animate {

     0% {
         transform: translateY(0) rotate(0deg);
         opacity: 1;
         border-radius: 0;
     }

     100% {
         transform: translateY(-1000px) rotate(720deg);
         opacity: 0;
         border-radius: 50%;
     }

 }