.filter-portfolio {
margin-top: 20px;
}
.employe-card {
position: relative;
opacity: 0;
animation: fadeIn 2s forwards;
overflow: hidden;
}
.portfolio-filter { }
.employe-card .employe-info{
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: none;
}
.employe-card:hover .employe-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255, 0.9);
animation: fadeInFromBottom 1s forwards;
text-align: center;
}
.flex-center {
display: flex;
align-items: center;
justify-content: space-around;
}
@keyframes fadeIn {
from {
opacity: 0;
scale: 0.5;
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes fadeInFromBottom {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInFromTop {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(100%);
}
}
#grid-employees {
display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }
.employe-card-title {
font-weight: bold;
}
.employe-card-job {
font-weight: bold;
color: #ee7203;
}
.loader {
border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.flex-center-portfolio-loader 
{
width: 100%;
display: flex;
padding: 25px;
justify-content: center;
}