/*****************
    COLORS:
        bg-light: #EDF2F2
        bg-blue: #D6EAEA
        primary-color: #FF0000
        primary-hover: #BB0000
        text-primary: #323635
        text-secondary: #929191
******************/

@font-face {
    font-family: Roboto;
    src: url(../font/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(../font/Roboto-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Roboto;
    src: url(../font/Roboto-Bold.ttf);
    font-weight: 700;
}

/** {
    outline: solid 1px red;
}*/

html {
    height: 100%;
    font-size: 16px;
    color: #323635;
}

h1, h2, h3, h4, h5 {
    font-family: Roboto, 'Times New Roman', Arial, sans-serif;
}

h1 {
    font-size: 28px;
    font-weight: 700;
}

a {
    color: #323635;
}

    a:hover {
        color: #323635;
        text-decoration: none;
    }

h2 {
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
}

.h5 {
    font-size: 20px;
}

body {
    font-family: Roboto, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #EDF2F2;
    background-image: url('../images/splashBackground.jpg');
    background-size: auto 50vh;
    background-repeat: repeat-x;
    background-position: top center;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
}

footer {
    min-height: 36px;
    line-height: 36px;
    font-size: 14px;
    width: 100%;
}

.content {
    background-color: #FFFFFF;
    border-radius: 40px;
    box-shadow: #0000001A 0 3px 6px;
    padding: 20px;
}

.splash-input {
    background-color: #EDF2F2;
    border-radius: 40px;
    padding: 8px 16px;
    border: 2px solid #D6EAEA;
    font-size: 16px;
    font-weight: normal;
    color: #323635;
}

.splash-logo {
    max-width: 150px;
    height: auto;
}

.redDivider {
    opacity: 100;
    border-top: #FF0000 3px solid;
    width: 25%;
    max-width: 150px;
}

.btn-primary {
    color: #FFFFFF;
    font-weight: 700;
    background-color: #FF0000;
    border-color: #FF0000;
    border-radius: 40px;
    padding: 10px 50px;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible {
        color: #FFFFFF;
        background-color: #BB0000 !important;
        border-color: #BB0000 !important;
    }

.btn-rounded {
    border-radius: 40px;
}

.btn-dropshadow {
    box-shadow: 0px 3px 6px #0000001A;
}

.btn-language {
    font-weight: 400;
    color: #323635;
}

    .btn-language:active, .btn-language:hover {
        font-weight: 700;
    }

.btn {
    border: none;
}

.btn-check:checked + .btn {
    font-weight: 700;
    color: #323635;
    border: none;
}



@media only screen and (max-width: 750px) {
    main {
        align-items: flex-end;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 16px;
    }

    .h5 {
        font-size: 16px;
        font-weight: 400;
    }

    .splash-logo {
        max-width: 100px;
    }

    .btn-mobile-full {
        width: 100%;
    }

    .findParkingMessage {
        font-size: 16px;
    }
}