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

html,
body {
    font-family: OpenSans;
    font-size: 14px;
}

.imageBox {
    background: rgb(61 102 167);
    color: white;
}

.taglineBox {
    background: hsla(217, 46%, 45%, 1);
    background: linear-gradient(315deg, hsla(217, 46%, 45%, 1) 34%, hsla(217, 75%, 59%, 1) 100%);   
    background: -moz-linear-gradient(315deg, hsla(217, 46%, 45%, 1) 34%, hsla(217, 75%, 59%, 1) 100%);
    background: -webkit-linear-gradient(315deg, hsla(217, 46%, 45%, 1) 34%, hsla(217, 75%, 59%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#3D66A7", endColorstr="#4884E5", GradientType=1 );
}

.spotlightTextSize {
    font-size: 14px;
}

.fg-black {
    color: #000000;
}

.primaryColor1 {
    color: rgb(51, 122, 183);
}

.primaryColor2 {
    color: rgb(33, 88, 135);
}

.hightlight1 {
    color: rgb(144, 12, 63);
}

.overlap {
    margin-top: -100px;
}


.spotlight {
    min-height: 100px;
}

.goldBorder {
    border: 3px;
    border-color: rgb(217, 186, 11);
    border-style: solid;
}

.goldIcons {
    color: rgb(217, 186, 11);
}

.goldBackground {
    background: linear-gradient(90deg, #ccc6ad, #ccc6ab, #ccc5a8, #cdc5a6, #cdc4a4, #cdc4a2, #cec39f, #cec39d);
}

.spotlight-background {
    background: linear-gradient(90deg, #cec2c2, #d3c8c8, #d7cece, #dcd5d5, #e0dbdb, #e5e1e1, #e9e8e8, #eeeeee);
}

.navyBorder {
    border-width: 7px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(60, 141, 188);
}

.loginBoxBorder {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(92, 172, 218);
}


.rounded-box {
    border-radius: 10px;
}

#bodyContent {
    padding: 30px;
}

.openpageBackground {
    background-color: rgb(61, 49, 44);
    /* background-color: #659DBD; */
}


.websiteBackground {
    background-color: rgb(147, 140, 141);
    /* background-color: #659DBD; */
}

.WhiteBackground {
    background-color: rgb(255, 255, 255);
}

.employeeTextColor {
    color:rgb(212, 172, 13);
}

.employeeBtnColor {
    background-color:rgb(212, 172, 13);
}

.trim {
    padding: 0px;
    margin: 0px;
}

.trim-h {
    padding-left: 0px;
    padding-right: 0px;
}

.headerBackgroundColor {
    background: rgb(36, 85, 163);
    background: linear-gradient(130deg, rgba(36, 85, 163, 1) 23%, rgba(52, 151, 219, 1) 52%, rgba(52, 142, 219, 1) 58%, rgba(52, 131, 219, 1) 65%, rgba(40, 116, 166, 1) 74%);
}


.VITLogoStyle {
    font-family: Times;
}

.primaryTextColor1{
    color:rgb(23,108,184)
}

.spotlightHeader {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(108, 36, 5);
}

.center {
    margin: auto;
    width: 50%;
}

.greenText {
    color: #18ad4c;
}

.cardStudent {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(60, 141, 188);
}

.cardEmployee {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(212, 172, 13);
}

.cardParent {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: #18ad4c;
}

.cardAlumni {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-color: rgb( 93, 173, 226 );
}

@media (min-width: 768px) {

    .descriptionTextStyle {
        font-family: OpenSans;
        font-size: 18px;
    }


    .imgSize {
        width: 55px;
        height: 55px;
    }

    .VITEmblem {
        width: 40px;
        height: 40px;
    }


    .extramargin {
        height: 130px;
    }
}

@media (max-width: 576px) {

    .descriptionTextStyle {
        font-family: OpenSans;
        margin-bottom: 20px;
        font-size: 16px;
        color: white;
    }


    .imgSize {
        width: 40px;
        height: 40px;
    }


    .VITLogoStyle {
        font-family: Times;
        font-size: 23px;
    }

    .VITSubLogoStyle {
        font-family: Times;
        font-size: 14px;
        color: white;
    }

    .VITEmblem {
        width: 32px;
        height: 32px;
    }


    .extramargin {
        height: 90px;
    }
}


.footercolor {
    background: rgb(36, 85, 163);
    background: linear-gradient(130deg, rgba(36, 85, 163, 1) 23%, rgba(52, 151, 219, 1) 52%, rgba(52, 142, 219, 1) 58%, rgba(52, 131, 219, 1) 65%, rgba(40, 116, 166, 1) 74%);
}