.property-slideshow-container {
    position: relative;
    width: 616px;
    height: 556px;
    max-width: 100%;
    overflow: hidden;
    margin: auto;
}

    /* Hide radio buttons */
    .property-slideshow-container input {
        display: none;
    }

/* Slides wrapper */
.property-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* Individual slides */
.property-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: contain; /*set to contain to fit images into slides correctly*/
}

/* =========================
   SLIDE MOVEMENT
   ========================= */

.slide1:checked ~ .property-slides {
    transform: translateX(0%);
}

.slide2:checked ~ .property-slides {
    transform: translateX(-100%);
}

.slide3:checked ~ .property-slides {
    transform: translateX(-200%);
}

.slide4:checked ~ .property-slides {
    transform: translateX(-300%);
}

.slide5:checked ~ .property-slides {
    transform: translateX(-400%);
}

.slide6:checked ~ .property-slides {
    transform: translateX(-500%);
}

.slide7:checked ~ .property-slides {
    transform: translateX(-600%);
}
.slide8:checked ~ .property-slides {
    transform: translateX(-700%);
}
.slide9:checked ~ .property-slides {
    transform: translateX(-800%);
}
.slide10:checked ~ .property-slides {
    transform: translateX(-900%);
}

/* Navigation dots */
.property-navigation {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
}

    .property-navigation label {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 0 5px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        border: 2px solid #004970;
        cursor: pointer;
        transition: all 0.25s ease;
    }

        .property-navigation label:hover {
            background: rgba(255,255,255,0.8);
        }

/* ACTIVE DOTS */

.slide1:checked ~ .property-navigation label:nth-child(1),
.slide2:checked ~ .property-navigation label:nth-child(2),
.slide3:checked ~ .property-navigation label:nth-child(3),
.slide4:checked ~ .property-navigation label:nth-child(4),
.slide5:checked ~ .property-navigation label:nth-child(5),
.slide6:checked ~ .property-navigation label:nth-child(6),
.slide7:checked ~ .property-navigation label:nth-child(7),
.slide8:checked ~ .property-navigation label:nth-child(8),
.slide9:checked ~ .property-navigation label:nth-child(9),
.slide10:checked ~ .property-navigation label:nth-child(10){
    background: white;
    transform: scale(1.3);
    border-color: #000;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 800px) {

    .property-slideshow-container {
        width: 100%;
        height: auto;
        aspect-ratio: 616 / 556;
    }

    .property-slide {
        width: 100%;
        height: 100%;
        object-fit: fill; /*fills nicer on mobile view - change back to contain if issues with sizing*/
        background: #000;
    }
}

.blue-divider {
    width: 100%;
    height: 16px;
    background-color: #004970;
    margin: 15px 0 10px 0;
}

/* Better hidden radios */
.property-slideshow-container input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* =========================
   ARROWS
   ========================= */

.property-arrows .arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: white;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.25s ease;
    user-select: none;
}

    .property-arrows .arrow:hover {
        background: rgba(0,0,0,0.7);
    }

.property-arrows .prev {
    left: 12px;
}

.property-arrows .next {
    right: 12px;
}

/* SHOW ACTIVE ARROWS */

.slide1:checked ~ .property-arrows .arrow1,
.slide2:checked ~ .property-arrows .arrow2,
.slide3:checked ~ .property-arrows .arrow3,
.slide4:checked ~ .property-arrows .arrow4,
.slide5:checked ~ .property-arrows .arrow5,
.slide6:checked ~ .property-arrows .arrow6,
.slide7:checked ~ .property-arrows .arrow7,
.slide8:checked ~ .property-arrows .arrow8,
.slide9:checked ~ .property-arrows .arrow9,
.slide10:checked ~ .property-arrows .arrow10 {
    display: block;
}