iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    visibility: hidden;
}

.View3D {
    position: absolute;
    width: 10vw;
    height: 5vw;
    top: 2vw;
    left: 2vw;
    font-size: 2vw;
    background-color: white;
    z-index: 1;
    border-radius: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif;
    cursor: pointer;
}


#PoolPin {
    position: absolute;
    width: 12vw;
    height: 5vw;
    top: 14vw;
    left: 63%;
}

#PoolPin .PinText {
    margin-top: 0.25vw;
}

#BarPin {
    position: absolute;
    width: 12vw;
    height: 5vw;
    top: 42vw;
    left: 72%;
}

#BarPin .PinText {
    margin-top: 0.25vw;
}

#TheCavePin {
    position: absolute;
    width: 22vw;
    height: 6vw;
    top: 54vw;
    left: 68%;
}

#KitchenPin {
    position: absolute;
    width: 17vw;
    height: 6vw;
    top: 91vw;
    left: 39%;
}

#SpotPin {
    position: absolute;
    width: 20vw;
    height: 6vw;
    top: 55vw;
    left: .5%;
}

#SpotPin .PinText {
    margin-top: 0.6vw;
}

#SpotPin .PinTriangle{
    left: 22%;
}

#SpotPin .PinTriangleEdge{
    left: 22%;
}

#ProjectorPin {
    position: absolute;
    width: 23vw;
    height: 6vw;
    top: 0.2vw;
    left: 51%;
}

.PinContainer {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: transform 0.4s, background-color 0.4s;
    cursor: pointer;
}

.PinRectangle {
    width: 90%;
    height: 70%;
    background-color: #252525;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 1.5vw;
    border: #ffffff 0.2vh solid;
}

.PinTriangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.5vh 1.875vh 0 1.875vh;
    border-color: #252525 transparent transparent transparent;
    position: absolute;
    bottom: 0.4vh;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
}

.PinTriangleEdge {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.5vh 1.875vh 0 1.875vh;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    bottom: 0vw;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.PinText {
    color: white;
    display: flex;
    position: relative;
    z-index: 5;
    font-size: 3vw;
    justify-content: center;
    align-items: center;
    margin-top: 0.5vh;
    font-family: "Staatliches", sans-serif;
}










    body {
      margin: 0;
      padding: 0;
      background-color: white;
    }

    .flex-image-container {
      display: flex;
        align-items: flex-start;
        width: 100%;
        height: 100vh;
        margin: 0;
    }

    .image-container {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 150%;
        overflow: hidden;
        margin: 0;
    }

    .fade-out {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30%;
      background: linear-gradient(transparent, white);
    }

    .image {
        object-fit: cover;
        transform: rotate(90deg);
        width: 200vw;
        height: auto;
        position: absolute;
        top: 0;
        left: -50%;
        content-visibility: auto;
    }

    @media (orientation: landscape) {
      .image {
        transform: none;
          width: 100vw;
          left: 0;
      }

        .image-container {
            padding-bottom: 56%;
        }

        #PoolPin {
            width: 11vw;
            height: 5.6vw;
            top: 11vw;
            left: 30%;
        }

        #BarPin {
            position: absolute;
            width: 12vw;
            height: 5vw;
            top: 13vw;
            left: 44%;
        }

        #TheCavePin {
            position: absolute;
            width: 18vw;
            height: 6vw;
            top: 5vw;
            left: 45%;
        }

        #KitchenPin {
            position: absolute;
            width: 14vw;
            height: 6vw;
            top: 22vw;
            left: 64%;
        }

        #SpotPin {
            position: absolute;
            width: 15vw;
            height: 6vw;
            top: 44vw;
            left: 46.5%;
        }

        #SpotPin .PinText {
            margin-top: 0.9vw;
        }

        #SpotPin .PinTriangle{
            left: 50%;
        }

        #SpotPin .PinTriangleEdge{
            left: 50%;
        }

        #ProjectorPin {
            position: absolute;
            width: 17VW;
            height: 6VW;
            top: 15.3vw;
            left: 16.5%;
}


        .PinContainer:hover {
          transform: scale(1.1);
            transform: translate(0, -0.2vw);
        }

        .PinContainer:hover .PinRectangle {
          background-color: white;
            border-color: #252525;
        }

        .PinContainer:hover .PinTriangleEdge {
            border-color: #252525 transparent transparent transparent;
        }

        .PinContainer:hover .PinTriangle {
            border-color: #ffffff transparent transparent transparent;
        }

        .PinContainer:hover .PinText {
          color: #252525;
        }

        #ProjectorPin .PinText {
          font-size: 2.2vw;
            margin-top: 1vw;
        }

        #ProjectorPin .PinTriangle {
            bottom: 0.75vh;
        }

        #ProjectorPin .PinTriangleEdge {
            bottom: 0.45vh;
        }

        #BarPin .PinText{
            margin-top: 0.55vw;
        }

        #PoolPin .PinText{
            margin-top: 0.75vw;
        }

        #TheCavePin .PinText{
            margin-top: 1vw;
        }

        #KitchenPin .PinText{
            margin-top: 1vw;
        }

        .PinText {
          font-size: 2.2vw;
            margin-top: 1.55vw;
        }

        .PinTriangle {
            bottom: 0.75vh;
        }

        .PinTriangleEdge {
            bottom: 0.35vh;
        }
    }



@media (min-width: 850px) and (orientation: landscape){
    .PinTriangle {
        bottom: 1vh;
    }
    .PinTriangleEdge{
        bottom: 0.6vh;
    }
}

/*when landscape and min width 1140px*/
@media (min-width: 1040px) and (orientation: landscape){
    .PinTriangle {
        bottom: 2vh;
    }
    .PinTriangleEdge{
        bottom: 1.6vh;
    }

    #ProjectorPin .PinTriangle {
        bottom: 1.75vh;
    }
    #ProjectorPin .PinTriangleEdge {
        bottom: 1.35vh;
    }
}