/*
Showrooms CSS
*/

/* General
========================= */
.showrooms .site-container { display: flex; flex-direction: column; }
.showrooms .site-inner { display: flex; flex-direction: column; flex: 1; padding: 1em 2em; width: 100%; min-height: 800px; }

/* Search
========================= */
.showroom-search { display: flex; flex-direction: column; margin: 0; padding: 3em 0 1em; }
.showroom-search-inner { display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 1480px; width: 100%; }

.search-title { display: flex; flex-direction: column; margin: 0; padding: 0.5em 0 .8em; }
.search-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; }

.showroom-search-wrapper { width: 100%; height: 75px; position: relative; }
.search-form { background: #f8f8f8; border-radius: 5px; box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; width: 500px; height: 50px; }
.search-form.focus { box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); }

.search-form-input { background: none; border: none; color: #5a6674; font-family: 'Mulish', sans-serif; font-size: 1.6rem; outline: none; position: absolute; top: 12px; left: 18px; width: 425px; height: 25px; }
.search-form-input::-webkit-search-cancel-button { appearance: none; }
.search-form-submit { content: "\f002"; border: none; background: none; color: #888; cursor: pointer; margin: 0; padding: 0; outline: none; position: absolute; top: 14px; right: 16px; width: 20px; height: 20px; font-family: 'icomoon' !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }

/* Showroom Listing - Filter Nav
=================================================== */
.filters { display: flex; flex-direction: column; align-items: center; width: 100%; }
.filters ul { display: flex; justify-content: flex-start; flex-wrap: wrap; list-style: none; padding: 1em 0 .5em; }
.filters ul li { background: #f0f0f0; display: flex; margin: 0 .5em 1.5em; padding: .8em 1em; font-family: 'Mulish', sans-serif; font-size: 1.4rem; color: #303133; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .05em; }
.filters ul li:hover { color: #a6a6a6; }
.filters ul li.active { color: #ccc; }

/* Showroom Listing
========================= */
.showroom-listing-filter { display: flex; flex-direction: column; margin: 0; padding: 1.5em 0 0; }
.showroom-listing { display: flex; flex-direction: column; align-items: center; margin: -10px; padding: 2em 0 4em; overflow: hidden; }
.showroom-listing-inner { display: flex; flex-direction: column; justify-content: center; max-width: 100%; width: 100%; height: 100%; }
.showroom { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; }
.showroom .column { display: flex; flex-direction: column; margin: 0; padding: 0.5em; transition: opacity .4s ease-out; width: calc(1/4*100% - (1 - 1/4)*0px); min-height: 250px; }
.showroom .column .column-wrapper { background: #f1f1f1; border-radius: 5px; display: flex; justify-content: center; align-items: center; }
.showroom .column.np .column-wrapper > div { width: 100%; }
.showroom .column .column-wrapper a { width: 100%; }

.showroom .column:hover { opacity: .4; }
.showroom .column.np:hover { opacity: 1; }
.showroom .column a:hover { color: #eee; }

.column-header img { display: block; object-fit: cover; object-position: 50% 0%; border-radius: 5px 5px 0 0; width: 100%; height: 300px; }
.column-bottom { display: flex; flex-direction: column; justify-content: center; padding: 1.25em 1em 1em; }
.column-bottom span { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.7rem; font-weight: 600; line-height: 1.3; margin: 0; text-align: center; }
.column-bottom span:first-of-type { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }

.is-animated { animation: .5s zoom-in; }

@keyframes zoom-in {
0% { transform: scale(.1); } 
100% { transform: none; }
}

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

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

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

@media only screen and (max-width: 1280px) {
.showroom-search { padding: 2.5em 0 1em; }
.search-title span { font-size: 3.2rem; }
.showroom-listing-filter { padding: 1em 0 0; }
.showroom-listing { padding: 1.5em 0 3em; }
.showroom .column { min-height: 225px; }
.column-header img { height: 275px; }
}

@media only screen and (max-width: 1140px) {
.search-title span { font-size: 3rem; }
.column-header img { height: 250px; }
}

@media only screen and (max-width: 1080px) {
.showroom .column { width: calc(1/2*100% - (1 - 1/2)*0px); }
.column-header img { height: 300px; object-position: 50% 5%; }
}

@media only screen and (max-width: 1023px) {
.showrooms .site-inner { padding: 0.5em 2em 1em; }
.showroom-search { padding: .5em 0 1em; }
.search-title span { font-size: 2.8rem; }
.showroom-listing { padding: 1em 0 3em; }
}

@media only screen and (max-width: 880px) {
.column-header img { height: 275px; }
}

@media only screen and (max-width: 768px) {
.search-title span { font-size: 2.6rem; }
.showroom-listing { padding: 1em 0 2.5em; }
.column-bottom span:first-of-type { font-size: 1.9rem; }
.column-header img { height: 250px; }
}

@media only screen and (max-width: 719px) {
.search-title span { font-size: 2.4rem; }
.column-header img { height: 225px; }
}

@media only screen and (max-width: 640px) {
.showrooms .site-inner { padding: .5em 1.5em; }
.showroom-search { padding: .8em 0 .5em; }
.search-form { width: 100%; }
.search-form-input { width: 450px; }
.search-title span { font-size: 2.2rem; }
.showroom-listing { padding: .5em 0 2em; }
.showroom .column { width: 100%; }
.column-header img { height: 350px; }
}

@media only screen and (max-width: 580px) {
.search-form-input { width: 400px; }
.column-header img { height: 325px; }
}

@media only screen and (max-width: 520px) {
.search-form-input { width: 350px; }
.column-header img { height: 300px; }
}

@media only screen and (max-width: 480px) {
.showroom-search { padding: .5em 0; }
.search-title span { font-size: 2.1rem; }
.search-form-input { width: 300px; }
.showroom .column { min-height: 150px; padding: 0.5em; }
.column-bottom span:first-of-type { font-size: 1.8rem; }
.column-header img { height: 275px; }
}

@media only screen and (max-width: 420px) {
.search-form-input { width: 275px; }
.column-header img { height: 250px; }
}