.demo {
width: 100px;
height: 102px;
border-radius: 100%;
position: absolute;
top: calc(50vh - 50px);
left: calc(50% - 50px);
}

.circle {
width: 100%;
height: 100%;
position: absolute;
}

.circle .inner {
width: 100%;
height: 100%;
border-radius: 100%;
border: 5px solid rgba(255, 255, 255, 0.7);
border-right: none;
border-top: none;
background-clip: padding;
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.15);
}

@keyframes spin {
from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}
}

.circle:nth-of-type(0) {
transform: rotate(0deg);
}

.circle:nth-of-type(0) .inner {
animation: spin 2s infinite linear;
}

.circle:nth-of-type(1) {
transform: rotate(70deg);
}

.circle:nth-of-type(1) .inner {
animation: spin 2s infinite linear;
}

.circle:nth-of-type(2) {
transform: rotate(140deg);
}

.circle:nth-of-type(2) .inner {
animation: spin 2s infinite linear;
}

.demo {
animation: spin 5s infinite linear;
}
/******** Content ********/
#content .context .travel-guide {
    text-transform: uppercase;
    font-family: var(--fmo-b);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--greyish-brown);
}

/*------- Content -------*/
/******** Map ********/
#map {
    align-items: center;
    border: solid 1px #bababa;
    border-left: unset;
    border-right: unset;
}

#map .map-img {
    width: 50%;
    position: relative;
}

#map .map-img img {
    width: 100%;
}

#map .wrap-info {
    width: 50%;
}

#map .wrap-info {
    padding-left: var(--widthSpace-2);
    padding-right: calc(20vw + 10px);
}

.wrap-info {
    position: relative;
}

/* .wrap-info::before {
    content: '';
    width: 5%;
    transform: translateX(-50%);
    border-bottom: solid 1px var(--primary-color);
    position: absolute;
    left: 0;
    top: 13%;
    opacity: 0;
    transition: .7s ease-in-out;
}*/

.wrap-info .line-out::before {
    width: calc(60% - 20px) !important;
} 

#map .wrap-info h3 {
    padding-bottom: var(--heightSpace-2);
    margin-bottom: 0;
    letter-spacing: 1px;
}

#map .wrap-info p {
    letter-spacing: 1px;
}

#map .wrap-info p+p {
    text-transform: lowercase;
    font-family: var(--fmo-b);
}

#map .wrap-info .grid div:last-child p {
    margin-bottom: 0;
}

#map .gg-map-img {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 15%;
}

#map .gg-map-img img {
    width: 100%;
}

/*------- Map -------*/
/******** Stay Connected ********/
#stay-connect {
    padding: 5rem calc(20vw + 10px) 1rem;
    /* padding-left: calc(20vw); */
    /* padding-right: calc(20vw); */
}

#stay-connect p:first-child {
    text-transform: uppercase;
    font-size: var(--fontsize-ParagraphTitle);
}

#stay-connect p:last-child a {
    font-weight: bold;
    color: var(--primary-color);
}

#stay-connect p:last-child a:hover {
    color: var(--color-hover-button);
}

/*------- Stay Connected -------*/
/******** Insta Feed ********/
.insta-gallery-list,
.insta-gallery-item {
    padding: 7px !important;
}
/*------- Insta Feed -------*/


@media only screen and (max-width: 992px) {

    #map .map-img,
    #map .wrap-info {
        width: 100%;
    }

    #map .wrap-info {
        padding: 0;
        padding-left: calc(var(--widthSpace-1) - 1vw);
        padding-right: calc(var(--widthSpace-1) - 1vw);
        margin: var(--heightSpace-2) 0;

    }

    #map .map-img>img {
        padding-right: 65px;
        object-fit: cover;
        object-position: right;
    }

    #stay-connect {
        padding: 5rem 0 1rem 15vw;
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
    #map .map-img {
        width: 50%;
        align-self: stretch;
    }

    #map .wrap-info {
        width: 50%;
        padding-left: var(--widthSpace-2);
        padding-right: 20px;
    }

    #map .map-img img {
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

    #stay-connect {
        padding: 5rem 15px 1rem 15px;
        padding-right: 20px;
        padding-left: 20px;
    }
    
    .gallery__row {
        justify-content: space-around !important;
    }
    .gallery__row__img  {
        width: 48% !important;
    }
}

@media only screen and (max-width: 1412px) and (min-width: 903px) {
    .gallery__row__img {
        width: 18% !important;
    }
}
@media only screen and (max-width: 1144px) and (min-width: 993px) {
    #map .wrap-info {
        padding-left: var(--widthSpace-2);
        padding-right: var(--widthSpace-3);
    }
}