.store-filter-container .post-tags{
   text-align: center;
}
.store-filter-container .post-tags > a{
   padding: 10px;
   background-color: #253372;
   border-radius: 25px;
   margin-left: 10px;
   color: white;
}
.store-filter-container .post-tags > a:hover{
  background-color: #b30000 !important;
  color: white;
}
.store-filter-container .post-tags > a:focus{
  color: white;
}
.store-filter-container .center-text{
   text-align: center;
}

.store-posts{
  height: 400px;
}

.store-filter-container .current{
   margin: 30px;
   background-color: #b30000 !important;
   color: white;
   border-radius: 25px;
   padding: 10px;
}
.store-filter-container .tagged-posts{
 width:100%;
 margin:auto;
}
/* The grid container */
.store-filter-container {
 grid-template-areas: 
   'header header header header header header' 
   'left middle middle middle middle middle' 
   'footer footer footer footer footer footer';
 /* grid-column-gap: 10px; - if you want gap between the columns */
} 
.store-filter-container .tagged-posts{
  columns: 2 !important;
}


.store-filter-container .left,
.store-filter-container .middle,
.store-filter-container .right {
 padding: 30px;
 width:100% !important;
 /* Should be removed. Only for demonstration */
}
/* Style the left column */
.store-filter-container .left {
 grid-area: left;
}

/* Style the middle column */
.store-filter-container .middle {
 grid-area: middle;
}

/* Style the right column */
.store-filter-container .right {
 grid-area: right;
}
.store-filter-container .filter{
 margin-left: 10px;
}
/* Style the footer */

.store-filter-container .single-portfolio{
 display:block;
 margin-bottom: 20px;
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
 .store-filter-container {
   grid-template-areas: 
     'header header header header header header' 
     'left left left left left left' 
     'middle middle middle middle middle middle' 
     'right right right right right right' 
     'footer footer footer footer footer footer';
 }
 .store-filter-container .tagged-posts{
    columns: 1 !important;
 }
}


selector {
  display: grid;
  grid-template-areas:
    'happy lovers'
    'pick  pick';
}

/* the cards and toggle buttons are actually fat labels that can be clicked to set radio buttons */
.store-filter-container label {
  width:100%;
  cursor: pointer;
}

.store-filter-container .happy-card, .lovers-card {
  position: relative; /* for iOS */
  padding: 20px;
  color: #586875;
  background-color: #f4f7f7;
  box-shadow: 0 10px 20px #0006;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out; /* important to use a symmetrical timing function (linear also works) */
  animation-fill-mode: forwards;
}

.store-filter-container .happy-card {
  grid-area: happy;
  margin-right: -10px; /* nudge closer to lover's card */
  
  /* these values are used to animate via translateX */
  --swing: -25px;
  --overlap: 25px;
}

.store-filter-container .lovers-card {
  grid-area: lovers;
  margin-left: -10px; /* nudge closer to happy card */

  /* these values are used to animate via translateX */
  --swing: 25px;
  --overlap: -25px;
}

/* when a radio button is set, swing the corresponding card fowards */
#happy-radio:checked ~ .selector .happy-card,
#lovers-radio:checked ~ .selector .lovers-card {
  animation-name: swing-forwards;
}

@keyframes swing-forwards {
  0% {
    z-index: 1; /* start behind other card */
    transform: scale(0.9);
  }
  50% {
    transform: translateX(var(--swing));
  }
  100% {
    z-index: 2; /* end in front of other card */
    transform: translateX(var(--overlap)) scale(1.1);
  }
}

/* when a radio button is set, swing the opposite card backwards */
#happy-radio:checked ~ .selector .lovers-card,
#lovers-radio:checked ~ .selector .happy-card {
  animation-name: swing-backwards;
}

@keyframes swing-backwards {
  0% {
    z-index: 2;  /* start in front of other card */
    transform: translateX(var(--overlap)) scale(1.1);
  }
  50% {
    transform: translateX(var(--swing));
  }
  100% {
    z-index: 1; /* end behind other card */
    transform: scale(0.9);
  }
}

.store-filter-container h1 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed white;
  font-size: 1.5rem;
}

.store-filter-container ul {
  margin: 15px 0;
  padding-left: 30px;
  line-height: 1.5rem;
  list-style-type: square;
}


.store-filter-container .state-list{
  width:100%;
  padding:10px 15px;
}

.store-filter-container .city-list{
  width:100%;
  padding:10px 15px;
}

.store-filter-container .happy-pick, .store-filter-container .lovers-pick {
  grid-area: pick;
  margin: 50px auto 0;
  padding: 15px;
  border: 1px solid #f4f7f7;
  border-radius: 9999px;
  background-color: #b46d73;
  font-size: 1.25rem;
  -webkit-user-select: none;
  user-select: none;
}

.happy-pick::before, .lovers-pick::after {
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
}

.happy-pick::before {
  margin-right: 10px;
  content: '\f0a8'; /* fa-arrow-circle-left */
}

.lovers-pick::after {
  margin-left: 10px;
  content: '\f0a9'; /* fa-arrow-circle-right */
}

/* hide happy toggle button if happy is currently selected */
#happy-radio:checked ~ .selector .happy-pick {
  display: none;
}

/* hide lover's toggle button if lover's is currently selected */
#lovers-radio:checked ~ .selector .lovers-pick {
  display: none;
}

/* increase overlap and swing distance on smaller screens */
@media (max-width: 560px) {
  .happy-card {
    margin-right: -85px;
    --swing: -100px;
  }

  .lovers-card {
    margin-left: -85px;
    --swing: 100px;
  }
  .map-col-md-6 select{
    margin-top: 20px;
  }
}


@media (min-width:641px){
  .map-row{
    display: flex;
  }
  .map-col-md-6{
    width: 50%;
    padding: 0px 30px;
  }
}


@media(max-width:480px){
  
  .middle{
    padding: 10px !important;
  }
  .store-posts p{
    padding: 20px !important;
  }
  
}