html {
    overflow-y: overlay;
}

#preloader {
    width: 100%;
    height: 100%;
}

.blue-spinner {
    position: absolute;
    left: 47%;
    top: 45%;
}

#transition {
    animation: transitionIn 0.75s;
    z-index: -1;
}

.logo-brand {
    margin-bottom: 0;
    margin-left: 40%;
}

.paymate-blue {
    color: blue;
}

.paymate-darkblue {
    color: #191970;
}

.left-align {
    text-align: left;
}

.right-align {
    text-align: right;
}

.navbar {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.home-main-div {
    width: 100%;
}

@keyframes transitionIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome {
    font-size: 3.5rem;
}

.about-paymate {
    font-size: 1.5rem;
}

.home-left, .home-right {
    margin: auto 0;
    padding: 7%;
    text-align: center;
}

.home-img {
    width: 70%;
}

.home-button {
    width: 7em;
    margin-top: 5%;
}

/****************CUSTOMER PAGE CSS*****************/

.cust-main {
    padding: 4% 6%;
}

.cust-item {
    padding: 0 10%;
}

/****************CUSTOMER PROFILE CSS**************/

.cust-profile {
    padding: 11rem 10%;
    text-align: center;
}

.cust-pay-btn-div {
    font-size: 1rem;
    margin: 2% auto 5%;
    text-align: center;
}

.cust-pay-btn {
    width: 90%;
}

.transfer-card {
    max-width: 22rem;
    margin: 0 auto;
}


/**************TRANSFER PAGE CSS******************/


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.transfer-main-div {
    padding: 3% 12% 5%;
}

.fa-lock {
    font-size: 1.6rem;
    margin: auto 0;
    padding-left: 0;
}

.transfer-btn {
    width: 15rem;
}

/*************SUCCESS PAGE CSS*************/

.success-main {
    padding: 15rem 10%;
    text-align: center;
}

.success-img, .success-h1 {
    color: #00C09A;
    margin: 1% 0;
}

.success-img {
    font-size: 5rem;
}

/************FAILURE PAGE CSS*****************/

.failure-img, .failure-h1 {
    color: #ff3b3b;
    margin: 1% 0;
}

.failure-img {
    font-size: 5rem;
}

 /***********FOOTER TEMPLATE CSS**************/

#footer-main {
    padding: 7%;
    background-color: #191970;
    text-align: center;
}

.footer-contact {
    color: white;
    margin: 0 1.5%;
    font-size: 1.5rem;
}

.footer-contact:hover {
    color: #0275d8;
}

.copyright {
    font-size: 1rem;
    color: rgb(180, 180, 180);
    margin-top: 2%;
}