div[class^="areas"]{
    display: none;
    align-items: center;
    text-align: center;
}
[class^="posts-list-item"]{
    display: none;

}
ul.surevy-cat {
    display: flex;
}
ul.surevy-cat > li.surevy-cat-list-item {
    list-style: none;
}
li.surevy-cat-list-item a {
    border: 1px solid #96a6af;
    padding: 10px 30px;
    margin: .2rem;
}
ul.areas-list li[class^="areas-list-item"],
ul.posts-list li[class^="posts-list-item"] {
    list-style: none;
    border: 1px solid #96a6af;
    padding: 10px 30px;
    margin: .2rem;
    background: #88b4e7;
}
ul.posts-list li[class^="posts-list-item"]{
    background:#029fcc;
}
ul.areas-list li[class^="areas-list-item"]:hover,
ul.posts-list li[class^="posts-list-item"]:hover {
    background: #0088ff;
    color: #fff;
}
ul.areas-list li[class^="areas-list-item"] a,
ul.posts-list li[class^="posts-list-item"] a{
    font-weight: bold;
    color: #fff;
}
div[class^="areas"] ul.posts-list {
    margin-bottom: auto;
    margin-right: 0;
    padding-right: 0;
}
.survey-buttons{
    display: flex;
   margin-top: 50px;
}
.survey-buttons a{
    border: 1px solid #96a6af;
    padding: 10px 30px;
    margin: 1rem;
    background: #88b4e7;
    font-weight: bold;
    color: #fff;
}
.survey-buttons a:hover{
    background: #0088ff;
    color: #fff;
}
.single h1{
    margin-bottom:50px;
}
.single{
    margin-left:.8rem;
    margin-right:.8rem;
}
@media (max-width: 500px) { 
    div[class^="areas"].show{
        display: block !important;
    }
    div[class^="areas"] ul.areas-list {
        padding-right: 0;
        margin-right: 0;
    }
    div[class^="areas"] ul.posts-list {
        padding-right: 3%;
        margin-right: 3%;
    }
    .survey-buttons{
        display: block;
   
    }
    .survey-buttons p{
         margin-top: 50px;
    }
}