.connected-content .image-column {
    position: relative;
}

.image-column img {
    border-radius: 25px;
}

.image-wrapper {
    position: relative;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.hotspot {
    width: 40px;
    height: 40px;
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--color-black);
    align-items: center;
    justify-content: center;
	animation: pulse 2s infinite;	
	text-align: center;
}

.hotspot svg{
    height: 26px;
    width: 26px;
}

.hotspot::before {
    content: attr(data-description);
    position: absolute;
    max-width: 450px;
    width: 300px;
	bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 1em 2em;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1; 
    opacity: 0;
    transition: all ease .3s;
}

.hotspot::after {
    content: '';
    position: absolute;
    top: -5px; 
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; 
    height: 10px; 
    background-color: var(--color-white);
    z-index: 0; 
    opacity: 0;
    transition: all ease .3s;
}

.hotspot:hover::before, .hotspot:hover::after {
    opacity: 1;
}

.connected-content ul{
	margin: 0;
}

.connected-content ul {
    list-style-type: none; 
    padding: 0; 
}

.connected-content ul li {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'><mask id='mask0' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'><rect width='30' height='30' fill='%23D9D9D9'/></mask><g mask='url(%23mask0)'><path d='M13.75 16.25H6.25V13.75H13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25Z' fill='%23EC8B33'/></g></svg>");
    background-repeat: no-repeat; 
    background-position: 0 0; 
    padding-left: 40px; 
    margin-bottom: 10px; 
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/*XS Devices 0 - 767px*/
@media only screen and (max-width: 47.9375em) {
    .connected-content .container-fluid .row+.row {
        margin-top: 3em;
    }

    .image-column{
        margin-bottom: 1em;
    }
}

/*Devices 768px in width*/
@media only screen and (min-width: 48em) {
    .connected-content .container-fluid .row+.row {
        margin-top: 3em;
    }
}

/*Devices 1024px in width*/
@media only screen and (min-width: 64em) {

    .connected-content .container-fluid .row+.row {
        margin-top: 7em;
    }

}

/*Devices 1200px+ in width*/
@media only screen and (min-width: 75em) {

    /*Image Offset's*/
    .reversed-order .row:nth-child(1) .image-column,
    .standard-order .row:nth-child(2) .image-column {
        left: -9em
    }

    .reversed-order .row:nth-child(2) .image-column,
    .standard-order .row:nth-child(1) .image-column,
    .reversed-order .row:nth-child(3) .image-column,
    .standard-order .row:nth-child(3) .image-column{
        right: -9em;
    }

    .connected-content .container-fluid .row:nth-child(2):before {
        content: '';
        width: 115%;
        height: 155%;
        display: block;
        position: absolute;
        border: 2px solid var(--color-orange);
        z-index: -1;
        left: -4em;
        top: -10em;
        border-radius: 25px;
    }

}


@media only screen and (min-width: 75em) and (max-width: 1600px){
    .reversed-order .row:nth-child(1) .image-column,
    .standard-order .row:nth-child(2) .image-column {
        left: -2em
    }

    .reversed-order .row:nth-child(2) .image-column,
    .standard-order .row:nth-child(1) .image-column,
    .reversed-order .row:nth-child(3) .image-column,
    .standard-order .row:nth-child(3) .image-column{
        right: -2em;
    }
}