@font-face  {
	font-family: "title" ; src: url("/fonts/title-light.woff") format("woff") ; font-weight: 400 ; font-style: normal ;
}
@font-face  {
	font-family: "title" ; src: url("/fonts/title-medium.woff") format("woff") ; font-weight: 600 ; font-style: normal ;
}
@font-face  {
	font-family: "title" ; src: url("/fonts/title-bold.woff") format("woff") ; font-weight: 800 ; font-style: normal ;
}

* {
	--color-icons:      hsla(17, 100%, 50%, 1) ;
	--color-auctions:   hsla(30, 100%, 80%, 1) ;
	--color-designers:  hsla(151, 22%, 47%, 1) ;
	--color-search:     hsla(58, 76%, 74%, 1) ;
	--color-timeline:   hsla(0, 59%, 83%, 1) ;
	--color-title:      hsla(0, 0%, 0%, 1) ;
	--color-text:       hsla(0, 0%, 0%, 1) ;
	--color-text-light: hsla(0, 0%, 40%, 1) ;
	--color-bg:         hsla(15, 0%, 95%, 1) ;
	--color-focus-bg:	hsla(0, 59%, 83%, 0.4) ;
}

* { box-sizing: border-box ; }

body { margin: 0 ; padding: 0 ; background: var(--color-bg) ; overflow-x: hidden ; }

header { display: flex ; flex-wrap: wrap ; justify-content: space-between ; align-items: center ; z-index: 98 ; background-color: var(--color-bg) ; width: 100% ; }

header > img { height: 4em ; margin: 1em ; cursor: pointer ; }

header nav#icons { margin: 1em ; padding: 0 ; display: flex ; }

header nav#icons > div#search-field { width: 15em ; height: 2em ; flex-shrink: 0 ; margin-right: 1em ; border-width: 0.1em ; border-style: solid ; border-color: var(--color-title) ; padding: 0 ; position: relative ; }
header nav#icons > div#search-field input { position: absolute ; top: 0 ; right: 2em ; bottom: 0 ; left: 0 ; border: none ; background-color: var(--color-bg) ; padding: 0 0 0 1em ; margin: 0 ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; transition: width 2s ease-in-out ; }
header nav#icons > div#search-field input:focus { outline: none ; }
header nav#icons > div#search-field:after { content: " " ; position: absolute ; top: 0.25em ; right: 0.25em ; bottom: 0.25em ; width: 1.275em ; background-image: url("/assets/icon-search.svg") ; background-repeat: no-repeat ; }
header nav#icons:has(> div#search-field input:focus-within, input:not(:placeholder-shown)) { position: fixed ; right: 3.75em ; top: 2.75em ; }
header nav#icons > div#search-field:has(input:focus-within, input:not(:placeholder-shown)) { width: 12em ; }

header nav#icons > div#account-icon { border: none ; background: none ; background-image: url("/assets/icon-account.svg") ; background-repeat: no-repeat ; margin: 0 ; padding: 0 ; width: 2rem ; height: 2rem ; cursor: pointer ; transition: transform 0.1s ease-in-out ; }

/*header nav#icons > ul { margin: 1em ; padding: 0 ; }

header nav#icons > ul > li { display: inline-block ; height: 2em ; color: var(--color-title) ; cursor: pointer ; margin: 0.1em ; }
header nav#icons > ul > li:hover { color: var(--color-icons) ; }

header nav#icons > ul > li#search-field { width: 15em ; flex-shrink: 0 ; margin-right: 1em ; border-width: 0.1em ; border-style: solid ; border-color: var(--color-title) ; padding: 0 ; position: relative ; }
header nav#icons > ul > li#search-field input { position: absolute ; top: 0 ; right: 2em ; bottom: 0 ; left: 0 ; border: none ; background: none ; padding: 0 0 0 1em ; margin: 0 ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; }
header nav#icons > ul > li#search-field:after { content: " " ; position: absolute ; top: 0.25em ; right: 0.25em ; bottom: 0.25em ; width: 1.275em ; background-image: url("/assets/icon-search.svg") ; background-repeat: no-repeat ; }

header nav#icons > ul > li#search-icon { background-image: url("/assets/icon-search.svg") ; background-repeat: no-repeat ; width: 1.924em ; flex-shrink: 0 ; margin-right: 1em ; }
header nav#icons > ul > li#account-icon { background-image: url("/assets/icon-account.svg") ; background-repeat: no-repeat ; flex-shrink: 0 ; width: 1.992em ; }
header nav#icons > ul > li#notifications-icon { background-image: url("/assets/icon-notifications.svg") ; background-repeat: no-repeat ; flex-shrink: 0 ; width: 1.564em ; }
header nav#icons > ul > li#likes-icon { background-image: url("/assets/icon-likes.svg") ; background-repeat: no-repeat ; flex-shrink: 0 ; width: 2.322em ; }*/

/*header div#responsive-menu-button { height: 2em ; background-image: url("/assets/icon-hamburger.svg") ; background-repeat: no-repeat ; flex-shrink: 0 ; width : 2.25em ; cursor: pointer ; margin: 1em ; }*/
header div#responsive-menu-button { height: 2em ; background-image: url("/assets/icon-hamburger.svg") ; background-repeat: no-repeat ; flex-shrink: 0 ; width : 2.25em ; cursor: pointer ; margin: auto 1em 1.25em 0.5em ; }

header div#search-overlay { display: none ; margin: 1em ; padding: 1em 0 0 0 ; flex-wrap: wrap ; justify-content: flex-start ; width: 100% ; }

header div#search-overlay label { margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

header div#search-overlay div.lot { cursor: pointer ; margin-right: 1em ; width: calc((100% - 7em) / 6) ; position: relative ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; margin-bottom: 5em ; }
header div#search-overlay div.lot:nth-of-type(6n) { margin-left:1em ; }

/*header div#search-overlay div:hover { transform: scale(0.95, 0.95) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

header div#search-overlay div.lot img { object-fit: cover ; object-position: center ; width: 100% ; height: 100% ; }

header div#search-overlay div.lot span.past { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }
header div#search-overlay div.lot span.upcoming { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

header div#search-overlay div.lot p.brand { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
header div#search-overlay div.lot p.categories { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
header div#search-overlay div.lot p.price { font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }

header div#search-overlay p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }*/

header nav#menu { display: block ; width: 100% ; }

header nav#menu > ul { margin: 1em ; padding: 0 ; display: flex ; }

header nav#menu > ul > li { display: inline-block ; list-style: none ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; cursor: pointer ; border-width: 0.1em ; border-style: solid ; border-color: var(--color-title) ; border-right: none ; padding: 1em ; }
header nav#menu > ul > li:last-of-type { border-right: 0.1em solid ; }
header nav#menu > ul > li#menu-auctions:hover { background-color: var(--color-auctions) ; }
header nav#menu > ul > li#menu-designers:hover { background-color: var(--color-designers) ; }
header nav#menu > ul > li#menu-timeline:hover { background-color: var(--color-designers) ; }
header nav#menu > ul > li#menu-advance-search:hover { background-color: var(--color-search) ; }

header nav#menu > ul > li > ul { margin: 1em ; padding: 0 ; }

header nav#menu > ul > li#menu-auctions > ul { background-color: var(--color-auctions) ; }
header nav#menu > ul > li#menu-designers > ul { background-color: var(--color-designers) ; }
header nav#menu > ul > li#menu-timeline > ul { background-color: var(--color-designers) ; }
header nav#menu > ul > li#menu-advance-search > ul { background-color: var(--color-search) ; }
header nav#menu > ul > li > ul > li { display: block ; list-style: none ; padding: 1em ; }

main { min-height: 30em ; }

date-input-polyfill { background-color: var(--color-bg) !important ; box-shadow: 0 0 0.2em var(--color-title) !important ; font-family: title !important ; font-size: 0.8em !important ; font-weight: 400 !important ; color: var(--color-text) !important ; text-transform: uppercase !important ; }
date-input-polyfill div.date-select-header { background-color: var(--color-bg) !important ; }
date-input-polyfill div.select-container { background-color: var(--color-bg) !important ; }
date-input-polyfill div.day-matrix-wrapper { background-color: var(--color-bg) !important ; }
date-input-polyfill button { background-color: var(--color-bg) !important ; border: 0.1em solid var(--color-title) !important ; border-radius: 0 !important ; font-family: title !important ; font-size: 1em !important ; font-weight: 800 !important ; color: var(--color-text) !important ; text-transform: uppercase !important ; }
date-input-polyfill div.select-wrapper button { background-color: var(--color-title) !important ; color: var(--color-bg) !important ; border-radius: 0.2em !important ; }
date-input-polyfill button.date-header-button:after { content: "‹" !important ; }
date-input-polyfill button.control:after { content: "‹" !important ; }
date-input-polyfill button.up:after { left: 22px !important ; }
date-input-polyfill button.down:after { right: 22px !important ; }
date-input-polyfill div.option-wrapper div.option-2 { background-color: var(--color-title) !important ; color: var(--color-bg) !important ; border-radius: 0.2em !important ; }
date-input-polyfill div.day-matrix-wrapper th { font-size: 0.8em !important ; }
date-input-polyfill div.day-matrix-wrapper td { font-size: 0.8em !important ; color: var(--color-text) !important ; }
date-input-polyfill div.day-matrix-wrapper td:hover { background-color: var(--color-title) !important ; color: var(--color-bg) !important ; }
date-input-polyfill div.day-matrix-wrapper td.disabled { background-color: var(--color-title) !important ; color: var(--color-bg) !important ; opacity: 0.1 !important ; }
date-input-polyfill div.day-matrix-wrapper td[data-selected] { border-color: var(--color-timeline) !important ; background-color: var(--color-timeline) !important ; }

body.home main { margin: 1em ; display: grid ; gap: 0.5em ; }

body.home main div { cursor: pointer ; position: relative ; background-size: cover ; background-position: center ; transition: transform 0.5s ease-in-out ; z-index: initial ; }
body.home main div:hover { transform: scale(1.05, 1.05) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }
body.home main div#banner1 { grid-area: banner1 ; }
body.home main div#banner2 { grid-area: banner2 ; }
body.home main div#banner3 { grid-area: banner3 ; }
body.home main div#banner4 { grid-area: banner4 ; }
body.home main div#banner5 { grid-area: banner5 ; }
body.home main div#banner6 { grid-area: banner6 ; }

body.home main div h3 { position: absolute ; bottom: 0 ; margin: 1em ; font-family: title ; font-size: 1.5em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.password { overflow: hidden ; }

body.password main { margin: 1em ; display: grid ; gap: 0.5em ; }

body.password main div { cursor: pointer ; position: relative ; background-size: cover ; background-position: center ; transition: transform 0.5s ease-in-out ; z-index: initial ; }
body.password main div:hover { transform: scale(1.05, 1.05) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }
body.password main div#banner1 { grid-area: banner1 ; }
body.password main div#banner2 { grid-area: banner2 ; }
body.password main div#banner3 { grid-area: banner3 ; }
body.password main div#banner4 { grid-area: banner4 ; }
body.password main div#banner5 { grid-area: banner5 ; }
body.password main div#banner6 { grid-area: banner6 ; }

body.password main div h3 { position: absolute ; bottom: 0 ; margin: 1em ; font-family: title ; font-size: 1.5em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.password div#overlay { position: fixed ; inset: 0 ; width: 100vw ; height: 100vh ; overflow: hidden ; background: linear-gradient(to bottom right, rgba(0, 0, 0, .2), 40%, rgba(0, 0, 0, .4)) ; -webkit-backdrop-filter: blur(5px) ; backdrop-filter: blur(5px) ; z-index: 100 ; }

body.password div#overlay div#card { position: absolute ; top: 50% ; left: 30% ; right: 30% ; transform: translateY(-50%) ; height: auto ; background: linear-gradient(to bottom right, rgba(255, 255, 255), 40%, rgba(200, 200, 200)) ; padding: 1em ; border-radius: 0 !important ; box-shadow: 0 0 2em var(--color-text) ; font-family: title !important ; font-size: 1em !important ; font-weight: 800 !important ; color: var(--color-text) !important ; text-transform: uppercase !important ; z-index: 101 ; display: flex ; flex-direction: column ; gap: 1em ; }

body.password div#overlay div#card h3 { margin: 0 ; font-size: 1.5em ; }

body.password div#overlay div#card input { display: block ; width: 100% ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; background-color: var(--color-bg) ; padding: calc(1em - 3px) ; }

body.password div#overlay div#card div.action { display: flex ; }

body.password div#overlay div#card div.action button { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; background-color: transparent ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; }
body.password div#overlay div#card div.action button:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.password div#overlay div#card div.action button:nth-child(2) { margin-inline-start: auto ; background-color: var(--color-title) ; color: var(--color-bg) ; }
body.password div#overlay div#card div.action button:nth-child(2):hover { background-color: transparent ; color: var(--color-title) ; }

body.password div#overlay div#card div.action button:disabled { background-color: transparent !important ; color: var(--color-title) !important ; cursor: default ; }
body.password div#overlay div#card div.action button:disabled:hover { background-color: transparent !important ; color: var(--color-title) !important ; }

body.search header { position: fixed ; top: 0 ; left: 0 ; height: 10.5em ; }

body.search main section#tag-list { position: fixed ; top: 10.5em ; left: 0 ; right: 10em ; min-height: 3.6em ; padding: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; background: var(--color-bg) ; z-index: 12 }

body.search main section#tag-list div.tag { padding: 0.5em 1em ; font-family: title ; font-size: 0.7em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; border: 0.1em solid var(--color-text-light) ; margin-right: .5em ; transition: transform 0.5s ease-in-out, color 0.5s ease-in-out ; margin-bottom: 0.7em ; }
body.search main section#tag-list div.tag:hover { transform: scale(0.95, 0.95) ; color: var(--color-text) ; }
body.search main section#tag-list div.tag:before { content: "×" ; margin-right: 0.7em ; }

body.search main section#tag-list div.tag strong { font-weight: 800 ; }

body.search main section#tag-list div.tag span.count { font-size: 0.5em ; font-weight: 400 ; margin-left: 0.5em ; }

body.search main section#lot-count { position: fixed ; top: 10.5em ; right: 0 ; width: 10em ; height: 3.6em ; padding: 1em ; display: block ; text-align: right ; font-family: title ; font-size: 1em ; background: var(--color-bg) ; z-index: 12 }

body.search main section#search-box { margin: 15em 1em 1em 1em ; display: grid ; gap: 1em ; }

body.search main section#search-box label { font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; }

body.search main section#search-box label#search-timing-label { display: block ; grid-area: timing-label ; }
body.search main section#search-box label#search-houses-label { display: block ; grid-area: houses-label ; }
body.search main section#search-box label#search-dates-label { display: block ; grid-area: dates-label ; }
body.search main section#search-box label#search-categories-label { display: block ; grid-area: categories-label ; }
body.search main section#search-box label#search-designers-label { display: block ; grid-area: designers-label ; }
body.search main section#search-box label#search-decades-label { display: block ; grid-area: decades-label ; }
body.search main section#search-box label#search-materials-label { display: block ; grid-area: materials-label ; }
body.search main section#search-box label#search-patterns-label { display: block ; grid-area: patterns-label ; }
body.search main section#search-box label#search-colors-label { display: block ; grid-area: colors-label ; }

body.search main section#search-box div#search-timing { grid-area: timing-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-houses { grid-area: houses-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-dates { display: block ; grid-area: dates-elements ; font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-title) ; }
body.search main section#search-box div#search-categories { grid-area: categories-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-designers { grid-area: designers-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-decades { grid-area: decades-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-materials { grid-area: materials-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-patterns { grid-area: patterns-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.search main section#search-box div#search-colors { grid-area: colors-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.search main section#search-box div div.active { display: flex !important ; }
body.search main section#search-box div div:not(.active) { display: none !important ; }

body.search main section#search-box div span.see-all { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.search main section#search-box div span.see-all:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.search main section#search-box div span.hide { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.search main section#search-box div span.hide:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.search main section#search-box div span.active { display: block !important ; }
body.search main section#search-box div span.selected { background-color: var(--color-timeline) !important ; }
body.search main section#search-box div span.selected:hover { background-color: var(--color-timeline)!important ; }
body.search main section#search-box div span:not(.active) { display: none !important ; }

body.search main section#search-box div input[type="search"] { display: block ; -webkit-appearance: none ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; background-color: var(--color-bg) ; margin: 0 0.5em 0.5em 0 ; padding: calc(1em - 3px) ; }
/*body.search main section#search-box div input[type="search"].active { display: block !important ; }
body.search main section#search-box div input[type="search"]:not(.active) { display: none !important ; }*/

body.search main section#search-box div#search-timing span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; cursor: pointer ; background-color: var(--color-title) ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-timing span:hover { background-color: var(--color-bg) ; color: var(--color-title) ; }

body.search main section#search-box div#search-houses span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-houses span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-dates input[type="date"] { display: inline-block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin: 0.5em ; vertical-align: middle ; }

body.search main section#search-box div#search-categories span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-categories span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-categories div#apparel-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.search main section#search-box div#search-categories div#accessory-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.search main section#search-box div#search-categories div#hermes-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.search main section#search-box div#search-categories div#documentation-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }

body.search main section#search-box div#search-designers span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-designers span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-decades span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: initial ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-decades span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-materials span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-materials span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-patterns span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-patterns span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#search-box div#search-colors span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.search main section#search-box div#search-colors span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.search main section#lot-list { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

/*body.search main section#lot-list label { margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

body.search main section#lot-list div.lot { cursor: pointer ; margin-right: 1em ; width: calc((100% - 7em) / 6) ; position: relative ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; margin-bottom: 5em ; }
body.search main section#lot-list div.lot:nth-of-type(6n) { margin-left:1em ; }

body.search main section#lot-list div:hover { transform: scale(0.95, 0.95) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

body.search main section#lot-list div.lot img { object-fit: cover ; object-position: center ; width: 100% ; height: 100% ; }

body.search main section#lot-list div.lot span.past { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }
body.search main section#lot-list div.lot span.upcoming { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.search main section#lot-list div.lot p.brand { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.search main section#lot-list div.lot p.categories { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.search main section#lot-list div.lot p.price { font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }*/

body.search main section#lot-list p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }

body.upcoming header { position: fixed ; top: 0 ; left: 0 ; height: 10.5em ; }

body.upcoming main section#tag-list { position: fixed ; top: 10.5em ; left: 0 ; right: 10em ; min-height: 3.6em ; padding: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; background: var(--color-bg) ; z-index: 12 }

body.upcoming main section#tag-list div.tag { padding: 0.5em 1em ; font-family: title ; font-size: 0.7em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; border: 0.1em solid var(--color-text-light) ; margin-right: .5em ; transition: transform 0.5s ease-in-out, color 0.5s ease-in-out ; margin-bottom: 0.7em ; }
body.upcoming main section#tag-list div.tag:hover { transform: scale(0.95, 0.95) ; color: var(--color-text) ; }
body.upcoming main section#tag-list div.tag:before { content: "×" ; margin-right: 0.7em ; }

body.upcoming main section#tag-list div.tag strong { font-weight: 800 ; }

body.upcoming main section#tag-list div.tag span.count { font-size: 0.5em ; font-weight: 400 ; margin-left: 0.5em ; }

body.upcoming main section#lot-count { position: fixed ; top: 10.5em ; right: 0 ; width: 10em ; height: 3.6em ; padding: 1em ; display: block ; text-align: right ; font-family: title ; font-size: 1em ; background: var(--color-bg) ; z-index: 12 }

body.upcoming main section#search-box { margin: 15em 1em 1em 1em ; display: grid ; gap: 1em ; }

body.upcoming main section#search-box label { font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; }

body.upcoming main section#search-box label#search-houses-label { display: block ; grid-area: houses-label ; }
body.upcoming main section#search-box label#search-dates-label { display: block ; grid-area: dates-label ; }
body.upcoming main section#search-box label#search-categories-label { display: block ; grid-area: categories-label ; }
body.upcoming main section#search-box label#search-designers-label { display: block ; grid-area: designers-label ; }
body.upcoming main section#search-box label#search-decades-label { display: block ; grid-area: decades-label ; }
body.upcoming main section#search-box label#search-materials-label { display: block ; grid-area: materials-label ; }
body.upcoming main section#search-box label#search-patterns-label { display: block ; grid-area: patterns-label ; }
body.upcoming main section#search-box label#search-colors-label { display: block ; grid-area: colors-label ; }

body.upcoming main section#search-box div#search-houses { grid-area: houses-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-dates { display: block ; grid-area: dates-elements ; font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-title) ; }
body.upcoming main section#search-box div#search-categories { grid-area: categories-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-designers { grid-area: designers-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-decades { grid-area: decades-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-materials { grid-area: materials-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-patterns { grid-area: patterns-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.upcoming main section#search-box div#search-colors { grid-area: colors-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.upcoming main section#search-box div div.active { display: flex !important ; }
body.upcoming main section#search-box div div:not(.active) { display: none !important ; }

body.upcoming main section#search-box div span.see-all { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.upcoming main section#search-box div span.see-all:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.upcoming main section#search-box div span.hide { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.upcoming main section#search-box div span.hide:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.upcoming main section#search-box div span.active { display: block !important ; }
body.upcoming main section#search-box div span.selected { background-color: var(--color-timeline) !important ; }
body.upcoming main section#search-box div span.selected:hover { background-color: var(--color-timeline)!important ; }
body.upcoming main section#search-box div span:not(.active) { display: none !important ; }

body.upcoming main section#search-box div input[type="search"] { display: block ; -webkit-appearance: none ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; background-color: var(--color-bg) ; margin: 0 0.5em 0.5em 0 ; padding: calc(1em - 3px) ; }
/*body.upcoming main section#search-box div input[type="search"].active { display: block !important ; }
body.upcoming main section#search-box div input[type="search"]:not(.active) { display: none !important ; }*/

body.upcoming main section#search-box div#search-houses span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-houses span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-dates input[type="date"] { display: inline-block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin: 0.5em ; vertical-align: middle ; }

body.upcoming main section#search-box div#search-categories span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-categories span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-categories div#apparel-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.upcoming main section#search-box div#search-categories div#accessory-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.upcoming main section#search-box div#search-categories div#hermes-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.upcoming main section#search-box div#search-categories div#documentation-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }

body.upcoming main section#search-box div#search-designers span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-designers span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-decades span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: initial ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-decades span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-materials span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-materials span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-patterns span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-patterns span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#search-box div#search-colors span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.upcoming main section#search-box div#search-colors span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.upcoming main section#sale-list { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: space-between ; }

body.upcoming main section#sale-list div { cursor: pointer ; background-size: cover ; background-position: center ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; width: 100% ; height: 20em ; position: relative ; margin-bottom: 0.5em ; }

body.upcoming main section#sale-list div:hover { transform: scale(1.05, 1.05) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

body.upcoming main section#sale-list div h3 { position: absolute ; bottom: 0 ; margin: 1em ; font-family: title ; font-size: 1.5em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.upcoming main section#sale-list div h4 { position: absolute ; top: 0 ; margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.upcoming main section#sale-list p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }

body.results header { position: fixed ; top: 0 ; left: 0 ; height: 10.5em ; }

body.results main section#tag-list { position: fixed ; top: 10.5em ; left: 0 ; right: 10em ; min-height: 3.6em ; padding: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; background: var(--color-bg) ; z-index: 12 }

body.results main section#tag-list div.tag { padding: 0.5em 1em ; font-family: title ; font-size: 0.7em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; border: 0.1em solid var(--color-text-light) ; margin-right: .5em ; transition: transform 0.5s ease-in-out, color 0.5s ease-in-out ; margin-bottom: 0.7em ; }
body.results main section#tag-list div.tag:hover { transform: scale(0.95, 0.95) ; color: var(--color-text) ; }
body.results main section#tag-list div.tag:before { content: "×" ; margin-right: 0.7em ; }

body.results main section#tag-list div.tag strong { font-weight: 800 ; }

body.results main section#tag-list div.tag span.count { font-size: 0.5em ; font-weight: 400 ; margin-left: 0.5em ; }

body.results main section#lot-count { position: fixed ; top: 10.5em ; right: 0 ; width: 10em ; height: 3.6em ; padding: 1em ; display: block ; text-align: right ; font-family: title ; font-size: 1em ; background: var(--color-bg) ; z-index: 12 }

body.results main section#search-box { margin: 15em 1em 1em 1em ; display: grid ; gap: 1em ; }

body.results main section#search-box label { font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; }

body.results main section#search-box label#search-houses-label { display: block ; grid-area: houses-label ; }
body.results main section#search-box label#search-dates-label { display: block ; grid-area: dates-label ; }
body.results main section#search-box label#search-categories-label { display: block ; grid-area: categories-label ; }
body.results main section#search-box label#search-designers-label { display: block ; grid-area: designers-label ; }
body.results main section#search-box label#search-decades-label { display: block ; grid-area: decades-label ; }
body.results main section#search-box label#search-materials-label { display: block ; grid-area: materials-label ; }
body.results main section#search-box label#search-colors-label { display: block ; grid-area: colors-label ; }

body.results main section#search-box div#search-houses { grid-area: houses-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-dates { display: block ; grid-area: dates-elements ; font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-title) ; }
body.results main section#search-box div#search-categories { grid-area: categories-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-designers { grid-area: designers-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-decades { grid-area: decades-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-materials { grid-area: materials-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-patterns { grid-area: patterns-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }
body.results main section#search-box div#search-colors { grid-area: colors-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.results main section#search-box div div.active { display: flex !important ; }
body.results main section#search-box div div:not(.active) { display: none !important ; }

body.results main section#search-box div span.see-all { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.results main section#search-box div span.see-all:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.results main section#search-box div span.hide { color: var(--color-bg) !important ; background-color: var(--color-title) !important ; }
body.results main section#search-box div span.hide:hover { background-color: var(--color-bg) !important ; color: var(--color-title) !important ; }
body.results main section#search-box div span.active { display: block !important ; }
body.results main section#search-box div span.selected { background-color: var(--color-timeline) !important ; }
body.results main section#search-box div span.selected:hover { background-color: var(--color-timeline)!important ; }
body.results main section#search-box div span:not(.active) { display: none !important ; }

body.results main section#search-box div input[type="search"] { display: block ; -webkit-appearance: none ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; background-color: var(--color-bg) ; margin: 0 0.5em 0.5em 0 ; padding: calc(1em - 3px) ; }
/*body.results main section#search-box div input[type="search"].active { display: block !important ; }
body.results main section#search-box div input[type="search"]:not(.active) { display: none !important ; }*/

body.results main section#search-box div#search-houses span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-houses span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-dates input[type="date"] { display: inline-block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin: 0.5em ; vertical-align: middle ; }

body.results main section#search-box div#search-categories span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-categories span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-categories div#apparel-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.results main section#search-box div#search-categories div#accessory-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.results main section#search-box div#search-categories div#hermes-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }
body.results main section#search-box div#search-categories div#documentation-extra { width: 100% ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; margin-top: 1em ; }

body.results main section#search-box div#search-designers span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-designers span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-decades span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: initial ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-decades span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-materials span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-materials span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-patterns span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-patterns span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#search-box div#search-colors span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.results main section#search-box div#search-colors span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }

body.results main section#sale-list { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: space-between ; }

body.results main section#sale-list div { cursor: pointer ; background-size: cover ; background-position: center ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; width: 100% ; height: 20em ; position: relative ; margin-bottom: 0.5em ; }

body.results main section#sale-list div:hover { transform: scale(1.05, 1.05) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

body.results main section#sale-list div h3 { position: absolute ; bottom: 0 ; margin: 1em ; font-family: title ; font-size: 1.5em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.results main section#sale-list div h4 { position: absolute ; top: 0 ; margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.results main section#sale-list p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }

body.all-designers main section#cloud { margin: 1em ; }

body.all-designers main section#cloud span { cursor: pointer ; transform: scale(1) !important ; transition: 0.5s transform ease-in-out, 0.5s color ease-in-out !important ; }
body.all-designers main section#cloud span:hover { color: var(--color-timeline) !important ; }

body.timeline main section#decades { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.timeline main section#designers { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.timeline main section#decades span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; background-color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.timeline main section#decades span:hover { background-color: var(--color-bg) ; color: var(--color-title) ; }
body.timeline main section#decades span.selected { background-color: var(--color-timeline) !important ; }
body.timeline main section#decades span.selected:hover { background-color: var(--color-timeline)!important ; }

body.timeline main section#designers span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; cursor: pointer ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.timeline main section#designers span:hover { background-color: var(--color-title) ; color: var(--color-bg) ; }
body.timeline main section#designers span.active { display: block !important ; }
body.timeline main section#designers span:not(.active) { display: none !important ; }


body.sale main section#sale-infos { margin: 1em ; }

body.sale main section#sale-infos label { margin: 1em 0em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

body.sale main section#lot-list { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.sale main section#lot-list label { margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

/*body.sale main section#lot-list div.lot { cursor: pointer ; margin-right: 1em ; width: calc((100% - 7em) / 6) ; position: relative ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; margin-bottom: 5em ; }
body.sale main section#lot-list div.lot:nth-of-type(6n) { margin-left:1em ; }

body.sale main section#lot-list div:hover { transform: scale(0.95, 0.95) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

body.sale main section#lot-list div.lot img { object-fit: cover ; object-position: center ; width: 100% ; height: 100% ; }

body.sale main section#lot-list div.lot span.past { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }
body.sale main section#lot-list div.lot span.upcoming { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.sale main section#lot-list div.lot p.brand { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.sale main section#lot-list div.lot p.categories { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.sale main section#lot-list div.lot p.price { font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }

body.sale main section#lot-list p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }*/

body.lot main section#lot-infos { margin: 1em ; display: grid ; gap: 1em ; }

body.lot main section#lot-infos div#carousel { grid-area: carousel ; width: 100% ; display: flex ; justify-content: flex-start ; overflow: scroll ; }
body.lot main section#lot-infos div#carousel::-webkit-scrollbar { display: none ; }
body.lot main section#lot-infos div#active-image { grid-area: active-image ; text-align: center ; }
body.lot main section#lot-infos div#infos { grid-area: infos ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; align-content: flex-start ; background-color: var(--color-focus-bg) ; background-image: radial-gradient(var(--color-bg) 0.1em, transparent 0.1em) ; background-size: 1.5em 1.5em ; padding: 1em ; align-self: stretch ; }
body.lot main section#lot-infos div#description { grid-area: description ; }

body.lot main section#lot-infos div#infos.lot-alt { background-color: inherit ; background-image: none ; padding-top: 0 ; }
body.lot main section#lot-infos div#infos.lot-alt span { font-size: 1em ; font-weight: 400 ; padding: 0 ; width: 100% ; }
body.lot main section#lot-infos div#infos.lot-alt span.title { font-size: 2em ; font-weight: 800 ; }
body.lot main section#lot-infos div#infos.lot-alt span.subtitle { font-size: 1em ; font-weight: 800 ; }
body.lot main section#lot-infos div#infos.lot-alt span.list { display: flex ; flex-wrap: wrap ; justify-content: flex-start ; align-content: flex-start ; }
body.lot main section#lot-infos div#infos.lot-alt span.list span { margin: 0 ; width: 50% ; }
body.lot main section#lot-infos div#infos.lot-alt span.list span:nth-child(2n) { font-weight: 600 ; }
body.lot main section#lot-infos div#infos.lot-alt span span.large { font-size: 3em ; font-weight: 800 ; }

body.lot main section#lot-infos div#carousel img { cursor: pointer ; object-fit: contain ; filter: grayscale(100%) ; transition: filter 0.5s ease-in-out ; }
body.lot main section#lot-infos div#carousel img:hover { filter: grayscale(0%) ; }

body.lot main section#lot-infos div#active-image img { object-fit: contain ; max-width: 100% ; max-height: 100% ; }

body.lot main section#lot-infos div#infos label { display: block ;  width: 35% ; font-family: title ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; margin-top: 1.5em ; }
body.lot main section#lot-infos div#infos label:first-of-type { margin-top: 0 ; }

body.lot main section#lot-infos div#infos span { display: block ; width: 65% ; font-family: title ; font-weight: 600 ; text-transform: uppercase ; color: var(--color-title) ; margin-top: 1.5em ; padding-left: 1em ; }
body.lot main section#lot-infos div#infos span:first-of-type { margin-top: 0 ; }

body.lot main section#lot-infos div#infos span.eur { display: inline-block ; position: relative ; margin: 0.3em 0 0 3em ; width: 1em ; height: 1em ; cursor: pointer ; background-color: var(--color-text) ; border-radius: 50% ; background-size: 50% ; background-repeat: no-repeat ; background-position: 40% ; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 384 384' style='enable-background: new 0 0 384 384 ;' xml:space='preserve'><g><path d='M256,330.667c-53.44,0-99.84-30.293-122.987-74.667H256v-42.667H119.147c-1.067-6.933-1.813-14.08-1.813-21.333 s0.747-14.4,1.813-21.333H256V128H133.013C156.16,83.627,202.453,53.333,256,53.333c34.453,0,65.92,12.587,90.133,33.387 L384,49.067C350.08,18.667,305.173,0,256,0C172.48,0,101.547,53.44,75.2,128H0v42.667h65.28C64.427,177.707,64,184.747,64,192 s0.427,14.293,1.28,21.333H0V256h75.2c26.347,74.56,97.28,128,180.8,128c49.173,0,94.08-18.667,128-49.067l-37.867-37.76 C321.92,317.973,290.453,330.667,256,330.667z' fill='white' /></g></svg>") ; }
body.lot main section#lot-infos div#infos span.eur::before { content: '' ; position: absolute ; top: 1.8em ; left: 50% ; transform: translateX(-50%) translateY(-150%) scale(0) ; border: 0.2em solid transparent ; border-bottom-color: var(--color-text) ; transition: transform 0.3s ease-in-out ; transform-origin: bottom center ; }
body.lot main section#lot-infos div#infos span.eur::after { content: attr(data-value) ; position: absolute ; top: 2em ; left: 50% ; padding: 0.5em 1em ; text-align: center ; height: 1em ; width: max-content ; transform: translateX(-50%) scale(0) ; background-color: var(--color-text) ; font-family: title ; text-transform: uppercase ; color: var(--color-bg) ; font-size: 0.8em ; font-weight: 800 ; border-radius: 0.5em ; transition: transform 0.3s ease-in-out ; transform-origin: top center ; }
body.lot main section#lot-infos div#infos span.eur:hover::before { transform: translateX(-50%) translateY(-150%) scale(1) ; }
body.lot main section#lot-infos div#infos span.eur:hover::after { transform: translateX(-50%) scale(1) ; }
body.lot main section#lot-infos div#infos span.usd { display: inline-block ; position: relative ; margin: 0.3em 0 0 0.5em ; width: 1em ; height: 1em ; cursor: pointer ; background-color: var(--color-text) ; border-radius: 50% ; background-size: 50% ; background-repeat: no-repeat ; background-position: center ; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 339.004 339.004' style='enable-background: new 0 0 339.004 339.004 ;' xml:space='preserve'><path d='M262.122,232.344c0.197-26.82-10.405-48.031-31.552-63.01c-16.333-11.533-36.154-17.549-55.325-23.33 c-39.936-12.107-51.521-18.484-51.521-37.582c0-21.273,27.646-28.842,51.313-28.842c17.236,0,37.066,5.359,49.381,13.301 l24.415-37.812c-16.095-10.434-38.123-17.551-59.875-19.76V0H143.92v37.785c-40.035,8.807-65.255,34.973-65.255,70.637 c0,24.977,10.379,44.785,30.79,58.756c15.524,10.666,34.457,16.393,52.746,21.938c39.172,11.84,55.079,19.055,54.898,42.949 l-0.001,0.176c0,20.055-26.577,27.184-49.346,27.184c-21.508,0-44.897-9.426-58.155-23.441l-32.719,30.949 c16.79,17.758,41.184,30.313,67.041,35.234v36.838h45.039v-36.045C233.445,296.592,262.078,269.809,262.122,232.344z' fill='white' /></svg>") ; }
body.lot main section#lot-infos div#infos span.usd::before { content: '' ; position: absolute ; top: 1.8em ; left: 50% ; transform: translateX(-50%) translateY(-150%) scale(0) ; border: 0.2em solid transparent ; border-bottom-color: var(--color-text) ; transition: transform 0.3s ease-in-out ; transform-origin: bottom center ; }
body.lot main section#lot-infos div#infos span.usd::after { content: attr(data-value) ; position: absolute ; top: 2em ; left: 50% ; padding: 0.5em 1em ; text-align: center ; height: 1em ; width: max-content ; transform: translateX(-50%) scale(0) ; background-color: var(--color-text) ; font-family: title ; text-transform: uppercase ; color: var(--color-bg) ; font-size: 0.8em ; font-weight: 800 ; border-radius: 0.5em ; transition: transform 0.3s ease-in-out ; transform-origin: top center ; }
body.lot main section#lot-infos div#infos span.usd:hover::before { transform: translateX(-50%) translateY(-150%) scale(1) ; }
body.lot main section#lot-infos div#infos span.usd:hover::after { transform: translateX(-50%) scale(1) ; }

body.lot main section#lot-infos div#description { border: 0.1em solid var(--color-text-light) ; padding: 1em ; position: relative ; font-family: title ; text-transform: uppercase ; color: var(--color-text-light) ; font-size: 0.8em ; font-weight: 400 ; margin-top: 1em ; text-align: justify ; line-height: 1.5em ; }
body.lot main section#lot-infos div#description::before { content: attr(data-title) ; position: absolute ; top: 0 ; left: 50% ; width: max-content ; transform: translateY(-50%) translateX(-50%) ; background-color: var(--color-bg) ; padding: 0 0.5em ; font-family: title ; text-transform: uppercase ; color: var(--color-text-light) ; font-size: 1em ; font-weight: 800 ; }

body.lot main section#lot-infos:has(p.empty) { display: block ; }
body.lot main section#lot-infos p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }

body.lot main section#similar-items { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.lot main section#similar-items label { margin: 1em 0 ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

/*body.lot main section#similar-items div.lot { cursor: pointer ; margin-right: 1em ; width: calc((100% - 7em) / 6) ; position: relative ; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out ; z-index: initial ; }
body.lot main section#similar-items div.lot:first-of-type { margin-left:1em ; }

body.lot main section#similar-items div.lot:hover { transform: scale(0.95, 0.95) ; box-shadow: 0 0 2em var(--color-text) ; z-index: 11 ; }

body.lot main section#similar-items div.lot img { object-fit: cover ; object-position: center ; width: 100% ; height: 100% ; }

body.lot main section#similar-items div.lot span.past { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }
body.lot main section#similar-items div.lot span.upcoming { position: absolute ; right: 0 ; top: 0 ; margin: 1em ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; text-shadow: 0 0 0.2em var(--color-title) ; }

body.lot main section#similar-items div.lot p.brand { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.lot main section#similar-items div.lot p.categories { font-family: title ; font-size: 0.8em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }
body.lot main section#similar-items div.lot p.price { font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text) ; margin: 0.5em 0 ; }*/

body.account main section#alerts { margin: 1em ; display: grid ; gap: 1em ; }

body.account main section#alerts label { margin: 0 ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

body.account main section#alerts label#alert-types-label { display: block ; grid-area: type-label ; }

body.account main section#alerts div#alert-types { grid-area: type-elements ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.account main section#alerts div#alert-types span.active { display: block !important ; }
body.account main section#alerts div#alert-types span.selected { background-color: var(--color-timeline) !important ; }
body.account main section#alerts div#alert-types span.selected:hover { background-color: var(--color-timeline)!important ; }

body.account main section#alerts div#alert-types span { display: block ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; cursor: pointer ; background-color: var(--color-title) ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; margin-bottom: 0.5em ; }
body.account main section#alerts div#alert-types span:hover { background-color: var(--color-bg) ; color: var(--color-title) ; }

body.account main label { margin: 1em ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; width: 100% ; }

body.account main section#alerts div.alert { position: relative ; font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; }

body.account main section#alerts div.alert button { position: absolute ; top: -0.35em ; height: fit-content ; border: none ; background: none ; cursor: pointer ; opacity: 0 ; transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out ; }
body.account main section#alerts div.alert:hover button { opacity: 1 ; }
body.account main section#alerts div.alert:hover button:hover { color: var(--color-icons) ; }

body.account main div#add-alert { display: flex ; flex-direction: column ; gap: 0.5em ; }

body.account main div#add-alert > * { width: 20em ; }

body.account main div#add-alert input { display: block ; width: 100% ; -webkit-appearance: none ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; background-color: var(--color-bg) ; margin: 0 0.5em 0 0 ; padding: calc(1em - 3px) ; }

body.account main div#add-alert div#input-min-price { position: relative ; }
body.account main div#add-alert div#input-max-price { position: relative ; }

body.account main div#add-alert div#input-min-price span { position: absolute ; width: 100% ; top: 50% ; left: 0 ; padding: 0 1em ; transform: translateY(-50%) ; text-align: right ; font-family: title ; font-size: 0.4em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; user-select: none ; pointer-events: none ; }
body.account main div#add-alert div#input-max-price span { position: absolute ; width: 100% ; top: 50% ; left: 0 ; padding: 0 1em ; transform: translateY(-50%) ; text-align: right ; font-family: title ; font-size: 0.4em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-text-light) ; user-select: none ; pointer-events: none ; }

body.account main div#add-alert div.select-container { display: inline-block ; position: relative ; }
body.account main div#add-alert span.select-value { display: flex ; align-items: center ; justify-content: space-between ; width: 100% ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; background-color: var(--color-title) ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; margin-right: 0.5em ; padding: 1em ; cursor: pointer ; user-select: none ; }
body.account main div#add-alert div.select-container:focus > span.select-value { background-color: var(--color-bg) ; color: var(--color-title) ; outline: none ; }
body.account main div#add-alert span.select-value:hover { background-color: var(--color-bg) ; color: var(--color-title) ; }
body.account main div#add-alert span.select-value::after { content: "" ; display: inline-block ; border: 0.5em solid transparent ; border-top-color: var(--color-bg) ; transition: border-top-color 0.5s ease-in-out ; margin-left: 1em ; margin-top: 0.5em ; }
body.account main div#add-alert div.select-container:focus > span.select-value::after { border-top-color: var(--color-title) ; }
body.account main div#add-alert span.select-value:hover::after { border-top-color: var(--color-title) ; }
body.account main div#add-alert ul.select-options { display: none ; font-size: 0.8em ; border: 0.1em solid var(--color-text-light) ; border-radius: 0 !important ; border-top: none ; position: absolute ; padding: 0 ; margin: 0 ; width: 100% ; max-height: 30em ; overflow-y: auto ; z-index: 1 ; }
body.account main div#add-alert ul.select-options.show { display: block ; }
body.account main div#add-alert li.select-option { font-family: title ; font-size: 1em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-title) ; background-color: var(--color-bg) ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; padding: 1em ; cursor: pointer ; user-select: none ; }
body.account main div#add-alert li.select-option:hover { color: var(--color-title) ; background-color: var(--color-timeline) ; }
body.account main div#add-alert li.select-option.selected { color: var(--color-title) ; background-color: var(--color-timeline) ; }

body.account main div#add-alert button { display: block ; width: 25em ; padding: 1em ; border: 0.1em solid var(--color-title) ; font-family: title ; font-size: 0.8em ; font-weight: 800 ; text-transform: uppercase ; color: var(--color-bg) ; cursor: pointer ; background-color: var(--color-title) ; transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out ; }
body.account main div#add-alert button:hover { background-color: var(--color-bg) ; color: var(--color-title) ; }
body.account main div#add-alert button:disabled { background-color: transparent !important ; color: var(--color-title) !important ; cursor: default ; }
body.account main div#add-alert button:disabled:hover { background-color: transparent !important ; color: var(--color-title) !important ; }

body.account main section#like-list { margin: 1em ; display: flex ; flex-wrap: wrap ; justify-content: flex-start ; }

body.account main section#like-list p.empty { margin: 1em auto ; font-family: title ; font-size: 1.5em ; font-weight: 400 ; text-transform: uppercase ; color: var(--color-text) ; text-align: center ; }

body.legal main { margin: 1em ; font-family: title ; font-size: 1em ; line-height: 1.5 ; font-weight: 400 ; }

body.legal main h2, body.legal main h3 { line-height: 1 ; font-weight: 800 ; text-transform: uppercase ; padding-bottom: 1em ; }
body.legal main h2 { font-size: 2em ; text-align: center ; padding-top: 3em ; }
body.legal main h3 { padding-top: 1em ; }
body.legal main p, body.legal main ul { padding-bottom: 1em ; }
body.legal main p:has(+ ul) { padding-bottom: 0 ; }
body.legal main a { color: var(--color-text) ; font-weight: 600 ; }

footer { width: calc(100% - 2em) ; text-align: center ; font-family: title ; font-size: 0.8em ; font-weight: 400 ; color: var(--color-text-light) ; margin: 1em ; }

footer a { width: 100% ; color: var(--color-text-light) ; }

@media (min-width: 1024px) {
	header div#responsive-menu-button { display: none ; }

	/*header nav#icons > ul > li#search-icon { display: none ; }*/

	header div#search-overlay { margin-bottom: 5em ; border-top: 0.1em solid ; }

	header div#search-overlay div.lots { display: grid ; grid-template-columns: repeat(6, 1fr) ; gap: 1em ; }

	/*header div#search-overlay div.lot { margin-right: 1em ; height: 15em ; width: calc((100% - 7em) / 6) ; }*/

	header nav#menu > ul > li:not(.open) > ul { display: none ; }
	header nav#menu > ul > li.open > ul { display: block ; z-index: 99 ; }

	header nav#menu > ul > li > ul { position: absolute ; width: calc(100% - 2em) ; top: 9.4em ; left: 0 ; }

	body.home main {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
		grid-template-rows: 20em 20em 20em ;
		grid-template-areas:
			"banner1 banner1 banner2 banner2 banner3 banner3"
			"banner4 banner4 banner4 banner4 banner4 banner4"
			"banner5 banner5 banner5 banner6 banner6 banner6" ;
	}

	body.password main {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
		grid-template-rows: 20em 20em 20em ;
		grid-template-areas:
			"banner1 banner1 banner2 banner2 banner3 banner3"
			"banner4 banner4 banner4 banner4 banner4 banner4"
			"banner5 banner5 banner5 banner6 banner6 banner6" ;
	}

	body.search main section#search-box {
		grid-template-columns: 1fr 4fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto auto ;
		grid-template-areas:
			"timing-label timing-elements"
			"designers-label designers-elements"
			"houses-label houses-elements"
			"dates-label dates-elements"
			"categories-label categories-elements"
			"decades-label decades-elements"
			"materials-label materials-elements"
			"patterns-label patterns-elements"
			"colors-label colors-elements" ;
	}

	body.search main section#search-box label { padding-top: 0.6em ; }
	body.search main section#search-box label#search-dates-label { padding-top: 1.1em ; }

	body.search main section#lot-list { margin-bottom: 5em ; }

	body.search main section#lot-list div.lots { display: grid ; grid-template-columns: repeat(6, 1fr) ; gap: 1em ; }

	/*body.search main section#lot-list div.lot { margin-right: 1em ; height: 15em ; width: calc((100% - 7em) / 6) ; }*/

	body.upcoming main section#search-box {
		grid-template-columns: 1fr 4fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto ;
		grid-template-areas:
			"designers-label designers-elements"
			"houses-label houses-elements"
			"dates-label dates-elements"
			"categories-label categories-elements"
			"decades-label decades-elements"
			"materials-label materials-elements"
			"patterns-label patterns-elements"
			"colors-label colors-elements" ;
	}

	body.upcoming main section#search-box label { padding-top: 0.6em ; }
	body.upcoming main section#search-box label#search-dates-label { padding-top: 1.1em ; }

	body.upcoming main section#sale-list div.triple-item { width: calc((100% - 1em) / 3) ; }
	body.upcoming main section#sale-list div.double-item { width: calc((100% - 0.5em) / 2) ; }
	body.upcoming main section#sale-list div.single-item { width: calc(100%) ; }

	body.results main section#search-box {
		grid-template-columns: 1fr 4fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto ;
		grid-template-areas:
			"designers-label designers-elements"
			"houses-label houses-elements"
			"dates-label dates-elements"
			"categories-label categories-elements"
			"decades-label decades-elements"
			"materials-label materials-elements"
			"patterns-label patterns-elements"
			"colors-label colors-elements" ;
	}

	body.results main section#search-box label { padding-top: 0.6em ; }
	body.results main section#search-box label#search-dates-label { padding-top: 1.1em ; }

	body.results main section#sale-list div.triple-item { width: calc((100% - 1em) / 3) ; }
	body.results main section#sale-list div.double-item { width: calc((100% - 0.5em) / 2) ; }
	body.results main section#sale-list div.single-item { width: calc(100%) ; }

	body.all-designers main section#cloud { height: 35em ; }

	body.sale main section#lot-list { margin-bottom: 5em ; }

	body.sale main section#lot-list div.lots { display: grid ; grid-template-columns: repeat(6, 1fr) ; gap: 1em ; }

	/*body.sale main section#lot-list div.lot { margin-right: 1em ; height: 15em ; width: calc((100% - 7em) / 6) ; }*/

	body.lot main section#lot-infos {
		grid-template-columns: 1fr 6fr 5fr ;
		grid-template-rows: 1fr auto  ;
		grid-template-areas: "carousel active-image infos" "carousel active-image description" ;
	}

	body.lot main section#lot-infos div#carousel { flex-direction: column ; height: 30em ; }
	body.lot main section#lot-infos div#active-image { max-height: 30em ; }

	body.lot main section#lot-infos div#carousel img { max-width: 100% ; margin-top: 0.5em ; }
	body.lot main section#lot-infos div#carousel img:first-of-type { margin-top: 0 ; }

	body.lot main section#similar-items { margin-bottom: 5em ; }
	
	body.lot main section#similar-items div.lots { display: grid ; grid-template-columns: repeat(6, 1fr) ; gap: 1em ; }

	/*body.lot main section#similar-items div.lot { margin-right: 1em ; height: 15em ; width: calc((100% - 7em) / 6) ; }*/

	body.account main section#alerts {
		grid-template-columns: 1fr 4fr ;
		grid-template-rows: auto ;
		grid-template-areas:
			"type-label type-elements" ;
	}

	body.account main section#alerts label { padding-top: 0.6em ; }

	body.account main section#alerts label.alert-list-label { padding-top: 0 ; }

	body.account main section#like-list { margin-bottom: 5em ; }

	body.account main section#like-list div.lots { display: grid ; grid-template-columns: repeat(6, 1fr) ; gap: 1em ; }

	body.legal main h2, body.legal main h3, body.legal main p, body.legal main ul { width: 50vw ; margin: auto ; }
}

@media (max-width: 1023px) {
	header { position: fixed ; flex-wrap: nowrap ; top: 0 ; left: 0 ; }

	/*header nav#icons { position: fixed ; bottom: 1em ; left: 50% ; transform: translateX(-50%) ; width: 100% ; margin: 0 ; padding: 0 ; text-align: center ; z-index: 100 ; }*/
	header nav#icons { height: 2em ; margin: auto 0 1.25em 1em ; width: 100% ; }

	/*header nav#icons { opacity: 0 ; pointer-events: none ; transition: opacity 0.1s ease-in-out 0s ; }
	header nav#icons.open { opacity: 1 ; pointer-events: initial ; transition: opacity 0.1s ease-in-out 0.5s ; }

	header nav#icons > div#search-field { display: none ; }*/
	header nav#icons > div#search-field { flex-shrink: 1 ; width: min(100%, 12em) ; min-width: 2em ; margin-left: auto ; }

	/*header nav#icons > ul { opacity: 0 ; pointer-events: none ; transition: opacity 0.1s ease-in-out 0s ; }
	header nav#icons.open > ul { opacity: 1 ; pointer-events: initial ; transition: opacity 0.1s ease-in-out 0.5s ; }*/

	/*header nav#icons > ul > li#search-field { display: none ; }*/
	header nav#icons > ul > li#search-field { flex-grow: 1 ; flex-shrink: 1 ; }

	header #account-icon { width: max-content ; flex-grow: 0 ; flex-shrink: 0 ; }

	header div#search-overlay { position: fixed ; inset: 6em 0 0 0 ; margin: 0 ; padding: 1em ; overflow-y: scroll ; width: 100% ; }
	
	/*header div#search-overlay div.lot { margin: 1em ; height: 30em ; width: 100% ; margin-bottom: 5em ; }*/

	header nav#menu { height: 0 ; overflow-y: hidden ; transition: height 0.5s ease-in-out 0.1s ; position: absolute ; top: 6em ; background-color: var(--color-bg) ; z-index: 99 ; }
	header nav#menu.open { height: /*calc(100vh - 6em)*/8rem ; transition: height 0.5s ease-in-out 0s ; }

	header nav#menu > ul { flex-direction: column ; }

	header nav#menu > ul > li { display: block ; border-right: 0.1em solid ; border-bottom: none ; }
	header nav#menu > ul > li:last-of-type { border-bottom: 0.1em solid ; }
	header nav#menu > ul > li#menu-auctions { background-color: var(--color-auctions) ; }
	header nav#menu > ul > li#menu-designers { background-color: var(--color-designers) ; }
	header nav#menu > ul > li#menu-timeline { background-color: var(--color-designers) ; }
	header nav#menu > ul > li#menu-advance-search { background-color: var(--color-search) ; }

	header nav#menu > ul > li > span.menu-title { display: none ; }
	header nav#menu > ul > li#menu-auctions { display: none ; }

	header nav#menu > ul > li > ul { display: block ; margin: 0 ; padding: 0 ; }

	header nav#menu > ul > li > ul > li { padding-left: 0 ; margin-left: 0 ; }
	header nav#menu > ul > li > ul > li:first-of-type { padding-top: 0 ; margin-top: 0 ; }
	header nav#menu > ul > li > ul > li:last-of-type { padding-bottom: 0 ; margin-bottom: 0 ; }

	body.home main {
		margin-top: 6em ;
		grid-template-columns: 1fr ;
		grid-template-rows: 20em 20em 20em 20em 20em 20em ;
		grid-template-areas: "banner1" "banner2" "banner3" "banner4" "banner5" "banner6" ;
	}

	body.password main {
		margin-top: 6em ;
		grid-template-columns: 1fr ;
		grid-template-rows: 20em 20em 20em 20em 20em 20em ;
		grid-template-areas: "banner1" "banner2" "banner3" "banner4" "banner5" "banner6" ;
	}

	body.search main { margin-top: 6em ; }

	body.search main section#search-box {
		grid-template-columns: 1fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto ;
		grid-template-areas: "timing-label" "timing-elements" "designers-label" "designers-elements" "houses-label" "houses-elements" "dates-label" "dates-elements" "categories-label" "categories-elements" "decades-label" "decades-elements" "materials-label" "materials-elements" "patterns-label" "patterns-elements" "colors-label" "colors-elements" ;
	}

	body.upcoming main { margin-top: 6em ; }

	body.upcoming main section#search-box {
		grid-template-columns: 1fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto ;
		grid-template-areas: "designers-label" "designers-elements" "houses-label" "houses-elements" "dates-label" "dates-elements" "categories-label" "categories-elements" "decades-label" "decades-elements" "materials-label" "materials-elements" "patterns-label" "patterns-elements" "colors-label" "colors-elements" ;
	}

	body.upcoming main section#search-box label { margin-top: 1em ; }
	body.upcoming main section#search-box label:first-of-type { margin-top: 0 ; }

	body.results main { margin-top: 6em ; }

	body.results main section#search-box {
		grid-template-columns: 1fr ;
		grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto ;
		grid-template-areas: "designers-label" "designers-elements" "houses-label" "houses-elements" "dates-label" "dates-elements" "categories-label" "categories-elements" "decades-label" "decades-elements" "materials-label" "materials-elements" "patterns-label" "patterns-elements" "colors-label" "colors-elements" ;
	}

	body.results main section#search-box label { margin-top: 1em ; }
	body.results main section#search-box label:first-of-type { margin-top: 0 ; }

	body.all-designers main { margin-top: 6em ; }
	
	body.all-designers main section#cloud { height: calc(100vh - 16em) ; }

	body.timeline main { margin-top: 6em ; }

	body.search header { height: initial ; }

	body.search main section#tag-list { top: 5em ; }

	body.search main section#lot-count { top: 5em ; }

	body.search main section#search-box { margin: 8em 1em 1em 1em ; }

	body.search main section#search-box label { margin-top: 1em ; }
	body.search main section#search-box label:first-of-type { margin-top: 0 ; }

	body.search main section#lot-list div.lots { display: grid ; grid-template-columns: repeat(1, 1fr) ; gap: 1em ; }

	/*body.search main section#lot-list div.lot { margin: 1em ; height: 30em ; width: 100% ; margin-bottom: 5em ; }*/

	body.sale main section#lot-list div.lots { display: grid ; grid-template-columns: repeat(1, 1fr) ; gap: 1em ; }

	/*body.sale main section#lot-list div.lot { margin: 1em ; height: 30em ; width: 100% ; margin-bottom: 5em ; }*/

	body.lot main { margin-top: 6em ; }

	body.lot main section#lot-infos {
		grid-template-columns: 1fr ;
		grid-template-rows: auto auto auto auto ;
		grid-template-areas: "active-image" "carousel" "infos" "description" ;
	}

	body.lot main section#lot-infos div#carousel { flex-direction: row ; height: 5em ; }

	body.lot main section#lot-infos div#carousel img { max-height: 100% ; margin-left: 0.5em ; }
	body.lot main section#lot-infos div#carousel img:first-of-type { margin-left: 0 ; }

	body.lot main section#lot-infos div#infos span.eur { display: none ; }
	body.lot main section#lot-infos div#infos span.usd { display: none ; }

	body.lot main section#similar-items div.lots { display: grid ; grid-template-columns: repeat(1, 1fr) ; gap: 1em ; }

	/*body.lot main section#similar-items div.lot { margin: 1em ; height: 30em ; width: 100% ; margin-bottom: 5em ; }*/

	body.account main { margin-top: 6em ; }

	body.account main section#alerts {
		grid-template-columns: 1fr ;
		grid-template-rows: auto auto ;
		grid-template-areas: "type-label" "type-elements" ;
	}

	body.account main section#alerts label { margin-top: 1em ; }
	body.account main section#alerts label:first-of-type { margin-top: 0 ; }

	body.account main section#alerts label.alert-list-label { display: none ; }

	body.account main section#alerts div.alert button { opacity: 1 ; }

	body.account main div#add-alert > * { width: 100% ; }
	body.account main div#add-alert > button { width: 100% ; }

	body.account main section#like-list div.lots { display: grid ; grid-template-columns: repeat(1, 1fr) ; gap: 1em ; }

	body.legal main h2, body.legal main h3, body.legal main p, body.legal main ul { width: 100vw ; margin: auto ; }
}