.dl-project-box {overflow: hidden;position: relative;transition: all 0.2s ease-in-out;}.dl-project-box .overlay {background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, rgb(6, 27, 73) 100%);background-repeat: no-repeat;background-size: cover;background-position: center;width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: all 0.2s ease-in-out;visibility: hidden;opacity: 0;transform: translateY(50%);}.dl-project-box:hover .overlay {visibility: visible;opacity: 1;transform: translateY(0);}.dl-project-box .project-thumb {position: relative;transition: all 0.2s ease-in-out;}.dl-project-box .project-thumb img {width: 100%;}.dl-project-box .project-lightbox {background-color: rgba(255, 255, 255, 0.3);width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;position: absolute;right: -100%;top: 20px;color: #fff;border-radius: 50%;transition: all 600ms ease;opacity: 0;visibility: hidden;}.dl-project-box .project-lightbox svg{fill: currentColor;width: auto;height: 20px;}.dl-project-box .project-lightbox:hover {background-color: rgba(255, 255, 255, 0.35);}.dl-project-box:hover .project-lightbox {right: 20px;opacity: 1;visibility: visible;transition: all 400ms ease;}.dl-project-box .project-content {position: absolute;width: 100%;height: auto;left: 0;bottom: 0;padding: 35px;transition: all 0.2s ease-in-out;z-index: 1;}.dl-project-box:hover .project-thumb {transform: scale(1.05);}.dl-project-box .project-content h3 {font-size: 24px;font-weight: 600;line-height: 32px;}.dl-project-box .project-content h3 a {color: #fff;text-decoration: none;}.dl-project-box .project-content h3 a:hover {color: #fff;text-decoration: none;}.dl-project-box .project-content span {background-color: transparent;padding: 5px 10px;text-transform: uppercase;font-size: 10px;font-weight: 700;color: #fff;letter-spacing: 1px;margin-bottom: 10px;display: inline-block;}.dl-filter-wrap {margin: 0 0 40px;display: block;}.dl-filter-wrap .dl-project-filter {list-style: none;display: inline-block;padding: 0;}.dl-filter-wrap .dl-project-filter li {display: inline-block;margin-right: 10px;font-size: 13px;font-family: "Work Sans", sans-serif;color: #333;font-weight: 700;cursor: pointer;transition: all 0.3s ease-in-out;}.dl-filter-wrap.center .dl-project-filter li {margin: 0 5px;}.dl-filter-wrap.left .dl-project-filter li {margin-left: 10px;}.dl-filter-wrap .dl-project-filter li:hover, .dl-filter-wrap .dl-project-filter li.active {color: #000000;transition: all 0.3s ease-in-out;}