﻿/* BEGIN image link carousel */
#buildingCarousel .link-container img {
    padding: 0 .5em;
}

#buildingCarousel .link-img {
    position: relative;
    overflow: hidden;
}

    #buildingCarousel .link-img img {
        display: block;
        width: 100%;
        height: auto;
    }


#buildingCarousel .overlay {
    position: absolute;
    top: 0;
    left: 0.5em;
    right: 0;
    bottom: 0;
    width: calc(100% - 1em);
    height: 100%;
    background-color: rgba(33, 59, 52, 0.8);
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity;
    z-index: 2;
    pointer-events: none; /* Prevents hover from blocking link */
}

#buildingCarousel .link-img:hover .overlay {
    opacity: 1;
}

#buildingCarousel .over-text {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    color: white;
    text-align: center;
    z-index: 3;
}

#buildingCarousel .link-img:hover .over-text {
    opacity: 1;
}

.img-caption {
    padding-top: .35em;
}

#buildingCarousel .link-title {
    text-align: center;
    font-weight: 300 !important;
}

#buildingCarousel .carousel-control-next {
    margin-right: -3em;
}

#buildingCarousel .carousel-control-prev {
    margin-left: -7em;
}

    #buildingCarousel .carousel-control-next i,
    #buildingCarousel .carousel-control-prev i {
        font-size: 1.3em;
        color: #006325;
        background: #ffffff;
        padding: 0.3em 0.5em;
        border-radius: 50%;
        opacity: 0.5;
    }

    #buildingCarousel .carousel-control-next:hover i,
    #buildingCarousel .carousel-control-prev:hover i {
        opacity: 1;
    }

@media (max-width: 767px) {
    #buildingCarousel .carousel-inner .carousel-item > div {
        display: none;
    }

        #buildingCarousel .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

#buildingCarousel .carousel-inner .carousel-item.active,
#buildingCarousel .carousel-inner .carousel-item-next,
#buildingCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    #buildingCarousel .carousel-inner .carousel-item-end.active,
    #buildingCarousel .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    #buildingCarousel .carousel-inner .carousel-item-start.active,
    #buildingCarousel .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

#buildingCarousel .carousel-inner .carousel-item-end,
#buildingCarousel .carousel-inner .carousel-item-start {
    transform: translateX(0);
}
/* END image link carousel */
