.location-page {
    background-color: var(--bs-page-background);
}

.location-page-container {
    width: 100%;
    align-items: center;
    height: 100vh;
    margin: 0 !important;
    justify-content: center;
}

.location-page-wrapper {
    padding: 0;
    position: relative;
    max-width: 1320px;
}


.option-info {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--bs-body-text-color);
    padding-top: 5px;
}

.map-view {
    height: 486px;
    margin-bottom: 38px;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.iframe-map{
    border:0; 
    border-radius: 1px; 
    height:100%; 
    width: 1320px;
}

.transitOptions {
    max-height: 104px;
    max-width: 100%;
    padding: 0;
}

.transit-options-wrapper {
    display: flex;
    flex-flow: row wrap;
}

.transit-option {
    display: flex;
    flex: 0 0 33.33333333%;
    margin-bottom: 16px;
}

.transitOptions .circle {
    width:24px;
    height:24px;
    border-radius:50%;
    font-size:14px;
    color:#fff;
    line-height:24px;
    text-align:center;
    padding:0;
    font-weight: 700;
}
.decorated-location { 
    overflow: hidden;
    text-align: center;
    height: 44px;
    font-family: Open Sans;
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
}

.decorated-location > span {
    position: relative;
    display: inline-block;
}

.decorated-location > span:before, .decorated-location > span:after {
    content: '';
    position: absolute;
    color: #E1E2EE;
    top: 50%; 
    border-bottom: 2px solid;
    width: 445px;
    margin: 0 128px;
}

.decorated-location > span:before { 
    right: 100%;
}

.decorated-location > span:after {
    left: 100%; 
}

.circle-Q, .circle-W, .circle-N, .circle-R {
    color: black !important;
    background: #fccc0a;
}

.circle-1, .circle-2, .circle-3 {
    background: #ee352e;
}

.circle-4, .circle-5, .circle-6 {
    background: #00933c;
}

.circle-B, .circle-D, .circle-F, .circle-M {
    background: #ff6319;
}

.circle-A, .circle-C, .circle-E {
    background:#0039a6;
}

.circle-7 {
    background: #b933ad;
}

.circle-S {
    background:#808183;
}

.circle-L {
    background: #a7a9ac;
}

.circle-J, .circle-Z {
    background: #996633;
}

.circle-G {
     background: #6cbf45;
}



@media only screen and (max-width: 1440px) {
    .location-page-container {
        align-items: center;
        justify-content: center;
    }
    .map-view {
        height: 386px;
    }
}

@media (min-width: 360px) and (max-width: 500px) {
   
    .transit-options-wrapper{
        display: inline-grid;
        padding-left: 33px;
    }
    .location-page-container{
        height: 70% !important;
    }
    .map-view {
        height: 360px;
        padding: 0px 20px;
    }
    .iframe-map{
        width: 100% !important;
    }
    .location-options-filter {
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
        height: 128px;
        top: 358px;
        padding: 5px;
        background: #46373a85;
    }
    #transportation-section{
        position: absolute;
    }
    .transitOptions {
        max-height: 500px;
        padding-right: var(--bs-gutter-x,.75rem) !important;
        padding-left: var(--bs-gutter-x,.75rem) !important;
    }
    .location-page {
        height: 945px;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    .single-card {
        margin: 10px 0px;
        width: 350px !important;
    }
   
}
@media (min-width: 360px) and (max-width: 380px) {
   
    .location-options-filter {
        flex-direction: column;
        justify-content: space-evenly;
        width: 375px;
        height: 128px;
        top: 358px;
        background: #46373a85;
    }
    
}