/*
Directory CSS
*/

/* General
========================= */
.directory .site-inner { padding: 1em 2em; min-height: 950px; width: 100%; }

/* Directory
========================= */
.category-listing { display: flex; flex-direction: column; margin: 0 1em; padding: 3em 0 1em; }
.category-listing-filter { display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 1480px; width: 100%; }

/* Directory Filter Nav
=================================================== */
.category-filter { display: flex; flex-direction: column; margin: 0 1em; padding: 1.5em 0 0; width: 100%; }

.category-filter .category-filter-title { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0.5em 0 .8em; }
.category-filter .category-filter-title span { color: #1a1a1a; font-family: 'Roboto Slab', serif; font-size: 3.6rem; font-weight: 600; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }

.filters { display: flex; flex-direction: column; width: 100%; }
.filters ul { display: flex; flex-flow: row wrap; list-style: none; padding: 1em 0 .5em; }
.filters ul li { border: 1px solid #1a1a1a; flex: 1 auto; margin: 0.5em; padding: .5em 1em; font-family: 'Mulish', sans-serif; font-size: 1.3rem; color: #303133; font-weight: 600; cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.filters ul li:hover { color: #fec70f; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; }
.filters ul li.active { background-color: #303133; color: #fec70f; }

.slide-filter { display: none; }

.directory-category-slider-wrap { width: 100%; padding: 0; }

.directory-category-slider .wrap { display: inline-grid !important; gap: 5px; }
.directory-category-slider .wrap:before, .directory-category-slider .wrap:after { display: none; }
.directory-category-slider__item { border: 1px solid #1a1a1a; flex: 1 auto; margin: 0.5em; padding: 0.5em 1em; font-family: 'Mulish', sans-serif; font-size: 1.3rem; color: #303133; font-weight: 600; cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.directory-category-slider__item.active { background-color: #303133; color: #fec70f; }

.tns-nav { text-align: center; margin-top: 30px; }
.tns-nav button{ width: 15px; height: 15px; border-radius: 20px; border: none; margin: 0 5px; background-color: #d8d8d8; }
.tns-nav button.tns-nav-active{ background-color: #fec70f; }

.directory-category-slider[data-chunksize='1'] .wrap{
grid-template-columns: repeat(1, 1fr);
}
.directory-category-slider[data-chunksize='2'] .wrap{
grid-template-columns: repeat(2, 1fr);
}
.directory-category-slider[data-chunksize='3'] .wrap{
grid-template-columns: repeat(3, 1fr);
}
.directory-category-slider[data-chunksize='4'] .wrap{
grid-template-columns: repeat(2, 1fr);
}
.directory-category-slider[data-chunksize='5'] .wrap{
grid-template-columns: repeat(3, 1fr);
}
.directory-category-slider[data-chunksize='6'] .wrap{
grid-template-columns: repeat(3, 1fr);
}
.directory-category-slider[data-chunksize='7'] .wrap{
grid-template-columns: repeat(4, 1fr);
}
.directory-category-slider[data-chunksize='8'] .wrap{
grid-template-columns: repeat(4, 1fr);
}
.directory-category-slider[data-chunksize='9'] .wrap{
grid-template-columns: repeat(5, 1fr);
}
.directory-category-slider[data-chunksize='10'] .wrap{
grid-template-columns: repeat(5, 1fr);
}
.directory-category-slider[data-chunksize='11'] .wrap{
grid-template-columns: repeat(6, 1fr);
} 
.directory-category-slider[data-chunksize='12'] .wrap{
grid-template-columns: repeat(6, 1fr);
} 

/* Directory Listing
========================= */
.directory-showroom-listing { display: flex; flex-direction: column; align-items: center; padding: 2.5em 0 4em; overflow: hidden; }
.directory-showroom-listing-inner { display: flex; flex-direction: column; justify-content: center; max-width: 100%; width: 100%; height: 100%; }
.directory-showroom { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; }
.directory-showroom .column { display: flex; flex-direction: column; margin: 0; padding: 0.5em; transition: opacity .4s ease-out; width: calc(1/5*100% - (1 - 1/5)*0px); min-height: 250px; }
.directory-showroom .column .column-wrapper { background: #f1f1f1; display: flex; justify-content: center; align-items: center; flex: 1; padding: 1em; }
.directory-showroom .column.np .column-wrapper > div { width: 100%; }
.directory-showroom .column .column-wrapper a { width: 100%; }
.directory-showroom .column .column-wrapper a:after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; }

.directory-showroom .column:hover { opacity: .4; }
.directory-showroom .column.np:hover { opacity: 1; }
.directory-showroom .column a:hover { color: #eee; }
.column-top { display: flex; justify-content: center; line-height: 1.2; }
.column-top img { display: block; margin: 0 auto; max-width: 200px; width: 100%; }
.column-bottom { display: flex; flex-direction: column; justify-content: center; padding: 0 1em; }
.column-bottom span { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.4; margin: 0; text-align: center; }

/* Responsive
--------------------------------------------- */
@media only screen and (min-width: 1980px) {}

@media only screen and (min-width: 2500px) {}

@media only screen and (max-width: 1480px) {
.directory-showroom .column { width: calc(1/4*100% - (1 - 1/4)*0px); }
}

@media only screen and (max-width: 1280px) {
.category-filter .category-filter-title span { font-size: 3.2rem; }
.directory-showroom-listing { padding: 2em 0 3em; }
.directory-showroom .column { min-height: 225px; }
.directory-showroom .column .column-wrapper { padding: 0; }
.column-top img { max-width: 175px; }
}

@media only screen and (max-width: 1140px) {
.category-filter .category-filter-title span { font-size: 3rem; }
}

@media only screen and (max-width: 1080px) {
.directory-showroom .column { width: calc(1/3*100% - (1 - 1/3)*0px); }
}

@media only screen and (max-width: 1023px) {
.directory .site-inner { padding: 0.5em 2em 1em; }
.category-filter .category-filter-title span { font-size: 2.8rem; }
.tag-filter { display: none; }
.slide-filter { display: flex; }
.directory-category-slider[data-chunksize='10'] .wrap{ grid-template-columns: repeat(2, 1fr); }
.directory-showroom-listing { padding: 1.5em 0 3em; }
}

@media only screen and (max-width: 880px) {}

@media only screen and (max-width: 768px) {
.category-filter .category-filter-title span { font-size: 2.6rem; }
.directory-showroom-listing { padding: 1.5em 0 2em; }
.column-top img { max-width: 165px; }
}

@media only screen and (max-width: 719px) {
.category-filter .category-filter-title span { font-size: 2.4rem; }
.directory-showroom .column { width: calc(1/2*100% - (1 - 1/2)*0px); }
}

@media only screen and (max-width: 640px) {
.directory .site-inner { padding: .5em 0; }
.category-listing { margin: 0 1.5em; }
.category-filter { margin: 0 1.5em; }
.category-filter .category-filter-title span { font-size: 2.2rem; }
}

@media only screen and (max-width: 580px) {
.column-top img { max-width: 155px;}
}

@media only screen and (max-width: 520px) {
.column-top img { max-width: 150px;}
}

@media only screen and (max-width: 480px) {
.category-filter .category-filter-title span { font-size: 2.1rem; }
.directory-showroom .column { min-height: 150px; padding: 0.5em; width: 100%; }
}

@media only screen and (max-width: 420px) {}