/*Notice Card*/

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50% {
        transform: translateY(8%);
    }
    65% {
        transform: translateY(-4%);
    }
    80% {
        transform: translateY(4%);
    }
    95% {
        transform: translateY(-2%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        -webkit-transform: translateY(8%);
    }
    65% {
        -webkit-transform: translateY(-4%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    95% {
        -webkit-transform: translateY(-2%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}

.card.noticetitle {
    opacity: 1;
    border-radius: 15px;
    border: none;
    border: 4px solid #a02929;
    padding: 5px;
    width: 20%;
    margin: auto;
    color: #a02929;
    animation: slideDown 1s ease-in-out;
}

.card.notice {
    box-sizing: border-box;
    border-left: 30px solid #b7202e;
    border-top: none;
    border-bottom: none;
    border-right: none;
    padding: 5px 3px;
    width: 100%;
    position: relative;
    border-radius: 10px;
    margin: auto;
    animation: immersive 2s infinite linear;
}

@keyframes immersive {
    0% {
        box-shadow: 0px 0px 5px black;
    }
    40% {
        box-shadow: 0px 0px 13px black;
    }
    50% {
        box-shadow: 0px 0px 18px black;
    }
    60% {
        box-shadow: 0px 0px 13px black;
    }
    100% {
        box-shadow: 0px 0px 5px black;
    }
}

.card.notice .card-title {
    color: #b7202e;
    font-weight: 700;
    padding: 0px 10px;
    font-size: 1.3em;
    height: 20%;
    z-index: 1;
}
.forwhoom{
  color: #857a7a;
    font-weight: 400;
    padding: 0px 10px;
    font-size: 0.9em;
    margin-bottom: 3px;
    height: 20%;
    z-index: 1;
}

.card.notice .card-body {
    padding: 0 10px;
}

.date {
    position: relative;
    color: #b7202e;
    font-size: 0.8em;
    text-align: right;
    padding: 5px 10px;
}

@media (max-width: 1200px) {
    .card.notice {
        width: 50%;
    }
}

@media (max-width: 1000px) {
    .card.notice {
        width: 60%;
    }
}

@media (max-width: 900px) {
    .card.notice {
        width: 70%;
    }
}

@media (max-width: 700px) {
    .card.notice {
        width: 80%;
    }
}

@media (max-width: 992px) {
    .card.noticetitle {
        width: 30%;
    }
}

@media (max-width: 720px) {
    .card.noticetitle {
        width: 35%;
    }
}

@media (max-width: 520px) {
    .card.noticetitle {
        width: 40%;
    }
}

@media (max-width: 470px) {
    .card.noticetitle {
        width: 50%;
    }
}

@media (max-width: 380px) {
    .card.noticetitle {
        width: 60%;
    }
}