@font-face {
    font-family: "Allstate Sans";
    src: url("assets/fonts/Allstate-Sans/allstatesansw-regular.woff2") format("woff2"),
    url("assets/fonts/Allstate-Sans/allstatesansw-regular.woff") format("woff"),
    url("assets/fonts/Allstate-Sans/allstatesansw-regular.ttf") format("truetype");
}

@font-face {
    font-family: "Allstate Sans";
    src: url("assets/fonts/Allstate-Sans/allstatesansw-bold.woff2") format("woff2"),
    url("assets/fonts/Allstate-Sans/allstatesansw-bold.woff") format("woff"),
    url("assets/fonts/Allstate-Sans/allstatesansw-bold.ttf") format("truetype");
    font-weight: bold;
}
body {
    margin: 0;
    background-color: white;
    text-align: center;
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(16rem/16);
    font-weight: 300;
    color: #000000;
}

.error__txt {
    color: #c11616;
    background-color: #ffdce0;
    border-radius: 4px;
    border: 1px #c11616 solid;
    text-align: center;
    padding: .5rem;
    margin-bottom: 1rem;
}

.banner-container {
    display: flex;
    flex-direction: row;
    height: 72px;
    background-position: bottom right, center;
    background-repeat: no-repeat, no-repeat;
    background-color: #0e1941;
    background-size: cover;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    min-width: 0;
}

.banner-links-container {
    display: flex;
    align-items: center;
    height: calc(40rem/16);
    padding-right: calc(32rem/16);
    min-width: 0;

}

.banner-link {
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(16rem/16);
    color: white;
    background: none;
    border: none;
    position: relative;
    margin-right: calc(50rem/16);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    padding-top: calc(16rem/16);
    padding-left: calc(20rem/16);
    padding-bottom: calc(11rem/16);
    padding-right: calc(6rem/16);
}

.banner-link-active {
    text-decoration: underline;
}

.banner-link:hover {
    cursor: pointer;
    text-decoration: underline;
}

.banner__logo-title-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
}

.banner__logo-title-container__logo {
    width: calc(83rem/16);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #45BCE5;
}

.banner__logo-title-container__logo__image {
    width: calc(60rem/16);
    height: 100%
}

.banner__logo-title-container__title {
    padding-left: calc(16rem/16);
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(20rem/16);
    font-weight: bold;
    color: #ffffff;
}

.container {
    margin-top: calc(40rem/16);
    display: flex;
    justify-content: center;
    min-width: 0;
    position: relative;
    min-height: 100vh;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(592rem/16);
    margin: 0 auto calc(175rem/16);
}

.login-container__title {
    text-align: center;
    font-size: calc(26rem/16);
    color: #414042;
    font-weight: bold;
    margin-bottom: calc(37rem/16);
}

.signup-button {
    transition: background-color 0.5s;
    width: calc(217rem/16);
    height: calc(38.5rem/16);
    border: none;
    border-radius: calc(28rem/16);
    background-color: #ed7766;
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(14rem/16);
    font-weight: bold;
    color: #0e1941;
}

.signup-button:hover {
    transition: background-color 0.5s;
    cursor: pointer;
    border: calc(2rem/16) solid #ed7766;
    background-color: #fff;
    color: #ed7766;
}

.login-button {
    transition: background-color 0.5s;
    width: calc(248rem/16);
    height: calc(44rem/16);
    border: none;
    border-radius: calc(28rem/16);
    background-color: #ed7766;
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(16rem/16);
    font-weight: bold;
    color: #0e1941;
    cursor: pointer;
}

.login-button:hover {
    transition: background-color 0.5s;
    background-color: #fff;
    color: #ed7766;
    border: calc(2rem/16) solid #ed7766;
}

.login-button:disabled {
    width: calc(248rem/16);
    height: calc(44rem/16);
    border: none;
    border-radius: calc(28rem/16);
    background-color: #f3f6f9;
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(16rem/16);
    font-weight: bold;
    color: #b9c6d3;
    cursor: default;
}

.input-container {
    max-width: calc(400rem/16);
    margin: 0 auto calc(30rem/16);
}

.input {
    width: calc(340rem/16);
    height: calc(40rem/16);
    border-radius: calc(8rem/16);
    border: solid 1px #c4c4c4;
    background-color: #ffffff;
    font-size: calc(16rem/16);
    padding-left: calc(10rem/16);
}

.input-label-container {
    font-size: calc(14rem/16);
    font-weight: normal;
    margin-bottom: calc(6rem/16);
    display: flex;
    justify-content: space-between;
}


.forgot-link {
    font-family: 'Source Sans Pro', sans-serif;
    color: #0e1941;
    font-weight: 600;
    text-decoration: none;
}

.blue-link {
    width: 100%;
    height: calc(19rem/16);
    font-size: calc(16rem/16);
    font-weight: bold;
    color: #0e1941;
    text-decoration: none;
}

.join-text {
    margin-top: calc(25rem/16);
    margin-bottom: calc(10rem/16);
}

.contact-us-button {
    transition: background-color 0.5s;
    width: calc(248rem/16);
    height: calc(44rem/16);
    border: none;
    border-radius: calc(28rem/16);
    background-color: #45BCE5;
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(16rem/16);
    font-weight: bold;
    color: #0e1941;
    margin-top: calc(150rem/16);
}

.contact-us-button:hover {
    transition: background-color 0.5s;
    border: 2px solid #45BCE5;
    background-color: #fff;
    color: #0e1941;
    cursor: pointer;
}

.footer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(175rem/16);
}

.footer-container__good-hands-container {
    display: flex;
    flex-direction: row;
    height: calc(100rem/16);
}

.footer-container__good-hands-container__logo {
    width: calc(98rem/16);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0033A0;
}

.footer-container__good-hands-container__image {
    width: calc(60rem/16);
    height: calc(48rem/16);
}

.footer-container__good-hands-container__text {
    margin-left: calc(30rem/16);
    margin-top: calc(27rem/16);
    font-family: 'Allstate Sans', sans-serif;
    font-size: calc(40rem/16);
    letter-spacing: -0.94px;
    font-weight: 500;
    line-height: 1.05;
    color: #0e1941;
}

.footer-container__good-hands-container__text--blue {
    color: #0033A0;
}

.footer-container__disclaimer {
    text-align: start;
    font-size: calc(10rem/16);
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-content: center;
    background-color: #f3f6f9;
    padding: calc(8rem/16) calc(18rem/16);
}

.footer-container__copyright {
    text-align: start;
    font-size: calc(10rem/16);
    display: flex;
    justify-content: start ;
    flex-direction: column;
    align-content: center;
    padding: calc(8rem/16) calc(18rem/16);
}

.footer__bottom-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: "Allstate Sans", sans-serif;
    font-size: calc(12rem/16);
    padding-left: calc(40rem/16);
    padding-bottom: calc(6rem/16);
    padding-right: calc(40rem/16);
    color: #2F3847;
}

.footer__bottom-line__buttons {
    display: flex;
    flex-direction: row;
}

.footer__bottom-line__button {
    margin-left: calc(32rem/16);
    color: #2F3847;
    text-decoration: none;
}

.error-icon {
    margin-top: 1.375rem;
    margin-left: 1rem;
}

.error-text {
    margin-top: 0.875rem;
    margin-left: 1rem;
}

.error-container {
    display: none;
    background-color: #FFFFFF;
    border-left: solid 0.375rem #dc0808;
    box-shadow: 0 0 0.75rem 0 rgba(221, 221, 221, 0.5);
    font-size: 0.875rem;
    color: #414042;
    line-height: 1.43;
    height: 4.25rem;
    max-width: 29.625rem;
    text-align: left;
    grid-template-columns: 2.375rem 26.625rem;
    margin: auto auto 2.125rem;
}

.error-visible {
    display: grid;
}

.error-border {
    border: solid 0.0625rem #bd413c;
}

.error-border:focus {
    border: solid 0.0625rem #bd413c;
}

.hamburger-dropdown {
    display: none;
}

.hamburger-button {
    padding: 0;
    border: none;
    background: none;
    margin-right: calc(34rem/16);
    width: calc(30rem/16);
    height: calc(23rem/16);
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.hamburger-button:focus {
    outline: none;
}

.hamburger-button span {
    display: block;
    position: absolute;
    height: calc(3rem/16);
    padding: 0;
    width: 100%;
    background: #FFFFFF;
    border-radius: calc(5rem/16);
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.hamburger-button span:nth-child(1) {
    top: 0;
}

.hamburger-button span:nth-child(2), .hamburger-button span:nth-child(3) {
    top: calc(9rem/16);
}

.hamburger-button span:nth-child(4) {
    top: calc(18rem/16);
}

.hamburger {
    position: relative;
    display: inline-block;
    width: 30px;
    padding-right: calc(34rem/16);
}

.hamburger-menu {
    display: none;
    position: absolute;
    width: calc(100% - 5.1875rem);
    z-index: 1;
    right: 0;
    top: calc(42rem/16);
    background-color: #0e1941;
    padding-bottom: calc(5rem/16);
}

.hamburger-menu a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: calc(20rem/16);
    padding-top: calc(16rem/16);
    padding-bottom: calc(11rem/16);
    color: #FFFFFF;
    font-size: calc(17rem/16);
    font-family: 'Allstate Sans', sans-serif;
    text-decoration: none;
    border-top: solid 1px #191938;
}

.hamburger-menu a:nth-child(4) {
    text-decoration: underline;
}

.hamburger-active {
    display: block;
}

.hamburger-button-active:focus {
    outline: none;
}

.hamburger-button-active span:nth-child(1), .hamburger-button-active span:nth-child(4) {
    top: calc(9rem/16);
    width: 0%;
    left: 50%;
}

.hamburger-button-active span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hamburger-button-active span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger-signup-button {
    border: 1px solid #FFFFFF;
    background: transparent;
    width: calc(278rem/16);
    text-align: center;
    color: #FFFFFF;
    padding: calc(10rem/16) 0;
    border-radius: calc(16rem/16);
}

.hamburger-signup-button:hover {
    cursor: pointer;
}

@media only screen and (min-width: 1201px) {
    .hamburger {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .banner-links-container {
        display: none;
    }

    .hamburger-menu{
        top: calc(72rem/16);
    }
}

@media screen and (max-width: 440px)  {
    .banner-container{
        height: 54px;
    }

    .input {
        width: calc(300rem/16);
    }

    .footer-container__disclaimer {
        text-align: start;
        font-size: calc(7.5rem/16);
        display: flex;
        justify-content: start;
        flex-direction: column;
        align-content: center;
        background-color: #f3f6f9;
        padding: calc(8rem/16) calc(18rem/16);
    }

    .input-label-container {
        font-size: calc(13rem/16);
    }

    .footer-container__good-hands-container__text {
        font-size: calc(18rem/16);
        line-height: 1.08;
        letter-spacing: -0.56px;
        margin-top: calc(15rem/16);
        margin-left: calc(18rem/16);
        width: calc(119.1rem/16);
        text-align: left;
        display: block;
    }

    .footer-container__good-hands-container__text--blue {
        font-size: calc(18rem/16);
        letter-spacing: -0.56px;
        line-height: 1.08;
        display: block;
    }

    .contact-us-button {
        margin-top: calc(50rem/16);
    }

    .login-container {
        margin-bottom: calc(250rem/16);
    }

    .hamburger{
        padding-right: calc(25.5rem/16);
    }
}

@media screen and (max-width: 600px) {
    .footer__bottom-line {
        flex-direction: column;
        align-items: center;
    }

    .footer__bottom-line__buttons {
        align-items: center;
        flex-direction: column;
        font-size: calc(9rem/16);
    }

    .footer__bottom-line__button {
        margin-top: calc(10rem/16);
        margin-left: 0;
    }

    .footer__bottom-line__copyright {
        font-size: calc(9rem/16);
    }

    .hamburger-menu a{
        font-size: calc(12rem/16);
    }

    .banner__logo-title-container__title{
        font-size: calc(15rem/16);
    }

    .banner__logo-title-container__logo{
        width: calc(54rem/16);
    }

    .banner__logo-title-container__logo__image{
        width: calc(45rem/16);
        height: calc(36rem/16);
    }

    .hamburger-menu{
        top: calc(45rem/16);
        width: calc(100% - 3.4rem);
    }
}