@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap');

.c-primary{color: #d53f3f !important;}
.c-white{color: #fff !important;}

.no-wrap{flex-wrap: nowrap;}

html, body{
    font-family: 'Fira Sans', sans-serif;
}

.bg-gray{
    background-color: #ecedee !important;
}

.form-group{
    margin-bottom: 1.5rem;
}


h1, .h1{
    font-size: 2.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

#app-index{
    position: fixed;
    top: 0;
}

#modal-login, #app-header{z-index: 1;}
#app-header, .navbar-c {position: relative;}
#app-header .logo {display: block !important;margin-right: auto;}

.home-container{
    position: relative;
}

.home-container .login-container, .home-container .container{
    top: 0;
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100% !important;
    min-height: 100vh;
    padding: 20px 0;
}

.home-container .login-container #modal-login{
    min-width: 30%;
}

.home-container .container .row{width: 80%;}

.bg-filter-grayscale{
    backdrop-filter:grayscale(100%);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.bg-filter-primary{
    background-color: rgba(218, 0, 0, 0.7);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    mix-blend-mode: darken;
}
    

.menu-card{
    background: var(--img) no-repeat center center / cover;
    display: block;
    position: relative;
    min-height: 290px;
    margin-bottom: 30px;
    text-align: center;
    transition: 0.35s;
}
.menu-card a{
    padding: 1rem;
    display: flex;
    min-height: inherit;
    color: #fff;
    font-size: 2.5rem;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-transform: uppercase;
    filter: grayscale(100%);

}
.menu-card:hover {
    filter: grayscale(100%);

}

.circle-border{
    border-radius: 50%;
    border: 1px solid #000;
    width: 100px;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: auto;
    background: #fff;
}
.circle-border.large{
    width: 350px;
}

.box-shadow-card{
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.226) !important;
    transition: 0.35s;
}
.box-shadow-card:hover{background: #eee;}

#accordion .btn-link{text-decoration: none !important;color:#fff !important;font-size: 1.25rem;font-weight: 900;letter-spacing: 1px;}
#accordion .btn-link:focus{
    box-shadow: none !important;
}

#accordion .card{background-color: #222;transition: 0.25s;}
#accordion .btn-link:hover, #accordion .btn-link:not(.collapsed){background-color: #d53f3f;}

.footer {margin-bottom: 0 !important;}
footer *{color:#fff !important}
footer a:hover{opacity: 0.5;}


@media only screen and (max-width: 40em) { 

    html, body{font-size: 12px;}

    .home-container .container .row {
        width: 95%;
    }

}