/*
Showroom - Single CSS
*/

/* General
========================= */

/* Gallery
========================= */
.profile-gallery { display: flex; justify-content: center; width: 100%; padding: 2em 2em 1em; }
.profile-gallery-wrapper { display: flex; flex-direction: column; margin: 0 auto; max-width: 1480px; width: 100%; position: relative; }
.profile-gallery-inner { display: grid; grid-auto-flow: row dense; grid-gap: 0.5vw; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); grid-auto-rows: calc(350px - 20px); max-width: 100%; margin: 0; padding: 0; }
.profile-gallery-inner figure { position: relative; overflow: hidden; margin: 0; padding: 0; }

.profile-gallery-inner figure.main-image { grid-area: span 2/span 3; }
.main-image-bg { background-position: 50% 0%; background-repeat: no-repeat; background-size: cover; padding-bottom: 56.24%; height: 100%; width: 100%; }

.profile-gallery-inner figure.image-1 { grid-area: span 1/span 2; }
.image-1-bg { background-repeat: no-repeat; background-size: cover; padding-bottom: 56.24%; height: 100%; width: 100%; }
.image-1-bg.justify { background-position: 50% 85%; }

.profile-gallery-inner figure.image-2 { grid-area: span 1/span 2; }
.image-2-bg { background-repeat: no-repeat; background-size: cover; padding-bottom: 56.24%; height: 100%; width: 100%; }

/* Profile
========================= */
.profile { display: flex; flex-direction: column; align-items: center; margin: 0 2em; padding: .8em 0 5em; }
.profile-inner { display: flex; flex-direction: column; max-width: 1480px; width: 100%; }
.profile-content { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; padding: 0; }
.profile-overview { display: flex; flex-direction: column; order: 1; width: 72%; }
.profile-overview-top { display: flex; flex-direction: column; justify-content: center; padding: .5em 0 1em; min-height: 150px; }
.profile-overview-showroom-logo { display: flex; padding: 0.8em 0 1em; position: relative; }
.profile-overview-showroom-logo img { max-width: 300px; }
.profile-overview-top-title { color: #000; font-family: 'Mulish', sans-serif; font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4em; margin: 0; padding: 0 0 0.2em; text-transform: uppercase; }
.profile-overview-top-title:last-of-type { padding: 0; }
.profile-overview-top-title span { font-size: 2rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.profile-overview-bottom { display: block; padding: 0.5em 0; }
.profile-overview-bottom p { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; line-height: 1.6; margin: 0; padding: 0 0 1.2em; }
.profile-overview-bottom p:last-of-type { padding: 0; }
.profile-overview-bottom span { font-weight: 800; }
.profile-overview-bottom ul { margin-left: 1em; }
.profile-overview-bottom ul li { list-style-type: disc; list-style-position: inside; text-indent: -1em; padding-left: 0.5em; }

.designers { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 0 -2em; padding: 1em 0 0; }
.designers .column { display: flex; flex-direction: column; margin: 0; padding: 1.5em 0.5em; width: calc(1/4*100% - (1 - 1/4)*0px); opacity: .7; }
.designers .column img { display: block; margin: 0 auto; max-width: 200px; width: 100%; }

.profile-details { display: flex; flex-direction: column; order: 2; width: 24%; }

.profile-nav { display: flex; flex-direction: column; padding: .5em 0 2em; width: 100%; order: 1; }
.profile-nav-inner { display: flex; background: transparent; border-color: rgba(173,176,182,0.3); border-width: 1px 0; border-style: solid; position: relative; }
.profile-nav-inner .nav-links { margin: 0 auto; padding: 0.8em 0; }
.profile-nav-inner .nav-links .back-to-top-level { display: flex; align-items: center; }
.profile-nav-inner .nav-links .back-to-top-level .icon-th { font-size: 1.7rem; padding-right: 0.5em; }
.profile-nav-inner .nav-links .back-to-top-level .meta-nav { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; }

.profile-details-wrapper { display: flex; flex-direction: column; order: 1; }

.profile-contact { background: #eee; border-radius: 5px; margin: 0 0 1.5em; padding: 1em; width: 100%; height: 100%; }
.profile-contact-wrapper { display: flex; justify-content: flex-start; }
.profile-contact-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.profile-contact .profile-contact-title { color: #333; font-family: 'Roboto Slab', serif; font-size: 1.7rem; font-weight: 600; text-transform: uppercase; }
.profile-contact-person-email { display: flex; flex-direction: column; line-height: 1.4; padding: 0.5em 0 0.2em; max-width: 100%; }
.profile-contact-person-email .column { display: flex; flex-direction: column; padding-bottom: 0.8em; }
.profile-contact-person-email .column:last-of-type { padding-bottom: 0; }
.profile-contact-person-email span { color: #333; font-family: 'Mulish', sans-serif; font-size: 1.7rem; font-weight: 600; margin: 0 0 .2em; padding: 0; }
.phone-number { color: #333; font-family: 'Mulish', sans-serif; font-size: 1.7rem; font-weight: 600; margin: 0.5em 0 0; padding: 0; }

.profile-web-social { background: #eee; border-radius: 5px; margin: 0; padding: 1em; width: 100%; height: 100%; }
.profile-web-social-wrapper { display: flex; justify-content: flex-start; }
.profile-web-social-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.profile-web { line-height: 1.5; margin: 0 0 0.8em; max-width: 100%; }
.profile-web-social .profile-web-title { color: #333; font-family: 'Roboto Slab', serif; font-size: 1.7rem; font-weight: 600; text-transform: uppercase; }
.profile-web-url-link a { color: #333; font-family: 'Mulish', sans-serif; font-size: 1.7rem; font-weight: 600; margin: 0; padding: 0; }
.profile-web-url-link a:hover { opacity: .6; }

.profile-social { line-height: 1.5; }
.profile-web-social .profile-social-title { color: #333; font-family: 'Roboto Slab', serif; font-size: 1.7rem; font-weight: 600; text-transform: uppercase; }
.profile-social-media { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0.4em 0 0; }
.profile-social-media a { font-size: 2.2rem; color: #cf9f00; margin: 0 0.5em; padding: 0; }
.profile-social-media a:first-of-type { margin: 0 0.5em 0 0; }

.profile-categories { display: flex; flex-direction: column; width: 100%; order: 3; }
.profile-categories ul { display: flex; flex-flow: row wrap; list-style: none; padding: 1.5em 0 0.5em; }
.profile-categories ul li { border: 1px solid #1a1a1a; flex: 1 auto; margin: 0.5em; padding: 0.5em 1em; font-size: 1.2rem; cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.profile-categories ul li a { color: #303133; font-family: 'Mulish', sans-serif; font-weight: 600; }
.profile-categories ul li a:hover { color: #fec70f; }

/* Responsive
========================= */

@media only screen and (max-width: 1480px) {
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: calc(245px + 40px); }
}

@media only screen and (max-width: 1280px) {
.profile-gallery { padding: 1.5em 2em 1em; }
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: calc(245px + 5px); }
.designers { margin: 0 0 0 -1em; }
.profile { padding: 0.8em 0 4em; }
.profile-overview { width: 70%; }
}

@media only screen and (max-width: 1140px) {
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-auto-rows: calc(245px - 20px); }
.profile-details { width: 26%; }
.profile-overview { width: 68%; }
}

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

@media only screen and (max-width: 1023px) {
.profile-gallery { padding: 1em 2em; }
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); grid-auto-rows: calc(220px - 20px); }
.profile-gallery-inner figure.main-image { grid-area: span 2/span 4; }
.main-image-bg { padding-bottom: 0; max-height: 405px; }
.main-image-bg.mobile { background-position: 50% 50%; }
.profile-gallery-inner figure.image-1 { grid-area: span 2/span 2; }
.profile-gallery-inner figure.image-2 { grid-area: span 2/span 2; }
.profile { padding: 0.8em 0 3em; }
.profile-overview { width: 65%; }
.profile-overview-showroom-logo img { max-width: 250px; }
.profile-details { width: 30%; }
.designers { padding: 0.8em 0 1em; }
.designers .column { padding: 1em 0.5em; width: calc(1/3*100% - (1 - 1/3)*0px); }
}

@media only screen and (max-width: 880px) {
.profile-gallery-inner { grid-auto-rows: calc(190px - 20px); }
.profile { padding: 0.5em 0 2em; }
.designers { margin: 0 0 1.5em -2em; padding: 0.5em 0 1em; }
.profile-overview { width: 100%; }
.profile-overview.design-space { padding: 0 0 2.5em; }
.profile-overview-showroom-logo { padding: 0.8em 0; }
.profile-details { width: 100%; }
.profile-details-wrapper { flex-direction: row; order: 1; }
.profile-contact-wrapper { justify-content: center; }
.profile-contact { margin: 0 1.5em 0 0; min-height: 170px; }
.profile-contact.contact-space { margin: 0 auto; width: 50%; }
.profile-web-social { min-height: 170px; }
.profile-web-social-wrapper { justify-content: center; }
.profile-social-media a { font-size: 2.1rem; }
.profile-nav { padding: 2em 0 1.5em; order: 3; }
.profile-categories { order: 2; }
.profile-categories ul { padding: 2em 0 0.5em; }
}

@media only screen and (max-width: 768px) {
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); grid-auto-rows: calc(170px - 20px); }
.profile { padding: 0.5em 0 1.5em; }
.profile-nav { padding: 1.5em 0; }
.designers { margin: 0 0 1.5em -1em; padding: 0.5em 0 0.8em; }
}

@media only screen and (max-width: 719px) {
.profile-contact-wrapper { justify-content: flex-start; }
.profile-contact { width: 55%; }
.profile-contact.contact-space { width: 60%; }
.profile-web-social { width: 45%; }
}

@media only screen and (max-width: 640px) {
.profile-gallery { padding: .8em 1.5em; }
.profile-gallery-inner { grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); grid-auto-rows: calc(145px - 20px); grid-gap: 2vw 0; }
.profile-gallery-inner figure.image-1 { grid-area: span 2/span 4; }
.profile-gallery-inner figure.image-2 { grid-area: span 2/span 4; }
.profile { margin: 0 1.5em; }
.profile-overview-top-title { font-size: 1.6rem; }
.profile-overview-top-title span { font-size: 1.9rem; }
.profile-overview-bottom p { font-size: 1.7rem; }
.profile-overview.design-space { padding: 0 0 2em; }
.profile-details-wrapper { flex-direction: column; }
.profile-contact { width: 100%; }
.profile-contact { margin: 0 0 1.5em; }
.profile-contact-wrapper { justify-content: center; }
.profile-web-social { width: 100%; }
#social.profile-web-social { min-height: 100px; }
.profile-nav { padding: 1.5em 0 1em; }
.profile-nav-inner .nav-links .back-to-top-level .meta-nav { font-size: 1.7rem; }
.profile-nav-inner .nav-links .back-to-top-level .icon-th { font-size: 1.6rem; margin-top: 0.08em; }
.profile-social-media a { font-size: 2rem; }
}

@media only screen and (max-width: 580px) {
.profile-contact.contact-space { width: 100%; }
.designers { margin: 0 0 .8em -1em; }
.designers .column {width: calc(1/2*100% - (1 - 1/2)*0px); }
.designers .column img { max-width: 180px; }
}

@media only screen and (max-width: 480px) {
.profile-gallery { padding: 0.8em 1.5em 0.5em; }
.profile { padding: 0.5em 0 1em; }
.profile-overview-top { min-height: 145px; padding: 0 0 0.5em; }
.profile-overview-showroom-logo img { max-width: 225px; }
.profile-overview-top-title { font-size: 1.5rem; }
.profile-overview-top-title span { font-size: 1.8rem; }
.profile-overview-bottom p { font-size: 1.6rem; }
.profile-overview.design-space { padding: 0 0 1.5em; }
.designers .column { padding: 0.5em; }
.designers .column img { max-width: 160px; }
.profile-categories ul { padding: 1.5em 0 0.5em; }
.profile-categories ul li { font-size: 1.1rem; }
.profile-nav { padding: 1em 0; }
}

@media only screen and (max-width: 420px) {
.profile-gallery-inner { grid-auto-rows: calc(125px - 20px); }
}