body {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.head-pri {
    letter-spacing: 1px;
    font-size: 24px;
    font-weight: bold;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    color: #b02a2b;
}

.head-sec {
    letter-spacing: 1px;
    font-size: 20px;
    font-weight: bold;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
}

.form-check {
    text-align: center;
}

.radio-btn {
    position: relative;
}

.form-border {
    padding: 20px;
    border: 1px solid lightgrey;
    border-radius: 20px;
}

.back-btn {
    top: 15px;
    font-size: 24px;
    color: orangered;
}

.back-btn:hover {
    text-decoration: none;
    color: orangered;
    text-shadow: 5px 5px 5px lightsalmon;
}

.titlemodal {
    color: green;
}

.textmodal {
    font-weight: bold;
}

.heffect {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.case {
    border: 2px solid black;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}

.heffect:hover {
    box-shadow: 0 4px 8px 0 rgb(109, 102, 100), 0 6px 20px 0 rgba(109, 102, 100);
    position: relative;
    bottom: 10px;
    text-decoration: none;
}

.cardtext {
    color: rgb(0, 0, 0);
    font-weight: bold;
}

.newcardtxt {
    color: rgba(0, 0, 0, 0.678);
}

.hr-line {
    border: none;
    height: 1px;
    width: 65%;
    background: #333;
    margin-bottom: 3%;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}

#loginpanel {
    position: relative;
    top: 105px;
    /* border: 1px solid black; */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 20px;
    /* border-radius: 10px; */
}

.footercontent {
    padding-top: 5%;
    color: white;
}

.footerhead {
    font-weight: bold;
    font-size: 36px;
}

.footertext {
    font-size: 16px;
    color: white;
    transition: 0.4s;
}

a.footertext:hover {
    color: #b02a2b;
    text-decoration: none;
}

.filteropt {
    padding: 0;
    font-size: 16px;
}

@media screen and (max-width: 576px) {
    .head-pri {
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: bold;
    }
    .head-sec {
        letter-spacing: 1px;
        font-size: 16px;
        font-weight: bold;
    }
    .back-btn {
        font-size: 15px;
        font-weight: bold;
    }
    .footerhead {
        font-size: 15px;
    }
    .footercontent {
        padding-top: 15%;
        color: white;
    }
    .filteropt {
        margin-top: 10px;
        font-size: 14px;
    }
}

@media screen and (max-width: 330px) {
    .head-pri {
        letter-spacing: 1px;
        font-size: 14px;
        font-weight: bold;
    }
    .head-sec {
        letter-spacing: 1px;
        font-size: 14px;
        font-weight: bold;
    }
    .back-btn {
        font-size: 14px;
        font-weight: bold;
    }
    .footerhead {
        font-size: 13px;
    }
    .footercontent {
        padding-top: 14%;
        color: white;
    }
    .filteropt {
        margin-top: 10px;
        font-size: 11px;
    }
    .footertext {
        font-weight: bold;
        font-size: 14px;
    }
}