.edubin-filter-course, .edubin-gallery-filter-control {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 45px;
flex-wrap: wrap;
}
.edubin-filter-course .filter-item, .edubin-gallery-filter-control button {
cursor: pointer;
text-align: center;
font-size: 16px;
font-weight: var(--edubin-p-medium);
text-transform: capitalize;
background-color: transparent;
color: var(--edubin-color-body);
padding: 9px 18px;
border: none;
margin: 0px;
-webkit-transition: var(--edubin-transition);
transition: var(--edubin-transition);
position: relative;
z-index: 1;
line-height: 1;
}
.edubin-filter-course .filter-item.current {
padding: 9px 18px;
border-radius: 100px;
background: #eee;
}
.edubin-filter-course .filter-item:hover:after, .edubin-filter-course .filter-item.current:after, .edubin-gallery-filter-control button:hover:after, .edubin-gallery-filter-control button.current:after {
width: 100%;
visibility: visible;
opacity: 1;
}
.edubin-gallery-items-wrapper {
margin: 0 -15px -30px;
display: flex;
flex-wrap: wrap;
}
.edubin-gallery-filter-single-item {
margin-bottom: 30px;
}
.edu-gallery-grid {
position: relative;
}
.edu-gallery-grid .inner::before {
background: -webkit-linear-gradient(235deg, var(--edubin-primary-color-alt) 0%, var(--edubin-primary-color) 100%);
background: linear-gradient(235deg, var(--edubin-primary-color-alt) 0%, var(--edubin-primary-color) 100%);
border-radius: 5px;
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.edu-gallery-grid img {
border-radius: 5px;
width: 100%;
}
.edu-gallery-grid .zoom-icon {
opacity: 0;
position: absolute;
top: 55%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.3s;
transition: 0.3s;
height: 70px;
width: 70px;
line-height: 70px;
background-color: var(--edubin-color-white);
border-radius: 50%;
text-align: center;
font-size: 20px;
color: var(--edubin-primary-color);
cursor: pointer;
}
.edu-gallery-grid:hover .inner:before {
opacity: .9;
}
.edu-gallery-grid:hover .zoom-icon {
top: 50%;
opacity: 1;
}