:root{
    --grey-3:#efefef;
    --primary-v86-punchy-orange:#686868;
    --tint-punchy-orange-4:#3498DB;
        
}
.blog-topics {
	display: flex;
	flex-flow: row wrap;
    justify-content:center;
	margin-bottom: 60px;
	gap: 16px;
	position: sticky;
	z-index: 1;
	top: 0;
	padding: 12px 0;
    padding-top:90px;
    background-color:white;
	transition-property: top;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
    
}

.blog-topics-dropdown {
	display: none;
	padding-top: 60px;
	position: sticky;
	top: 10px;
	width: 100%;
	z-index:99999;
	transition-property: top;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
    background-color: var(--tint-punchy-orange-4):
}
#site-wrapper{
    overflow:visible!important;
}

.blog-topics-dropdown select {
	width: 100%;
	border-radius: 0;
	color: var(--grey-5);
	border: none;
	padding: 10px;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--tint-punchy-orange-4);
}

.blog-topic {
	padding: 4px 8px;
	color: var(--primary-v86-jet);
	transition: color 0.3s ease;
	border-radius: 5px;
	background-color: var(--grey-3);
	cursor: pointer;
    border:none;
}

.blog-topic.active {
	color: var(--primary-v86-punchy-orange);
	background-color: var(--tint-punchy-orange-4);
	cursor: default;
}

.blog-topic-search-wrapper {
	position: relative;
}

.blog-topic-search-wrapper::after {
	content: '🔍';
	position: absolute;
	top: 4px;
	right: 6px;
	opacity: 0.6;
	font-size: 14px;
}

#blog-topic-search {
	padding: 4px 8px;
	color: var(--primary-v86-jet);
	transition: color 0.3s ease;
	border-radius: 5px;
	background-color: var(--grey-3);
	border: none;
	width: 100px;
	position: relative;
    height:100%;
}
@media screen and (max-width: 500px) {
	.blog-topics {
		display: none;
	}

	.blog-topics-dropdown {
		display: block;
        
	}
}