.container {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card {
    position: relative;
    /* margin-top: 30%; */
    text-align: center;
    transition: .3s;
    border-radius: 10px;
    cursor: pointer;
}

.card:hover {
    box-shadow: 0px 5px 15px #375977;
}

.card-img-top{
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.card-text {

}

.cardGra {
    margin-top: 6%;
}

.row {
    position: relative;
}

.rowGra {
    /* padding-top: 5%; */
    position: absolute;
    width: 100%;
    height: 90%;
    z-index: -10;
    /* background: rgb(255,255,255); */
    /* background: linear-gradient(135deg, rgba(255,255,255,1) 10%, rgba(55,89,119,1) 10%, rgba(55,89,119,1) 90%, rgba(255,255,255,1) 90%); */
    /* left: -100%; */
    background: rgb(255,255,255);
    background: linear-gradient(135deg, rgba(255,255,255,1) 10%, rgba(46,74,98,1) 10%, rgba(55,89,119,1) 24%, rgba(62,106,144,1) 50%, rgba(55,89,119,1) 79%, rgba(26,63,94,1) 90%, rgba(255,255,255,1) 90%);
    background-size: cover;
}

.cardGra:hover {
    box-shadow: 0px 5px 15px #d4ebff;
}

.animation-rowGra {
    animation: showGra .7s;
}

.row-middle {
    margin-top: 60px;
}

.text-adminitrators {
    text-align: center;
    font-size: 4rem;
    margin: 5% 0;
    font-weight: 700;
}

@keyframes showGra {
    0% {
        left: -100%;
    }
    10% {
        left: -90%;
    }
    20% {
        left: -80%;
    }
    30% {
        left: -70%;
    }
    40% {
        left: -60%;
    }
    50% {
        left: -50%;
    }
    60% {
        left: -40%;
    }
    70% {
        left: -30%;
    }
    80% {
        left: -20%;
    }
    90% {
        left: -10%;
    }
    100% {
        left: 5%;
    }
}

@media screen and (max-width: 767px) {
    .hidethis {
        display: none;
    }
    .rowGra {
        display: none;
    }
}