:root {
    --main-color: #424242;
    --sub-color: #28a745;
    --erro-color: #dc3545;
    --success-color: #28a745;
    --nav-border-color: rgba(0,0,0,0);
    --white-color: white;
}

nav{
    background-color: var(--main-color);
    border-bottom: 2px solid var(--nav-border-color);
}
/*SHORTCUTS*/
.text-main-color{
    color: var(--main-color);
}

.btn-main-color{
    color: var(--white-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-main-color:hover{
    color: var(--main-color);
    background-color: var(--white-color);
}

.btn-outline-main-color{
    color: var(--main-color);
    border:1px solid var(--main-color);
}

.btn-outline-main-color:hover{
    color: var(--white-color);
    background-color: var(--main-color);
}

/*HOME*/
#home div{
    margin-top: 2rem;
}

#imag {
    margin-top: -1rem;
}

body > main > .container{
    margin-top: 1rem;
}

.error{
    border: 2px solid var(--erro-color);
}

.valid{
    border: 2px solid var(--success-color);
}

.input-group-text{
    width: 150px;
}

#form_contato .input-group-text{
    width: 120px;
}

.full-width-image {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50.52vw;
}

.full-width-image img {
    width: 100%;
}

#categoria .col-md-4{
    margin-top: 2rem;
}

#categoria .col-md-4 .card{
    min-height: 200px;
}

#categoria .col-md-4 .card .card-block{
    padding: 1rem;
}

#categoria .col-md-4 .card .card-block .fimLote{
    text-decoration: line-through;
    color: lightgray;
}

#categoria a, #pagamento a{
    text-decoration: none;
    color: black;
}

#categoria .col-md-4 .card:hover, #pagamento .col-md-6 .card:hover{
    box-shadow: 10px 10px 5px lightgray;
    transition: box-shadow 1s;
    border-color: var(--sub-color);
}


#categoria .col-md-4 .card:hover hr, #pagamento .col-md-6 .card:hover hr{
    border-top: 1px solid var(--sub-color);
}

#categoria .unshow, #pagamento .unshow{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s linear;
    color: var(--sub-color);
}

#categoria .col-md-4 .card:hover .unshow, #pagamento .col-md-6 .card:hover .unshow{
    visibility: visible;
    opacity: 1;
}

#pagamento .col-md-6 .card{
    height: 15rem;
}

#pagamento .col-md-6 .card .card-block{
    padding: 1rem;
}

#inscricao .col-md-12{
    margin-top: 1rem;
}