@charset "UTF-8"; /* CSS Document */ @font-face { font-family: 'Domaine'; src: url('files/fountain/DomaineTextWeb-Bold.woff2') format('woff2'), url('files/fountain/DomaineTextWeb-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Domaine'; src: url('files/fountain/DomaineTextWeb-BoldItalic.woff2') format('woff2'), url('files/fountain/DomaineTextWeb-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Domaine'; src: url('files/fountain/DomaineTextWeb-Regular.woff2') format('woff2'), url('files/fountain/DomaineTextWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Domaine'; src: url('files/fountain/DomaineTextWeb-RegularItalic.woff2') format('woff2'), url('files/fountain/DomaineTextWeb-RegularItalic.woff') format('woff'); font-weight: normal; font-style: italic; } :root { --yellow: #F0AB00; --yellow50: #F7D580; --yellow40: #F9DD99; --yellow30: #FBE6B3; --warmgray: #766A65; --warmgray50: #BAB4B2; --warmgray40: #C8C3C1; --warmgray30: #D6D2D1; --warmgray20: #E4E1E0; --warmgray15: #EBE9E8; --warmgray10: #F1F0F0; } * { box-sizing: border-box !important; } html, body { margin: 0 !important; padding: 0 !important; background-color: #FFF; color: #000; } img { border: none; display: block; } a { color: #000; text-decoration: underline; } a:visited { color: #000; } a:hover { color: #000; text-decoration: underline; } a.colored { color: var(--yellow) !important; text-decoration: none; } a.colored:visited { color: var(--yellow) !important; } a.colored:hover { color: #000000 !important; text-decoration: none; } .nolink > a { text-decoration: none; font-weight: bold; pointer-events: none; cursor: default; } .formobile { display: flex !important; } .fordesktop { display: none !important; } /* ———————————————————————————————————————————————————————————————————————————————————— TYPOGRAPHY ———————————————————————————————————————————————————————————————————————————————————— */ body, .flickity-prev-next-button { font-family: "proxima-nova", sans-serif; } .postscript .text-large, .tagline p, .news h1, .hp-fresh h2, .tile-wall-news h3, .slide-text, .intro-text { font-family: "Domaine", serif; } body { font-size: 18px; line-height: 1.50em; font-weight:normal; font-style: normal; } #header-top { font-size: 12px; line-height: 1.00em; letter-spacing: 0.075em; text-transform: uppercase; } #header-bottom { font-size: 14px; line-height: 1.00em; letter-spacing: 0.025em; text-transform: uppercase; } .eyebrow { font-size: 16px; line-height: 1.50em; letter-spacing: 0.025em; } .intro-summary { font-size: 16px; line-height: 1.30em; letter-spacing: 0.025em; } .controls * { font-size: 16px; } .intro-text { font-size: 19px; } .preface .text-large { font-size: 24px; line-height: 1.50em; } .postscript .text-large { font-size: 24px; line-height: 1.50em; } .content-full .text-large { font-size: 24px; line-height: 1.50em; } figcaption { font-size: 14px; line-height: 1.50em; } .siblings { font-size: 14px; line-height: 1.25em; } .slide-subject { letter-spacing: 0.025em; text-transform: uppercase; } .slide-text { font-size: 36px; line-height: 1.25em; font-weight: bold; } .tagline p { font-size: 48px; line-height: 1.00em; font-weight: bold; font-style: italic; } #colophon { font-size: 12px; line-height: 1.00em; letter-spacing: 0.075em; } h1 { font-size: 1.50em; line-height: 1.25em; letter-spacing: 0.025em; font-weight: normal; } h2 { line-height: 1.25em; letter-spacing: 0.025em; font-weight: normal; } h3 { line-height: 1.25em; letter-spacing: 0.025em; font-weight: normal; } h4 { line-height: 1.25em; letter-spacing: 0.075em; font-weight: bold;} h4 p { font-size: 1rem; letter-spacing: normal; font-weight: normal; color: #999; } #filtered-results h3 { font-weight: bold; } #filtered-results h3 .subtitle { font-weight: normal; } .resource-info h1 { font-weight: bold; } .resource-info h1 .subtitle { font-weight: normal; } .news h1 { line-height: 1.25em; letter-spacing: 0em; } .tile-wall-pages h2 { font-size: 1.50em; } .postscript h4 { font-weight: normal; } .pagination-toolbox, .flickity-prev-next-button { font-size: 14px; line-height: 1.00em; letter-spacing: 0.025em; } .button-regular { font-size: 14px; line-height: 22px; letter-spacing: 0.050em; } .button-large { font-size: 18px; line-height: 34px; letter-spacing: 0.050em; } .hp-featlinks { font-size: 16px; line-height: 1.25em; } .hp-featlinks li:first-of-type { font-weight: bold; } .suspended-label { font-size: 18px; line-height: 0.00em; } .last-call { line-height: 1em; } /* ———————————————————————————————————————————————————————————————————————————————————— STRUCTURE ———————————————————————————————————————————————————————————————————————————————————— */ body { margin-bottom: 0 !important; } .main-grid { margin: 0; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; grid-template-rows: auto; } .half-grid { margin: 0; padding:0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; grid-template-rows: auto; } .main-grid.accordion-block { gap: 0px 20px; } .site-main { margin: 0; padding: 0; } /* ———————————————————————————————————————————————————————————————————————————————————— HEADER & NAV ———————————————————————————————————————————————————————————————————————————————————— */ #masthead { width: 100%; height: auto; margin: 0; padding: 0; position: fixed; top: 0; left: 0; z-index: 800 !important; } #header-top { width: 100%; height: 40px; margin: 0; padding: 0 20px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; background-color: #000; z-index: 9999 !important; position: relative; } #header-bottom { width: 100%; height: auto; margin: 0; padding: 0; position: relative; background-color: #FFF; box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.3); } /* **************** MENU TOP */ #menu-top { width: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; list-style: none; gap: 10px; } #menu-top li { margin: 0; padding: 0; } #menu-top li:last-of-type { margin: 0; padding: 0 0 0 10px; border-left: solid 1px var(--warmgray20); } #menu-top a { margin: 0; padding: 0; color: var(--warmgray20); text-decoration: none; } #menu-top a:hover, #menu-top .current-menu-item a, #menu-top .current-menu-item a:hover, #menu-top .current-menu-parent a, #menu-top .current-menu-parent a:hover, #menu-top .current-category-ancestor a, #menu-top .current-category-ancestor a:hover { color: var(--yellow); text-decoration: none; } #menu-top .icon-search { position:relative; width: 15px; height: 15px; cursor: pointer; display: none; } #menu-top .icon-search::before { content: ""; position:absolute; top: 0; left: 0; height: 12px; width: 12px; border-radius: 30px; border: 2px solid var(--warmgray20); pointer-events: none; } #menu-top .icon-search::after { content: ""; position:absolute; top: 11px; left: 9px; height: 2px; width: 6px; background: var(--warmgray20); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; } #menu-top .icon-search:hover::before, #menu-top .icon-search.active::before { border-color: var(--yellow); } #menu-top .icon-search:hover::after, #menu-top .icon-search.active::after { background-color: var(--yellow); } #menu-top .icon-search a { position: relative; width: 100%; height: 100%; color: rgba(0, 0, 0, 0) !important; overflow: hidden; } /* **************** MAIN NAVIGATION */ .main-navigation { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; } .main-navigation ul { display: none; } .main-navigation.toggled ul, .menu-toggle { display: flex; } .site-branding { width: auto; height: 80px; margin: 0 auto 0 0; padding: 10px 20px; display: flex; align-items: center; justify-content: center; } .site-branding img { width: auto; height: 90%; display: inline-block; } #menu-main { width: 100%; margin: 0; padding: 40px 20px; list-style: none; flex-direction: column; flex-basis: 100%; gap: 20px; } #menu-main > li { width: auto; margin: 0; padding: 0; flex-basis: 100%; } #menu-main > li > a { color: #000; text-decoration: none; font-weight: bold; pointer-events: none; } .sub-menu { margin: 10px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .sub-menu li { width: 100%; margin: 0 ; padding: 0 30px; } .sub-menu a { color: #000; text-decoration: none; font-weight: normal !important; padding-bottom: 3px; display: inline-block; } .sub-menu a:hover, .sub-menu .current-menu-item a, .sub-menu .current-menu-item a:hover, .sub-menu .current-page-ancestor a, .sub-menu .current-page-ancestor a:hover, .single-protocols .sub-menu .menu-item-3412 a { color: #000; text-decoration: none; padding-bottom: 2px; border-bottom: solid 1px #000; } /* **************** MAIN NAVIGATION BUTTONS */ .search-toggle { width: 80px; height: 80px; margin: 0; padding: 0; border: none; border-left: solid 1px #000; } .search-toggle .icon-search { width: 100%; height: 100%; margin: 0; padding: 0; position:relative; display: flex; cursor: pointer; display: flex; align-items: center; justify-content: center; } .search-toggle .icon-search::before { content: ""; position:absolute; top: 31px; left: 31px; height: 13px; width: 13px; border-radius: 30px; border: 2px solid #000; pointer-events: none; } .search-toggle .icon-search::after { content: ""; position:absolute; top: 43px; left: 40px; height: 2px; width: 7px; background: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; } .search-toggle .icon-search:hover::before, .icon-search.active::before { border-color: var(--yellow); } .search-toggle .icon-search:hover::after, .icon-search.active::after { background-color: var(--yellow); } .search-toggle .icon-search a { position: relative; width: 100%; height: 100%; color: rgba(0, 0, 0, 0) !important; overflow: hidden; } .menu-toggle { width: 80px; height: 80px; margin: 0 !important; padding: 0 !important; border: none; border-left: solid 1px #000; border-radius: 0; background-color: transparent; } .menu-toggle:focus, .menu-toggle:hover { border-left: solid 1px #000 !important; outline: none !important; } .menu-toggle #menu-icon { cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content:center; width: 100%; height: 100%; transition: all .2s ease-in-out, background-color 1ms; -moz-transition: all .2s ease-in-out, background-color 1ms; -webkit-transition: all .2s ease-in-out, background-color 1ms; } .menu-toggle #menu-icon:after, .menu-toggle #menu-icon:before, .menu-toggle #menu-icon span { display: block !important; transition: all .2s ease-in-out, background-color 1ms; -moz-transition: all .2s ease-in-out, background-color 1ms; -webkit-transition: all .2s ease-in-out, background-color 1ms; content: ''; margin: 2px 0; height: 2px; width: 20px; background-color: #000; } .main-navigation.toggled #menu-icon:before { transform: translateY(6px) rotate(135deg); -webkit-transform: translateY(6px) rotate(135deg); -moz-transform: translateY(6px) rotate(135deg); } .main-navigation.toggled #menu-icon:after { transform: translateY(-6px) rotate(-135deg); -moz-transform: translateY(-6px) rotate(-135deg); -webkit-transform: translateY(-6px) rotate(-135deg); } .main-navigation.toggled #menu-icon span { transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); } /* ———————————————————————————————————————————————————————————————————————————————————— CONTENT ———————————————————————————————————————————————————————————————————————————————————— */ header.firstlevel { width: 100%; height: auto; margin: 0; padding-top: 2em; padding-bottom: 1.75em; background-color: var(--warmgray15); text-transform: uppercase; } header.firstlevel h1 { margin: 0; padding: 0; grid-column: 1 / span 4; text-align: center; } header.secondlevel { width: 100%; height: auto; margin: 0; padding-top: 2em; padding-bottom: 0; background-color: #FFF; } header.secondlevel .page-title { margin: 0; padding: 0; grid-column: 1 / span 4; } header.secondlevel h1 { margin: 0; padding: 0; text-align: left; } figure img { width: 100%; height: auto; } figure figcaption { margin: 0; padding: 5px 0; text-align: left; color: var(--warmgray); } .content-block { margin: 0; padding-top: 6em; padding-bottom: 6em; } .content-block + .content-block { padding-top: 0; } .the-content { margin: 0; padding: 0; grid-column: 1 / span 4; } .the-content p:first-of-type { margin-top: 0; } .the-content p:last-of-type { margin-bottom: 0; } .content-wide { margin:0; padding-top: 3em; padding-bottom: 3em; } .content-wide .the-label { margin: 0; padding: 0; grid-column: 1 / span 4; } .content-wide .the-label h4 { margin-top: 0; } .content-wide .the-content { margin: 0; padding: 0; grid-column: 1 / span 4; } .content-full { margin:0; padding-top: 6em; padding-bottom: 6em; background-color: var(--yellow); background: linear-gradient(0deg, rgb(240,171,0) 0%, rgb(245,196,77) 100%); } .content-full .the-content { margin: 0; padding: 0; grid-column: 3 / span 8; } .contacts-block { margin: 0; padding-top: 4em; padding-bottom: 4em; } .contacts-block + .contacts-block { padding-top: 0; } .accordion-block + .liner + .contacts-block { padding-top: 2em; } .contacts-block h4 { grid-column: 1 / span 4; margin: 0; } .contacts-block h4 p { margin-bottom: 0; margin-top: 0.5em; } .the-contact { grid-column: 1 / span 4; } .the-contact p:first-of-type { margin-top: 0; } .the-contact p:last-of-type { margin-bottom: 0; } .related-block { margin: 0; padding-top: 4em; padding-bottom: 8em; } .related-block ul { margin: 0; padding: 0; grid-column: 4 / span 6; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .related-block ul li { margin: 0; padding: 0; border: solid 1px #CCC;} .related-block ul a { margin: 0; padding: 20px; height: 100%; text-decoration: none; display: flex; flex-direction: column; } .related-block ul a:hover { background-color: var(--yellow); } .related-block ul h3 { height: 100px; margin: 0; } .related-block ul p:first-of-type { margin-top: 0; } .related-block ul p:last-of-type { margin-bottom: 0; } .related-block ul .more { display: block; margin-top: auto; padding-top: 1em; color: var(--warmgray); } .links-block { margin: 0; padding-top: 4em; padding-bottom: 4em; } .links-block h4 { grid-column: 1 / span 6; margin-top: 0; } .links-block .the-list { grid-column: 1 / span 6; } .single-protocols .links-block h4 { grid-column: 1 / span 4; } .single-protocols .links-block .the-list { grid-column: 1 / span 4; } .docs-block { margin: 0; padding-top: 4em; padding-bottom: 4em; } .docs-block h4 { grid-column: 1 / span 4; margin-top: 0; } .docs-block .the-list { grid-column: 1 / span 4; } .single-protocols .docs-block h4 { grid-column: 1 / span 4; } .single-protocols .docs-block .the-list { grid-column: 1 / span 4; } .links-block + .liner + .docs-block { padding-top: 0; } .infography-block { margin: 0; padding: 0 40px; } .infography-block div { display: none; } .infography-block div.infogram-embed { display: flex; margin: 0; padding: 0; grid-column: 4 / span 6; } /* GALLERY */ .gallerysection-block { margin: 0; padding-top: 0; padding-bottom: 6em; row-gap: 0; } .gallerysection { margin: 0; padding: 2em 0 0 0; grid-column: 1 / span 4; border-top: solid 1px #000; display: grid; gap: 20px; } .gallerysection + .gallerysection { margin-top: 2em; } .gallerysection-images { margin: 0; padding: 0; grid-row: 1; } .gallerysection-info { margin: 0; padding: 0; grid-row: 2; } .gallerysection .content { margin: 0; padding: 0; } .gallerysection .content p:first-child { margin-top: 0; } .gallerysection .content p:last-child { margin-bottom: 0; } .gallerysection .buttons-group { margin: 0; padding: 40px 0 0 0; flex-direction: column; } /* ACCORDION BLOCK */ .accordion-block { margin: 0; padding-top: 4em; padding-bottom: 4em; } .content-block + .accordion-block, .content-full + .accordion-block { padding-top: 0; } .accordion-block + .buttons-block { margin-top: 2em; } /* BUTTONS BLOCK */ .buttons-block { margin: 0; padding-top: 6em; padding-bottom: 6em; background-color:var(--yellow); } .buttons-block-text { margin: 0; padding: 0; grid-column: 1 / span 4; text-align: center; } .buttons-block .buttons-group { margin: 0; padding: 0; grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: center; } .buttons-block .buttons-block-text + .buttons-group { margin-top: 2em; } .epigraph { margin: 0; padding-top: 6em; padding-bottom: 6em; } .epigraph h2 { grid-column: 3 / span 5;} .epigraph div { grid-column: 3 / span 5;} .epigraph p:first-of-type { margin-top: 0; } .epigraph p:last-of-type { margin-bottom: 0; } .contacts-block:last-child, .links-block:last-child, .docs-block:last-child, .accordion-block:last-child { margin-bottom: 4em !important; } .eyebrow { margin: 0; padding: 0; display: inline-block; } .eyebrow span::after { content: ","; } .eyebrow span:last-of-type::after { content: ""; } .eyebrow a { text-decoration: none; } .eyebrow a:hover { text-decoration: underline; } .eyebrow + h1 { margin-top: 0px; } .eyebrow + h2 { margin-top: 5px; } .eyebrow + h3 { margin-top: 15px; } /* **************** INTRO */ .intro { margin: 0; padding-top: 2em; padding-bottom: 2em; color: #000000; background-color: var(--yellow); background: linear-gradient(0deg, rgb(240,171,0) 0%, rgb(245,196,77) 100%); } .intro-title { margin: 0; padding: 0; grid-row: 1; grid-column: 1 / span 4; text-transform: uppercase; } .intro-title h1 { margin-top: 0; margin-bottom: 5px; } .intro-text { margin: 0; padding: 0; grid-row: 2; grid-column: 1 / span 4; } .intro-docs { margin: 0; padding: 2em 0 0 0; grid-row: 4; grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 20px; } .intro-docs:empty { display: none !important; } .intro-summary { margin: 0; padding: 2em 0 0 0; grid-row: 3; grid-column: 1 / span 4; display: table; } .intro-summary ul { margin: 0; padding: 0; list-style: none; display: table-row; } .intro-summary ul:first-of-type li { padding-top: 0; } .intro-summary li { margin: 0; padding: 10px 10px 10px 0; border-bottom: solid #000 1px; display: table-cell; } .intro-summary li:first-of-type { font-weight: bold; white-space: nowrap; } .intro-summary li:nth-child(2) { border-bottom: none; width: 20px; } /* **************** LINERS */ .liner, .liner-wide { margin-top: 0; margin-bottom: 0; display: none; } .liner div { margin:0; padding: 0; border-top: solid 1px #000; grid-column: 1 / span 4; } .liner-wide div { margin:0; padding: 0; border-top: solid 1px #000; grid-column: 1 / span 4; } .single-protocols .liner div { grid-column: 1 / span 4; } header + .liner, header + .liner-wide, section + .liner, section + .liner-wide { display: grid !important; } .accordion-block + .liner, .accordion-block + .liner-wide, .links-block + .liner, .buttons-block + .liner, header + .liner { display: none !important; } hr { border-top: dashed 1px #666666; border-bottom: none; margin: 3em 0; background-color: transparent; } /* **************** VIDEO */ .video-wrapper { width: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; } .video-wrapper iframe { width: 100%; display: block; } .featured-video .video-wrapper { grid-column: 3 / span 8; } /* ———————————————————————————————————————————————————————————————————————————————————— LISTS ———————————————————————————————————————————————————————————————————————————————————— */ ul { margin: 0; margin-left: 0em; padding-left: 1em; list-style: disc; } ul ul { margin: 0; margin-left: 2em; padding-left: 1em; list-style: circle; } ol.nested { margin: 0; padding: 0; list-style-type: none; counter-reset: item; } ol.nested > li { margin-bottom: 1em; display: table; counter-increment: item; } ol.nested > li:before { padding-right: 0.6em; display: table-cell; content: counters(item, ".") ". "; } ol.nested ol.nested > li { margin: 0; } ol.nested ol.nested > li:before { padding-right: 0.6em; content: counters(item, ".") " "; } ol ol li:first-child h4 { margin-top: 0; } /* **************** TILE-WALL */ .tile-wall { width: 100%; height: auto; margin: 0; padding: 0; position: relative; border-top: solid 1px #000; display: grid; grid-template-columns: repeat(1, 1fr); gap: 0; background-repeat: no-repeat; background-position: center bottom; list-style: none; } .tile { width: 100%; height: auto; margin: 0; padding: 0; position: relative; border-bottom: solid 1px #000 !important; z-index: 1 !important; background-color: #FFF; } .tile-frame { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; text-decoration: none; } .tile-frame:hover { background-color: var(--yellow); text-decoration: none; } .tile-frame.suspended-status { color: #999; } .tile-frame.suspended-status:hover { color: #000; } .half-tile { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; } .half-tile:first-of-type { padding: 40px 20px 20px 20px; } .half-tile:last-of-type { padding: 20px 20px 40px 20px; } .half-tile h2 { margin: 0; padding: 0; } .half-tile p { margin: 0 !important; padding: 0; } .half-tile .suspended-label { margin: 10px 0 0 0; padding: 0; display: block; } .half-tile .last-call { margin: 20px 0 0 0; padding: 0; display: block; justify-self: flex-end; } .tile-thumb { height: 50vw; background-position: center center; background-size: cover; background-color: #F5C44D; } .tile-frame:hover .tile-thumb { background-color: transparent; } .tile-thumb + .half-tile { padding: 40px 20px; } .tile-wall-news h3 { margin-bottom: 0; } .randomPatternMiddle, .randomPatternLast { margin: 0 auto; position: absolute; bottom: 0; width: 33.33%; width: calc(100% / 3); height: auto; z-index: 0 !important; display: inline-block; } .randomPatternMiddle { right: 50%; transform: translate(50%, 0);} .randomPatternLast { right: 0; } /* **************** TILE-WALL-SMALL */ .tile-small-wall { list-style: none; width: 100%; height: auto; margin: 0; padding: 0; position: relative; border-top: solid 1px #000; display: grid; grid-template-columns: repeat(1, 1fr); gap: 0; } .tile-small { margin: 0; padding: 0; border-bottom: solid 1px #000; display: flex; } .tile-small a { width: 100%; height:100%; margin: 0; padding: 20px; text-decoration: none; } .tile-small a:hover { text-decoration: none; background-color: var(--yellow); } .tile-small h2 { margin-bottom: 0;} .tile-small.copay a { background-color: var(--yellow30); } .tile-small.copay a:hover { background-color: var(--yellow); } /* **************** THE-LIST */ .the-list { margin: 0; padding: 0; display: table; border-top: solid 1px var(--yellow); border-bottom: solid 1px var(--yellow); } .the-list ul { margin: 0; padding: 0; list-style: none; display: table-row; } .the-list ul:hover li { background-color: #F8F8F7; /*background-color: #FDF2D9;*/ } .the-list li { margin: 0; padding: 10px 0; display: table-cell; border-top: solid 1px var(--yellow); } .the-list ul:first-of-type li { border-top: none !important; } .the-list li.empty { border-top: none !important; } .the-list li.link { text-align: right; } .the-list a { color: var(--yellow); text-decoration: none; align-self: flex-end; } .the-list a:hover { text-decoration: underline; } /* **************** PRIZE-LIST */ .prize-list { margin: 0; padding: 0; display: table; width: 100%; border: none; } .prize-list ul { margin: 0; padding: 0; list-style: none; display: table-row; border: none; } .prize-list ul li { margin: 0; padding: 20px 20px 20px 0 !important; display: table-cell; border-top: dashed 1px #000; border-bottom: none !important; vertical-align: top; } .prize-list ul li.prefix { width: 30%; } .prize-list ul li.empty { width: 30%; border: none !important; } .prize-list ul li.thumb { margin: 0 !important; padding-right: 0 !important; width: 20%; } .prize-list figure { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #19F; position: absolute; top: 0; left: 0; } .prize-list figure img { width: 100%; height: 100%; object-fit: cover !important; } .prize-list p { margin: 0; } .ratio16_9 { width: 100%; height: 0; margin: 0; padding: 0 0 56.25% 0; position: relative; } /* **************** FILTERED + RESOURCES LIST */ #filtered-results-container { width: 100%; height: auto; margin: 0; padding: 4em 0; } #filtered-results { margin: 0; padding: auto; list-style: none; } #filtered-results li { margin: 0; padding: 0 0 20px 0; grid-column: span 4; } #filtered-results a { text-decoration: none; display: flex; flex-direction: column; gap: 20px; } #filtered-results a:hover { text-decoration: none; } #filtered-results figure { width: 100%; margin: 0; padding: 0; aspect-ratio: 16 / 9; background-size: cover; background-position: center center; transition: all 0.3s ease; } #filtered-results figure.empty { background-color:var(--yellow); } #filtered-results img { width: 100%; height: 100%; object-fit: cover !important; } #filtered-results div { margin: 0; padding: 0; color: var(--warmgray); transition: all 0.2s ease; } #filtered-results h3 { margin: 0; padding: 0; } #filtered-results a:hover figure { background-color: var(--yellow); } #filtered-results a:hover div { color: var(--yellow); } #no-results p { margin:0; padding: 0; grid-column: 4 / span 6; } /* ———————————————————————————————————————————————————————————————————————————————————— TABLES ———————————————————————————————————————————————————————————————————————————————————— */ table.lines { width: 100%; table-layout: fixed; border-spacing: 0; } table.lines td { border-bottom: solid #666666 1px; padding: 10px 0; vertical-align: top; } .tablepress { width: 100%; --text-color: #000 !important; --head-text-color: #000 !important; --head-bg-color: #FFF !important; --head-active-bg-color: #FFF !important; --hover-bg-color: #F8F8F7 !important; } .tablepress th { padding-top: 10px !important; padding-bottom: 40px !important; } .tablepress th:hover { color: var(--yellow) !important; } .tablepress .sorting::after { padding-bottom: 40px !important; } .tablepress td { padding-top: 15px !important; padding-bottom: 15px !important; } /* ———————————————————————————————————————————————————————————————————————————————————— ACCORDIONS ———————————————————————————————————————————————————————————————————————————————————— */ /* **************** ACCORDION */ .accordion-title { margin: 0; padding: 6em 0 4em 0; grid-column: 1 / span 4; } .accordion-title:first-of-type { padding-top: 0; } .accordion-title h2 { margin: 0; padding: 0; } .accordion { margin: 0; padding: 0; grid-column: 1 / span 4; list-style: none; border-top: solid 1px #000; } .accordion-line { margin: 0; padding: 0; border-bottom: solid 1px #000; } .accordion-header { margin: 0; padding: 1.5em 0; position: relative; } .accordion-header h2 { margin: 0; padding: 0 60px 0 0; } .accordion-header h3 { margin: 0; padding: 0 60px 0 0; } .accordion-header .toggle-toolbox { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; } .accordion-toggle { margin: 0; padding: 1.5em 0 3em 0; } .accordion-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .accordion-image { grid-column: 1 / span 4; display: flex; flex-direction: column; } .accordion-image img { width: 100%; height: auto; } .accordion-bio { grid-column: 1 / span 4; margin: 0; } .accordion-bio p:first-child { margin-top: 0; } .accordion-bio p:last-child { margin-bottom: 0; } .accordion-link { grid-column: 1 / span 4; margin: 0;} .toggle { display: none; } /* **************** ACCORDION WIDE */ .accordion-wide { grid-column: 3 / span 8; } .accordion-wide .accordion-layout { display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; } .accordion-wide .accordion-bio { grid-row: 1; grid-column: 1 / span 6; margin: 0; } /* **************** ACCORDION FULL */ .accordion-full { margin: 0; padding: 0; } .accordion-full .accordion-toggle { padding: 4em 0; } .accordion-full .accordion-layout { padding-left: 40px; padding-right: 40px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .accordion-full .accordion-header { padding: 2em 40px; } .accordion-full .accordion-header.is-open { border-bottom: dashed 1px #666666; } .accordion-full .accordion-header .toggle-toolbox { right: 40px; } .accordion-full .accordion-content { margin: 0; padding: 0; grid-column: 4 / span 6; } .accordion-full .fullwidthvideo { width: 100vw; position: relative; left: calc(-50vw + 50%); } /* **************** ACCORDION MULTI */ .multi-accordion { grid-column: 1 / span 4; } .multi-accordion .accordion-title { padding: 3em 0 1.5em 60px; } .multi-accordion .accordion-title:first-child { padding-top: 0; } .multi-accordion-accordion { border-top: dashed 1px #666666; } .multi-accordion-accordion + .multi-accordion-accordion { border-top: none;} .multi-accordion-accordion .accordion-line { border-bottom: dashed 1px #666666; } .multi-accordion-accordion .accordion-toggle { padding-bottom: 1.5em; } /* ———————————————————————————————————————————————————————————————————————————————————— TOOL BOX & FILTERS ———————————————————————————————————————————————————————————————————————————————————— */ .toolbox { margin: 0; padding: 2em 20px; background-color: var(--warmgray15); color: #000; display: flex; justify-content: center; } .toolbox.siblings { margin: 0; padding: 0; justify-content: flex-start; position: relative; } header + .toolbox { padding-top: 0 !important; } .category-toolbox { grid-column: 1 / span 4; list-style: none; margin: -5px 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-transform: uppercase; } .category-toolbox li { margin: 5px; padding: 0; display: flex; } .category-toolbox li.current a { background-color: #000; color: var(--warmgray20); } .pagination-toolbox { grid-column: 1 / span 4; list-style: none; margin: -5px 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .pagination-toolbox a, .pagination-toolbox span.current { margin: 5px; padding: 1px 20px 0 20px !important; width: auto; height: 24px; border-radius: 12px; border: solid 1px #000; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; } .pagination-toolbox a:hover { background-color: #000; color: var(--warmgray20); } .pagination-toolbox span.current { background-color: #000; color: var(--warmgray20); } .pagination-toolbox span { margin: 0; padding: 0 10px; } .post-navigation { grid-column: 1 / span 12; } .post-navigation .nav-links { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between !important; } .post-navigation .screen-reader-text { display: none; } .post-navigation .nav-previous { flex-basis: auto !important; display: flex; flex-direction: row; justify-content: flex-start; position: relative; } .post-navigation .nav-next { flex-basis: auto !important; display: flex; flex-direction: row; justify-content: flex-end; position: relative; } .post-navigation .nav-previous .nav-hint { position: absolute; left: 70px; display: none; } .post-navigation .nav-next .nav-hint { position: absolute; right: 70px; display: none; } .post-navigation .button-regular:hover .nav-hint { display: block; color: #000; } .siblings-nav { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; } .siblings-nav li { margin: 0; padding: 0; width: 100%; border-bottom: solid 1px var(--warmgray); display: flex; } .siblings-nav li:last-of-type { border-bottom: none; } .siblings-nav a { width: 100%; height: 100%; padding: 20px; text-decoration: none; text-transform: uppercase; color: var(--warmgray); } .siblings-nav a:hover { color: #000 } .previous-post { grid-column: 1 / span 1; grid-row: 1; display: flex; justify-content: flex-start; align-items: center; position: relative; margin-right: auto; } .previous-post .nav-hint { position: absolute; left: 70px; display: none; } .previous-post .button-regular:hover .nav-hint { display: block; color: #000; } .next-post { grid-column: 4 / span 1; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; position: relative; margin-left: auto; } .next-post .nav-hint { position: absolute; right: 70px; display: none; } .next-post .button-regular:hover .nav-hint { display: block; color: #000; } .filterbox { margin: 0; padding: 4em 20px; display: flex; justify-content: center; } /* ———————————————————————————————————————————————————————————————————————————————————— PREFACE, POST SCRIPTS & TAGLINE ———————————————————————————————————————————————————————————————————————————————————— */ .preface, .postscript { margin: 0; padding-top: 4em; padding-bottom: 4em; background-color: var(--warmgray); color: var(--warmgray20); } .preface .text-large { margin: 0; padding: 0; grid-column: 1 / span 4; } .postscript h4 { margin: 0; padding: 0; grid-column: 1 / span 4; grid-row: 1; text-transform: uppercase; } .postscript .text-large { margin: 0; padding: 0; grid-column: 1 / span 4; grid-row: 2; } .postscript .side-col { margin: 0; padding: 0; grid-column: 1 / span 4; grid-row: 4; display: flex; justify-content: flex-start; align-items: flex-end; } .preface p, .postscript p, .tagline p { margin: 0; padding: 0; } .tagline { margin: 0; padding: 8em 20px; color: #FFFFFF; background-color: var(--yellow); background: linear-gradient(0deg, rgb(240,171,0) 0%, rgb(245,196,77) 100%); text-align: center; } /* ———————————————————————————————————————————————————————————————————————————————————— NEWS ———————————————————————————————————————————————————————————————————————————————————— */ main.news header { padding: 4em 20px; } main.news header h1 { text-transform: none; } .leading { margin: 0; padding: 0 20px 4em 20px; background-color: var(--warmgray15); color: #000; text-align: center; } .leading .post-date { grid-column: 1 / span 4; grid-row: 1; text-align: center; } .leading .text { grid-column: 1 / span 4; grid-row: 2; text-align: center; } .leading p:first-of-type { margin-top: 0; } .leading p:last-of-type { margin-bottom: 0; } .post-thumbnail { margin: 0; padding: 0 20px; } .post-thumbnail figure { grid-column: 1 / span 4; margin: 0 -20px; padding: 0; } .post-thumbnail figcaption { padding: 5px 20px; } .post-content-box { margin: 0; padding: 4em 20px; } .post-content { grid-column: 1 / span 4; margin: 0; padding: 0 ; } .post-content p:first-of-type { margin-top: 0; } .post-content p:last-of-type { margin-bottom: 0; } /* ———————————————————————————————————————————————————————————————————————————————————— RESOURCES ———————————————————————————————————————————————————————————————————————————————————— */ .resource { margin: 0; padding-top: 6em; padding-bottom: 6em; background-color: var(--warmgray); color: var(--warmgray10); } .resource-preview { margin: 0; padding: 0; grid-column: 2 / span 4; } .resource-preview figure { margin: 0; padding: 0; } .resource-preview figcaption { margin: 0; padding: 0; color: var(--warmgray10); } .resource-info { margin: 0; padding: 0; grid-column: 7 / span 5; } .resource-info p:last-of-type { margin-bottom: 0; } /* ———————————————————————————————————————————————————————————————————————————————————— PROTOCOLS ———————————————————————————————————————————————————————————————————————————————————— */ .protocol-intro { margin: 0; padding-top: 2em; padding-bottom: 2em; } .protocol-title { margin: 0; padding: 0; grid-row: 1; grid-column: 1 / span 4; text-transform: uppercase; } .protocol-title h1 { margin-top: 0; } .protocol-text { margin: 0; padding: 0; grid-row: 4; grid-column: 1 / span 4; } .protocol-contact { margin: 0; padding: 0; grid-row: 2; grid-column: 1 / span 4; align-self: flex-end; } .protocol-contact p:first-child { margin-top: 0;} .protocol-contact p:last-child { margin-bottom: 0;} .protocol-image { margin: 0; padding: 3em 0; grid-row: 1; grid-column: 1 / span 4; border-top: solid 1px #000; } .protocol-image img { width: 60%; height: auto; margin: 0 auto; } /* ———————————————————————————————————————————————————————————————————————————————————— HOMEPAGE ———————————————————————————————————————————————————————————————————————————————————— */ /* **************** TRIPLE A */ .triple-A { margin: 0; padding-top: 4em; padding-bottom: 4em; background-color: var(--yellow); } .triple-A div { margin: 0; padding: 0; grid-column: 1 / span 4; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .triple-A img { width: 25vw; height: auto; } /* ———————————————————————————————————————————————————————————————————————————————————— SLIDERS ———————————————————————————————————————————————————————————————————————————————————— */ /* **************** SLIDER */ .hp-slider { margin: 0; padding: 0; width: 100%; } .hp-slide { margin: 0; padding-top: 72px; padding-bottom: 72px; width: 100%; height: 100%; position: relative; background-color: var(--yellow); } .slide-image, .slide-yellow, .slide-black { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; left: 0; top: 0; } .slide-image { background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-filter: grayscale(100%); filter: grayscale(100%); mix-blend-mode:multiply; } .slide-yellow { background-color: var(--yellow); mix-blend-mode: screen; } .slide-black { background-color: #000000; mix-blend-mode: screen; } .slide-content { margin: 0; padding: 0; grid-column: 1 / span 4; z-index: 700; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; } .slide-content a { text-decoration: none; } .slide-content a:hover { text-decoration: underline; } /* **************** FEATURED LINKS */ .hp-featlinks-blocks { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: #333333; color: var(--yellow); } .hp-featlinks-block { margin: 0; padding: 40px; flex: 1 1 0px; border: none; border-bottom: solid 1px var(--warmgray); } .hp-featlinks-block:last-of-type { border-bottom: none; } .hp-featlinks { display: flex; flex-direction: column; gap: 10px; list-style: circle; } .hp-featlinks li { margin: 0; padding: 0; } .hp-featlinks li:first-of-type { margin: 0 0 10px -19px; padding: 0; text-transform: uppercase; list-style: none; } .hp-featlinks a { text-decoration: none; color: var(--yellow); } .hp-featlinks a:hover { text-decoration: underline; } /* **************** FRESH */ .hp-fresh { width: 100%; height: auto; margin: 0; padding: 40px 20px; display: flex; flex-wrap: wrap; } .hp-fresh-slider { width: 100%; height: auto; margin: 32px 0 0 0; padding: 0; position: relative; } .hp-fresh-slide { width: 100%; height: auto; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1 ,1fr); gap: 20px; } .hp-fresh-slide figure { width: 100%; height: 0; margin: 0; padding: 0 0 75% 0; grid-column: 1; background-color:var(--yellow); background-size: cover; background-position: center center; } .hp-fresh-slide a { margin: 0; padding: 0; grid-column: 1; text-decoration: none; } .hp-fresh-slide a:hover h2 { text-decoration: underline; } .hp-fresh + .hp-fresh { border-top: solid 1px #000; } .hp-fresh .flickity-prev-next-button { top: -44px; margin: 0; padding: 0 20px; width: -moz-min-content; width: min-content; height: 24px; border-radius: 12px; border: solid 1px #000; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; background: none ; } .hp-fresh .flickity-prev-next-button:hover { text-decoration: none; background-color: #000; color: var(--warmgray20); } .hp-fresh .flickity-prev-next-button.previous { left: auto; right: 66px !important; } .hp-fresh .flickity-prev-next-button.next { right: 0; } .hp-fresh .flickity-prev-next-button.previous:before { content: "\2190"; margin-bottom: -2px; } .hp-fresh .flickity-prev-next-button.next:before { content: "\2192"; margin-bottom: -2px; } .hp-fresh .flickity-prev-next-button .flickity-button-icon { display: none; } /* **************** PROTOCOLS */ .feat-protocols { width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-bottom: solid 1px #000; } .feat-protocols-slider { width: 100%; height: auto; margin: 0; padding: 0; position: relative; } .feat-protocols-slide { width: 100%; height: auto; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1 ,1fr); gap: 20px; } .feat-protocols-slide figure { width: 100%; height: 0; margin: 0; padding: 0 0 40% 0; grid-column: 1; background-color:var(--yellow); background-size: cover; background-position: center center; } .feat-protocols-slide a { margin: 0; padding: 20px; grid-column: 1; text-decoration: none; } .feat-protocols-slide a:hover h2 { text-decoration: underline; } .feat-protocols .flickity-prev-next-button { top: 58px; margin: 0; padding: 0 20px; width: -moz-min-content; width: min-content; height: 24px; border-radius: 12px; border: solid 1px #000; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; background: none ; } .feat-protocols .flickity-prev-next-button:hover { text-decoration: none; background-color: #000; color: var(--warmgray20); } .feat-protocols .flickity-prev-next-button.previous { left: auto; right: 106px !important; } .feat-protocols .flickity-prev-next-button.next { right: 40px; } .feat-protocols .flickity-prev-next-button.previous:before { content: "\2190"; margin-bottom: -2px; } .feat-protocols .flickity-prev-next-button.next:before { content: "\2192"; margin-bottom: -2px; } .feat-protocols .flickity-prev-next-button .flickity-button-icon { display: none; } /* **************** GALLERIES */ .gallery-slider { width: 100%; height: auto; margin: 0; padding: 0 0 40px 0; position: relative; list-style: none; } .gallery-slide { width: 100%; height: auto; margin: 0; padding: 0; position: relative; } .gallery-slide figure { width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--warmgray10); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery-slider .flickity-page-dots { bottom: 0; } .gallery-type-square .gallery-slide { height: 0 !important; padding: 0 0 100% 0; } /* **************** FLICKITY */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; /* tap-highlight-color: transparent; */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* flickity-button */ .flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; pointer-events: none; /* prevent disabled button from capturing pointer up event. #716 */ } .flickity-button-icon { fill: currentColor; } /* previous/next buttons */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } /* page dots */ .flickity-page-dots { position: absolute; width: 100%; bottom: 30px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 12px; height: 12px; margin: 0 8px; border-radius: 50%; cursor: pointer; border: solid 2px #333333; } .flickity-page-dots .dot.is-selected { background-color: #333333; } /* ———————————————————————————————————————————————————————————————————————————————————— BUTTONS ———————————————————————————————————————————————————————————————————————————————————— */ .button-large { margin: 0; padding: 0 30px; width: auto; height: 36px; border-radius: 18px; border: solid 1px #000; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; text-transform: uppercase; white-space: nowrap; min-width: max-content; } .button-large:hover, .button-large.active { text-decoration: none; background-color: #000; color: var(--warmgray20); } .button-large span { margin-bottom: 0; } .button-regular { margin: 0; padding: 0 20px; width: auto; height: 24px; border-radius: 12px; border: solid 1px #000; color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; text-transform: uppercase; white-space: nowrap; min-width: max-content; } .button-regular:hover, .button-regular.active { text-decoration: none; background-color: #000; color: var(--warmgray20); } .button-regular span { margin: auto 0; display: block; } .button-yellow { border-color: var(--yellow); background-color: var(--yellow); color: #000; } .button-yellow:hover { border-color: var(--warmgray); background-color: var(--warmgray); color: var(--warmgray20); } .button-large.button-toggle { padding: 0; width: 36px; } .icon-lift { margin: -7px 0 0 0; padding: 5px; border: solid #000; border-width: 0 1px 1px 0; display: inline-block; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .button-toggle.is-clicked .icon-lift { margin: 6px 0 0 0; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .button-toggle:hover .icon-lift { border-color: var(--warmgray20); } .postscript .button-large { border-color: var(--warmgray20); color: var(--warmgray20); } .postscript .button-large:hover { background-color: var(--warmgray20); color: var(--warmgray); } .resource .button-large { border-color: var(--warmgray20); color: var(--warmgray20); } .resource .button-large:hover { background-color: var(--warmgray20); color: var(--warmgray); } .pagination-toolbox .button-regular { padding: 0 10px; } .buttons-group { margin: 0; padding: 4em 0; display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; } .accordion-toggle .buttons-group { padding-bottom: 1em;} .buttons-group * { max-width: max-content; } /* ———————————————————————————————————————————————————————————————————————————————————— CONTROLS ———————————————————————————————————————————————————————————————————————————————————— */ .controls { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 20px 10px; align-items: center; justify-content: center; color: #000; } .control-group { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: center; justify-content: center; color: #000; align-self: flex-end; } .controls fieldset { margin: 0; padding: 0; border: none; } .controls button { margin: 0; padding: 0; width: 40px; height: 40px; border-radius: 50%; border: solid 1px #000; background-color: #FFF; color: #000; cursor: pointer; } .controls button.auto { margin: 0; padding: 1px 20px 0 20px !important; width: auto; height: 40px; border-radius: 20px; } .controls button:hover { background-color: #000; color: #FFF; } .mixitup-control-active { background-color: #000 !important; color: #FFF !important; } /* **************** EASY DROPDOWN */ /* select { visibility: hidden; } */ .label { width: auto; margin-bottom: 5px; } .edd-body { opacity: 0; } .edd-root, .edd-root *, .edd-root *::before, .edd-root *::after { margin: 0; padding: 0; box-sizing: border-box; } .edd-root { display: inline-block; position: relative; width: 250px; user-select: none; } .edd-root-disabled { color: #ccc; cursor: not-allowed; } .edd-head { margin: 0; padding: 0 0 0 15px; height: 40px; display: flex; flex-direction: row; align-items: center; position: relative; overflow: hidden; border: 1px solid #000; transition: box-shadow 200ms; background: white; } .edd-head, .edd-body { border-radius: 20px; } .edd-root-focused .edd-head { border-color: blue; } .edd-root-invalid .edd-head { border-color: #ff6969; } .edd-value { width: 100%; display: inline-block; vertical-align: middle; padding:0; } .edd-arrow { position: absolute; width: 18px; height: 10px; top: calc(50% - 5px); right: calc(25px - 9px); transition: transform 150ms; pointer-events: none; color: #000; } .edd-arrow::before { content: ''; position: absolute; width: 13px; height: 13px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; top: -5px; right: 0; transform: rotate(45deg); transform-origin: 50% 25%; } .edd-root-open .edd-arrow { transform: rotate(180deg); } .edd-root-open .edd-arrow, .edd-root:not(.edd-root-disabled):not(.edd-root-open) .edd-head:hover .edd-arrow { color: #000; } .edd-value, .edd-option, .edd-group-label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .edd-root:not(.edd-root-disabled) .edd-value, .edd-option { cursor: pointer; } .edd-select { position: absolute; opacity: 0; width: 100%; left: -100%; top: 0; } .edd-root-native .edd-select { left: 0; top: 0; width: 100%; height: 100%; } .edd-body { opacity: 0; position: absolute; left: 0; right: 0; border: 1px solid #eee; pointer-events: none; overflow: hidden; margin: 8px 0; z-index: 999; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); transform: scale(0.95); background: white; } .edd-root-open .edd-body { opacity: 1; pointer-events: all; transform: scale(1); transition: opacity 200ms, transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .edd-root-open-above .edd-body { bottom: 100%; } .edd-root-open-below .edd-body { top: 100%; } .edd-items-list { overflow: auto; max-height: 0; transition: max-height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-overflow-scrolling: touch; } .edd-group-label { padding: 12px 10px 4px; } .edd-option { padding: 6px 10px; border-bottom: 1px solid #eee; transition: background-color 250ms, color 250ms, border-color 250ms; } .edd-option:first-of-type { color: #ccc; } .edd-group-has-label .edd-option { padding-left: 14px; } .edd-option-selected { color: var(--yellow); } .edd-option-focused:not(.edd-option-disabled) { background: var(--yellow); border-bottom-color: var(--yellow); color: #000; } .edd-option-disabled, .edd-group-disabled .edd-option { cursor: default; color: #ccc; } /* ———————————————————————————————————————————————————————————————————————————————————— SEARCH ———————————————————————————————————————————————————————————————————————————————————— */ .search-results { width: 100%; height: auto; margin: 0; padding-top: 4em; padding-bottom: 4em; } .search-results article { margin: 0; padding: 0; grid-column: 4 / span 6; } .search-results hr { margin: 1em 0; grid-column: 4 / span 6; } .search-results a { text-decoration: none; } .search-results a:hover p { text-decoration: underline; } .search-result-infos { margin: 0; padding: 0; grid-column: span 4; } .search-result-infos p:last-child { margin-bottom: 0; } .search-result-thumb { width: 100%; margin: 0; padding: 0; aspect-ratio: 16 / 9; background-size: cover; background-position: center center; grid-column: span 2; align-self: flex-end; } .search-result-thumb img { width: 100%; height: 100%; object-fit: cover !important; } #search-slider { margin: 0; padding: 40px 20px; width: 100%; background-color: #000; position: fixed; top: -200px; z-index: 850 !important; -webkit-transition: top .5s ease-out; -moz-transition: top .5s ease-out; -o-transition: top .5s ease-out; transition: top .5s ease-out; } #search-slider.open { top: 40px !important; z-index: 850 !important; } #search-slider form { margin: 0; padding: 0; width: 100%; height: auto; display: flex; position: relative; } #search-slider input[type=search] { margin: 0; padding: 0 60px 0 20px; width: 100% !important; height: 60px; border-radius: 30px; background-color: transparent; border: solid 1px var(--warmgray30); color: var(--warmgray30); outline: none; } #search-slider input[type=search]::placeholder { color: var(--warmgray30); opacity: 1; } #search-slider input[type=search]:focus { color: #FFF; border-color: #FFF; } #search-slider input[type=search]:focus::placeholder { color: #FFF !important; opacity: 1; } #search-slider input[type=submit] { margin: 10px; padding: 0; width: 40px; height: 40px; border-radius: 20px; background-color: var(--warmgray30); border: none; position: absolute; right: 0; cursor: pointer; } #search-slider input[type=submit]:hover { background-color: #FFF; } #search-slider input[type=submit]:active { background-color: var(--yellow); } #search-bottom { margin: 0; padding: 4em 35px 6em 35px; width: 100%; } #search-bottom form { margin: 0; padding: 0; width: 100%; height: auto; display: flex; position: relative; } #search-bottom input[type=search] { margin: 0; padding: 0 60px 0 20px; width: 100% !important; height: 60px; border-radius: 30px; background-color: transparent; border: solid 1px var(--warmgray50); color: var(--warmgray50); outline: none; } #search-bottom input[type=search]::placeholder { color: var(--warmgray50); opacity: 1; } #search-bottom input[type=search]:focus { color: #000; border-color: #000; } #search-bottom input[type=search]:focus::placeholder { color: #000 !important; opacity: 1; } #search-bottom input[type=submit] { margin: 10px; padding: 0; width: 40px; height: 40px; border-radius: 20px; background-color: var(--warmgray30); border: none; position: absolute; right: 0; cursor: pointer; } #search-bottom input[type=submit]:hover { background-color: #000; color: var(--warmgray10); } #search-bottom input[type=submit]:active { background-color: var(--yellow); } /* ———————————————————————————————————————————————————————————————————————————————————— FOOTER ———————————————————————————————————————————————————————————————————————————————————— */ #colophon { width: 100%; height: auto; margin: 0; padding-top: 6em; padding-bottom: 2em; background-color: #000; color: var(--warmgray20); } #colophon a { color: var(--warmgray20); text-decoration: none; } #colophon a:hover { color: var(--yellow); text-decoration: none; } #colophon .current-menu-item a { color: var(--yellow); text-decoration: none; } #address-1, #address-2 { margin: 0 0 4em 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; } #address-1 { grid-column: 1 / span 2; grid-row: 4; } #address-2 { grid-column: 3 / span 2; grid-row: 4; } #address-1 div, #address-2 div { margin: 0; padding: 0; } #address-1 div:first-of-type, #address-2 div:first-of-type { margin-bottom: 10px; font-weight: bold; pointer-events: none; } #footer-menu-A, #footer-menu-B, #footer-menu-C { text-transform: uppercase; list-style: none; display: flex; gap: 10px; } #footer-menu-A, #footer-menu-B { flex-direction: column; align-items: center; justify-content: flex-start; } #footer-menu-A { margin: 0; padding: 0; grid-column: 1 / span 4; grid-row: 2; } #footer-menu-A li { margin: 0; padding: 0; } #footer-menu-A li:last-child { margin-top: 10px; } #footer-menu-A li:first-child { margin-bottom: 10px; font-weight: bold; pointer-events: none; } #footer-menu-B { margin: 0 0 20px 0; padding: 0; grid-column: 1 / span 4; grid-row: 1; } #footer-menu-B li { margin: 0; padding: 0; } #footer-menu-B li:first-child { margin-bottom: 10px; font-weight: bold; pointer-events: none; } #footer-menu-C { margin: 0; padding: 0; grid-column: 1 / span 4; grid-row: 5; flex-direction: row; align-items: flex-end; justify-content: center; } #footer-menu-C li { margin: 0; } .copyright { grid-column: 1 / span 4; grid-row: 6; display: flex; justify-content: center; } .letterA { margin: 4em 0; padding: 0; grid-column: 1 / span 4; grid-row: 3; display: flex; flex-direction: row; align-items: center; justify-content: center; } .letterA img { width: 25vw; height: auto; }