*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


@font-face {
  font-family: sans;
  src: url(fonts/font.woff2);
  src: url(fonts/font.woff2) format("woff2");
}


body{
    font-family: sans, 'sans-serif';
    background-image: url(assets/bgg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

nav{
    display: flex;
    flex-direction: column;
    background: #403C3A;
    justify-content: space-between;
    height: 15vh;
    padding: 7px 40px;
    border-bottom: 4px solid #FFCD41;
}

nav .fdic{
    display: flex;
    align-items: center;
}

.fdic img{
    width: 40px;
}

.fdic p{
    font-size: 12px;
    margin-left: 10px;
    color: white;
}

nav .nav_flex{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
}

.nav_flex a{
    color: white;
}

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 15px;
}

section h1{
    color: #181616;
    text-align: center;
    width: 33%;
    text-align: left;
    font-weight: 550;
    font-size: 36px;
}

section form{
    width: 33%;
    margin: 25px 0px;
    padding: 1.5rem;
    border: 1px solid #cfcac7;
    background: white;
    border-radius: 8px;
    box-shadow: rgba(64, 60, 58, 0.14) 0px 1px 3px;
    display: flex;
    flex-direction: column;
}

.formbox {
    color: #181616;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.formbox input {
    width: 100%;
    padding: 1.6rem 0.75rem 0.3rem 0.5rem;
    font-size: 1rem;
    border: none;
    border-bottom: 1px solid #919698;
    border-radius: 3px;
    outline: none;
    background: white;
    border-radius: 0px;
    transition: border-color .2s;
}

.formbox input:hover{
    background: #F3F2F2;
    border-bottom: 2px solid #403C3A;
}

.formbox input:focus {
    color: #212529;
    background-color: #fff;
    border: 2px solid green;
    
    outline: 0;
}

.formbox label {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #212529c6;
    pointer-events: none;
    transition: all .1s ease;
}


.formbox input:focus ~ label,
.formbox input:not(:placeholder-shown) ~ label {
    top: 0.55rem;
    font-size: 0.7rem;
    color: #9C273B;
}

.formbox input:focus ~ label::before,
.formbox input:not(:placeholder-shown) ~ label::before {
    content: "";
    position: absolute;
    top: -0.01rem;
    left: 0rem;
    right: -0.4rem;
    bottom: -0.3rem;
    background: none;
    z-index: -1;
}

.formbox p{
    position: absolute;
    right: 3%;
    top: 40%;
    color: #5A469B;
}

.remember{
    display: flex;
    align-items: center;
    margin: 15px 0px;
}

.remember input{
    width: 18px;
    height: 18px;
}

.remember p{
    margin-left: 10px;
    font-size: 16px;
}

form button{
    width: 100%;
    height: 40px;
    margin: 20px 0px;
    border-radius: 30px;
    font-size: 16px;
    color: #181616;
    background: #FFCD41;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #181616;
}

p.forgot{
    text-align: center;
    margin: 30px 0px 0px 0px;
    color: #5A469B;
}

footer{
    background: #F3F2F2;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

footer img.vantage{
    width: 270px;
    margin: 20px 0px 30px 0px;
}

.footer_flex{
    display: flex;
}

.footer_flex ul{
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}


.footer_flex ul li{
    list-style-type: none;
    text-decoration: underline;
    font-size: 16px;
    margin: 15px 0px;
}
.footer_flex p{
    font-size: 12px;
}


.loader {
    width: 19px;
    height: 19px;
    border: 2px solid #ffff;     
    border-top: 2px solid #FFCD41;    
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}


@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


aside{
    position: fixed;
    z-index: 999;
    right: -4%;
    top: 50%;
    background: #6F5DD4;
    color: white;
    padding: 10px 30px;
    border-radius: 3px;
    transform: rotate(90deg);
    font-size: 14px;
    font-weight: 600;
}
@media only screen and (max-width:1000px){

    section form, section h1{
        width: 50%;
    }

}

@media only screen and (max-width:768px){

    section form, section h1{
        width: 68%;
    }

    aside{
        right: -10%;
    }

}


@media only screen and (max-width:500px){
    nav{
        padding: 10px 15px;
        height: 16vh;
    }


    .nav_flex img{
        width: 150px;
    }

    section h1{
        font-size: 24px;
    }

    section{
        padding: 20px 15px;
    }

    section form, section h1{
        width: 85%;
    }

    .footer_flex{
        flex-direction: column-reverse;
    }

}