@charset "utf-8";

.project-holder {position: relative;}
.project-holder__overlay {opacity: 0;transition: 0.35s;position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: #000;}
.btn-view {
	opacity: 0;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.35s;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 0.35em 1em;
    font-size: 2em;
    cursor: pointer;
}
.project-holder:hover {
	.project-holder__overlay {opacity: 0.5;}
	.btn-view {opacity: 1;}
}

.project-modal {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.35s;
}

.project-modal.active {
	opacity: 1;
	visibility: visible;
}

.project-modal .swiper-container {max-width: 1920px;width: 100%;}
.project-modal .swiper-container .img-fluid {display: block;max-height: 100vh;margin: 0 auto;}
.project-modal .swiper-wrapper {align-items: center;}
.project-modal__btn-close {position: absolute;z-index: 10;top: 24px;right: 24px;width: 30px;height: 30px;background: none;border: 0;padding: 0;cursor: pointer;}
.project-modal__btn-close::before,
.project-modal__btn-close::after {content: '';position: absolute;top: 0;width: 1px;height: 100%;background: #dfdfdf;}
.project-modal__btn-close::before {transform: rotate(45deg);}
.project-modal__btn-close::after {transform: rotate(-45deg);}

.video-modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.35s;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal__btn-close {position: absolute;z-index: 10;top: 24px;right: 24px;width: 30px;height: 30px;background: none;border: 0;padding: 0;cursor: pointer;}
.video-modal__btn-close::before,
.video-modal__btn-close::after {content: '';position: absolute;top: 0;width: 1px;height: 100%;background: #dfdfdf;}
.video-modal__btn-close::before {transform: rotate(45deg);}
.video-modal__btn-close::after {transform: rotate(-45deg);}

.details-left span {font-size: 0.65em;}