@media
{

    #dataBox
    {
        flex-direction: column;
        width: 30vw;
        max-height: 90vh;
        background: #fff;
        box-shadow: 
        0 0 1vw 0.2vw rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 5vh;
        left: 3vw;
        z-index: 4;
        transition: left 0.3s ease;
    }
    #dataBox.hidden
    {
        left: -29vw;
    }
    .dataBoxA, .dataBoxB, .dataBoxC
    {
        display: flex;
        width: 100%;
    }
    .dataBoxA
    {
        flex-direction: row;
        justify-content: space-between;
    }
    .dataBoxA, .dataBoxC
    {
        padding: 1vw;
    }
    .dataBoxC
    {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 1vw;
    }
    #spotImage
    {
        width: 100%;
        height: 14vw;
        object-fit: cover;
    }
 
    #boxText
    {
        flex-direction: column;
        gap: 1vw;
        align-items: flex-start;
        text-align: left;

    }
    .infoSet
    {
        gap: 0.3vw;
        flex-direction: column;
    }
    #spotRoute
    {
        background-color: var(--blue);
        color: white;
        width: 10vw;
        height: 2vw;
        border-radius: 0.5vw;
    }
    #toggleButton
    {
        width: 1.8vw;
        object-fit: contain;
    }

}


/* 1400 px *******************************************************************************************************/
@media (max-width: 1400px)
{
 
}





	
	
/* 800 px *******************************************************************************************************/
@media (max-width: 800px)
{
   #dataBox
    {
        max-height: none;
        width: 90vw;
        box-shadow: 
        0 0 4vw 1vw rgba(0, 0, 0, 0.3);
        bottom: auto;
        left: 5vw;
        top: 5vh;
    }
    #dataBox.hidden
    {
        left: -87vw;
    }

    .dataBoxA, .dataBoxC
    {
        padding: 4vw;
    }
    .dataBoxC
    {
        gap: 3vw;
    }	
    #spotImage
    {
        height: 50vw;
    }
 
    #boxText
    {
        gap: 4vw;
    }
    .infoSet
    {
        gap: 0.5vw;
    }
    #spotRoute
    {
        width: 30vw;
        height: 6.5vw;
        border-radius: 2vw;
    }
    #toggleButton
    {
        width: 7vw;
    }

}