.stockist {
    min-height:80vh;
}

section.header {
    background: #2A294F 0% 0% no-repeat padding-box;
    padding: 30px;
}

section.header h1 {
    text-align: left;
    font: normal normal 900 64px/70px 'gilroybold';
    letter-spacing: 1.92px;
    color: #FFFFFF;
    text-transform: lowercase;
    opacity: 1;
}
section.header h2 {
    text-align: left;
    font: normal normal 600 16px/22px 'gilroymedium';
    letter-spacing: 0.48px;
    color: #FFFFFF;
    opacity: 1;
}

section.filter {
    background-color:#F9CF4F;
    padding:10px 0;
}


section.filter .wrapper {
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:center;
}

@media (max-width:768px) {
    section.filter .wrapper {
        gap:5px;
    }
}

section.filter .wrapper p.search {
    flex:0 0 10%;
    width:10%;
    max-width:10%;
    text-align: left;
    font: normal normal bold 18px/21px 'futurabold';
    letter-spacing: 1.8px;
    color: #2A294F;
    text-transform: uppercase;
    opacity: 1;
}

section.filter .wrapper input[type="text"] {
    flex: 0 0 50%;
    width:50%;
    background-color:#fff;
    border: 0.25px solid #5C605F;
    border-radius:5px;
    padding:5px 10px;
}

section.filter .wrapper select[name="range"] {
    flex:0 0 10%;
    width:10%;
    max-width:10%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 0.25px solid #5C605F;
    opacity: 1;
    text-align: left;
    font: normal normal bold 14px/17px 'gilroybold';
    letter-spacing: 0.42px;
    color: #9DA9B3;
    opacity: 1;
    padding:10px;
}

section.filter .wrapper button.apply {
    flex:0 0 10%;
    width:10%;
    max-width:10%;
    background: #2A294F 0% 0% no-repeat padding-box;
    border-radius: 241px;
    opacity: 1;
    text-align: center;
    font: normal normal bold 14px/21px 'futurabold';
    letter-spacing: 1.4px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    padding:5px;
}

section.filter .wrapper button.clear {
    flex:0 0 10%;
    width:10%;
    max-width:10%;
    background:transparent;
    border: 1px solid #2A294F;
    border-radius: 241px;
    opacity: 1;
    text-align: center;
    font: normal normal bold 14px/21px 'futurabold';
    letter-spacing: 1.4px;
    color: #2A294F;
    text-transform: uppercase;
    opacity: 1;
    padding:5px;
}

@media (max-width:768px) {
    section.filter .wrapper button.clear, section.filter .wrapper button.apply, section.filter .wrapper select[name="range"] {
        flex:0 1 auto;
        width:fit-content;
        max-width:fit-content;
    }
}

section.map {
    position:relative;
    display:flex;
}

@media (max-width:768px) {
    section.map {
        flex-direction:column;
    }
}
.map__content {
    flex:0 0 65%;
    width:65%;
    max-width:65%;
    height:70vh;
}

@media (max-width:768px) {
    .map__content {
        order:1;
        flex:0 0 100%;
        width:100%;
        max-width:100%;
    }
}

#map {
    width:100%;
    height:100%;
}

@media (max-width:768px) {
    #map {
        height:60vh;
    }
}

.map__navigation {
    padding:20px;
    flex:0 0 35%;
    width:35%;
    max-width:35%;
    height:70vh;
    overflow:scroll;
    background-color:#fff;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

@media (max-width:768px) {
    .map__navigation {
        order:2;
        position:absolute;
        left:0;
        bottom:0;
        padding: 0 20px 5px;
        flex:0 0 100%;
        width:100%;
        max-width:100%;
        height:17vh;
        z-index:2;
        background-color:transparent;
    }
}


.map__navigation::-webkit-scrollbar {
    display:none;
}

.map__navigation__container {
    width:100%;
    height:fit-content;
}

@media (max-width:768px) {
    .map__navigation__container {
        display:flex;
        gap:20px;
        width:100%;
        max-width:100%;
        height:120px;
        overflow:scroll;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .map__navigation__container::-webkit-scrollbar {
        display:none;
    }

    .map__navigation__container p.no-result {
        background-color: rgba(255, 255, 255, 0.66);
        display: inline-block;
        padding: 10px;
        height: 55px;
        position: relative;
        top: 35%;
        text-align: center;
    }
}


.map__navigation p.title {
    text-align: left;
    font: normal normal 800 30px/38px 'gilroybold';
    letter-spacing: 0.9px;
    color: #2A294F;
    text-transform: lowercase;
    opacity: 1;
    margin-bottom:10px;
}

@media (max-width:768px) {
    .map__navigation p.title {
        display:none;
        margin: 20px 0 10px;
    }
}

.map__navigation__item {
    position:relative;
    background: #6565A0 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    padding:20px 30px 20px 60px;
    width:100%;
    margin-bottom:20px;
    display:none;
}

@media (max-width:768px) {
    .map__navigation__item {
        flex:0 0 90%;
        width:90%;
        max-width:90%;
        padding:5px 5px 5px 60px;
        box-shadow: 17px 10px 36px -16px rgba(0,0,0,0.56);
        -webkit-box-shadow: 17px 10px 36px -16px rgba(0,0,0,0.56);
        -moz-box-shadow: 17px 10px 36px -16px rgba(0,0,0,0.56);
    }
}

.map__navigation__item.show {
    display:block;
}

@media (max-width:768px) {
    .map__navigation__item {
        width:100%;
    }
}

.map__navigation__item:after {
    content:'';
    position:absolute;
    top:20px;
    left:20px;
    background-image:url('../img/marker-red.svg');
    background-size: 25px 45px;
    width:25px;
    height:45px;
}

.map__navigation__item:nth-child(n+2) {
    /* opacity:0.8; */
}

.map__navigation__item p.name {
    text-align: left;
    font: normal normal bold 18px/21px 'futurabold';
    letter-spacing: 1.8px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
}

@media (max-width:768px) {
    .map__navigation__item p.name {
        font: normal normal bold 14px/16px 'futurabold';
    }
}

.map__navigation__item p.address {
    text-align: left;
    font: normal normal normal 14px/20px 'gilroymedium';
    letter-spacing: 0.42px;
    color: #FFFFFF;
    opacity: 1;
}

@media (max-width:768px) {
    .map__navigation__item p.address {
        font: normal normal normal 12px/14px 'gilroymedium';
    }
}

.map__navigation__item p.distance {
    text-align: left;
    font: normal normal normal 14px/20px 'gilroymedium';
    letter-spacing: 0.42px;
    color: #FFFFFF;
    opacity: 1;
    margin-top:30px;
}

@media (max-width:768px) {
    .map__navigation__item p.distance {
        font: normal normal normal 12px/20px 'gilroymedium';
        margin-top:10px;
    }
}