*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } article, aside, footer, header, hgroup, main, nav, section { display: block; } li { list-style: none; } img { height: auto; max-width: 100%; vertical-align: top; } button, input, select, textarea { font: inherit; } address { font-style: normal; } ::-moz-selection { background: var(--color); color: var(--white); } ::selection { background: var(--color); color: var(--white); } html { font-size: clamp(1rem, 1rem + 0.2 * ((100vw - 20rem) / 46), 1.2rem); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } html.no-scroll { overflow: hidden; position: fixed; } body { background: var(--white); color: var(--text-color); font-family: var(--body-font); font-variation-settings: "wght" var(--font-weight-normal); line-height: var(--line-height); overflow-x: hidden; -ms-scroll-chaining: none; overscroll-behavior: none; } a { color: var(--link-color); text-decoration: none; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; } a:hover { color: var(--link-color); } a:active { color: var(--link-color); } a:focus { color: var(--link-color); outline: none; } .inverse { color: var(--dark); text-decoration: none; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; } .inverse:hover { color: var(--link-color); } .inverse:active { color: var(--link-color); } .inverse:focus { color: var(--link-color); outline: none; } p, ul, ol, dl, table, pre { margin-top: calc(1rem + 0.5vw); } blockquote, figure, hr { margin-top: calc(1rem + 1vw); margin-bottom: calc(1rem + 1vw); } h1, h2, h3, h4, h5, h6 { color: var(--headings-color); font-family: var(--heading-font); font-variation-settings: "wght" var(--headings-weight); letter-spacing: 0.03rem; line-height: 1.1; margin-top: calc(2.25rem + 0.5vw); text-transform: var(--headings-transform); } h1, .h1 { font-size: clamp(1.6758293408rem, 1.6758293408rem + 1.1325746388 * ((100vw - 20rem) / 46), 2.8084039796rem); } h2, .h2 { font-size: clamp(1.4728968807rem, 1.4728968807rem + 0.6965283404 * ((100vw - 20rem) / 46), 2.1694252211rem); } h3, .h3 { font-size: clamp(1.2945382732rem, 1.2945382732rem + 0.3812910676 * ((100vw - 20rem) / 46), 1.6758293408rem); } h4, .h4 { font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.1567604947 * ((100vw - 20rem) / 46), 1.2945382732rem); } h5, .h5 { font-size: clamp(1rem, 1rem + 0.1377777785 * ((100vw - 20rem) / 46), 1.1377777785rem); } h6, .h6 { font-size: clamp(1rem, 1rem + 0 * ((100vw - 20rem) / 46), 1rem); } h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: calc(0.5rem + 0.5vw); } b, strong { font-variation-settings: "wght" var(--font-weight-bold); } blockquote { background: rgba(0, 0, 0, 0.03); border-left: 0.3rem solid var(--color); font-style: italic; padding: 1.5rem 1.5rem 1.5rem 1.75rem; } blockquote cite { color: var(--dark); display: block; font-size: 0.9374999997rem; font-style: normal; font-variation-settings: "wght" var(--font-weight-bold); margin-top: 0.75rem; } blockquote > :nth-child(1) { margin-top: 0; } ul, ol { margin-left: 2rem; } ul > li, ol > li { list-style: inherit; padding: 0 0 0.25rem 1rem; } dl dt { font-variation-settings: "wght" var(--font-weight-bold); } sup, sub { font-size: 55%; line-height: 1; } code { background-color: rgba(var(--color-rgb), 0.1); border-radius: 2px; color: var(--color); font-size: 0.8239746086rem; font-family: "Monaco", "Courier New", monospace; padding: 0.25rem 0.5rem; } pre { background-color: var(--lighter); border-radius: 3px; font-size: 0.8239746086rem; padding: 1.5rem; white-space: pre-wrap !important; word-wrap: break-word; width: 100%; } pre code { background-color: var(--lighter); color: inherit !important; font-size: inherit; padding: 0; } table { border-collapse: collapse; border-spacing: 0; display: block; max-width: 100%; overflow-x: auto; vertical-align: top; text-align: left; white-space: nowrap; } table th { border-bottom: 2px solid var(--light); padding: 0.75rem 1.25rem; } table tr:nth-child(2n) { background: rgba(0, 0, 0, 0.03); } table td { padding: 0.75rem 1.25rem; } figcaption { clear: both; color: var(--gray-1); font-style: italic; font-size: 0.7241964329rem; margin: 0.75rem 0 0; text-align: center; } hr, .separator { background: none; border: none; height: auto; line-height: 1; max-width: none; text-align: center; } hr::before, .separator::before { content: "···"; color: var(--dark); font-size: 1.2136296308rem; font-variation-settings: "wght" var(--font-weight-bold); letter-spacing: 1.1377777785rem; padding-left: 1.1377777785rem; } .separator--dot::before { content: "·"; color: var(--dark); font-size: 1.2136296308rem; font-variation-settings: "wght" var(--font-weight-bold); letter-spacing: 1.1377777785rem; padding-left: 1.1377777785rem; } .separator--long-line { position: relative; } .separator--long-line::before { content: ""; height: 1.2136296308rem; } .separator--long-line::after { border-top: 1px solid var(--light); content: ""; height: 1px; position: absolute; width: 100%; top: 50%; left: 0; } .btn, [type=button], [type=submit], button { background: var(--dark); border: none; border-radius: var(--border-radius); color: var(--white); cursor: pointer; display: inline-block; font: var(--font-weight-bold) 0.7241964329rem var(--body-font); letter-spacing: 0.05em; padding: 0.75rem 1.5rem; vertical-align: middle; text-align: center; text-transform: uppercase; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; width: 100%; } @media all and (min-width: 20em) { .btn, [type=button], [type=submit], button { width: auto; } } .btn:hover, [type=button]:hover, [type=submit]:hover, button:hover, .btn:focus, [type=button]:focus, [type=submit]:focus, button:focus { background: var(--color); color: var(--white); } .btn:disabled, [type=button]:disabled, [type=submit]:disabled, button:disabled { background-color: var(--lighter); border-color: var(--lighter); color: var(--gray-1); cursor: not-allowed; } .btn:active, [type=button]:active, [type=submit]:active, button:active { background: var(--color); } @media all and (max-width: 19.9375em) { .btn + .btn, [type=button] + .btn, [type=submit] + .btn, button + .btn, .btn + [type=button], [type=button] + [type=button], [type=submit] + [type=button], button + [type=button], .btn + [type=submit], [type=button] + [type=submit], [type=submit] + [type=submit], button + [type=submit], .btn + button, [type=button] + button, [type=submit] + button, button + button { margin-top: 0.5rem; } } .btn--outline { background: none; border: 2px solid var(--dark); -webkit-box-shadow: none; box-shadow: none; color: var(--dark); } .btn--outline:hover, .btn--outline:active, .btn--outline:focus { background: none; border-color: var(--color); -webkit-box-shadow: none; box-shadow: none; color: var(--color); } [type=button], [type=submit], button { -webkit-appearance: none; -moz-appearance: none; } fieldset { border: 1px solid var(--light); margin: 0 0 1.5rem; padding: 1.5rem; } fieldset > legend { margin-left: -1rem; padding: 0 1rem; } legend { font-variation-settings: "wght" var(--font-weight-bold); } label { font-variation-settings: "wght" var(--font-weight-bold); margin: 0 1rem 0.75rem 0; } option { font-variation-settings: "wght" var(--font-weight-normal); } [type=text], [type=url], [type=tel], [type=number], [type=email], [type=search], textarea, select { background-color: var(--white); border: none; border: 1px solid var(--light); border-radius: var(--border-radius); font-size: 1rem; outline: none; padding: 0.375rem 0.75rem; width: 100%; -webkit-appearance: none; -moz-appearance: none; } @media all and (min-width: 37.5em) { [type=text], [type=url], [type=tel], [type=number], [type=email], [type=search], textarea, select { width: auto; } } [type=text]:focus, [type=url]:focus, [type=tel]:focus, [type=number]:focus, [type=email]:focus, [type=search]:focus, textarea:focus, select:focus { border-color: var(--color); } input[type=checkbox], input[type=radio] { opacity: 0; position: absolute; } input[type=checkbox] + label, input[type=radio] + label { position: relative; margin-left: -1px; cursor: pointer; padding: 0; } input[type=checkbox] + label:before, input[type=radio] + label:before { background-color: var(--white); border: 1px solid var(--light); border-radius: 2px; content: ""; display: inline-block; height: 1.25rem; line-height: 1.25rem; margin-right: 1rem; vertical-align: middle; text-align: center; width: 1.25rem; } input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before { content: ""; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpolygon points='9.53 0 4.4 5.09 1.47 2.18 0 3.64 2.93 6.54 4.4 8 5.87 6.54 11 1.46 9.53 0' fill='%236B78B4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 11px 8px; background-position: 50% 50%; } input[type=radio] + label:before { border-radius: 50%; } input[type=radio]:checked + label:before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3ccircle cx='4' cy='4' r='4' fill='%236B78B4'/%3e%3c/svg%3e"); } [type=file] { margin-bottom: 1.5rem; width: 100%; } select { max-width: 100%; width: auto; position: relative; } select:not([multiple]) { background: url('data:image/svg+xml;utf8,') no-repeat 90% 50%; background-size: 8px; padding-right: 3rem; } select[multiple] { border: 1px solid var(--light); padding: 1.5rem; width: 100%; } select[multiple]:hover { border-color: var(--light); } select[multiple]:focus { border-color: var(--color); } select[multiple]:disabled { background-color: var(--lighter); cursor: not-allowed; } select[multiple]:disabled:hover { border-color: var(--light); } textarea { display: block; overflow: auto; resize: vertical; max-width: 100%; } .top { height: var(--header-height); left: 0; position: absolute; top: 0; width: 100%; padding: 0 var(--page-margin); z-index: 99; } @media all and (min-width: 56.25em) { .top { height: auto; max-height: 9.5rem; } } .top > div { align-items: center; display: grid; height: 100%; margin: 0 auto; max-width: var(--page-width); position: relative; width: 100%; } @media all and (max-width: 56.1875em) { .top > div { grid-template-columns: 1fr auto auto; grid-template-areas: "logo search menu"; } } .top.is-visible { align-items: center; background: var(--white); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); height: var(--header-height); opacity: 1; padding: 0 var(--page-margin); position: fixed; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: height 0.3s, background 0.3s, opacity 0.24s, -webkit-transform 0.24s; transition: height 0.3s, background 0.3s, opacity 0.24s, -webkit-transform 0.24s; transition: transform 0.24s, height 0.3s, background 0.3s, opacity 0.24s; transition: transform 0.24s, height 0.3s, background 0.3s, opacity 0.24s, -webkit-transform 0.24s; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } @media all and (min-width: 56.25em) { .top.is-visible > div { grid-template-columns: 1fr auto auto; grid-template-areas: "logo menu search"; margin: 0 auto; max-width: var(--page-width); } } .top.is-visible .logo { font-size: 1.7875512975rem; grid-area: logo; padding: 0; text-align: left; } .top.is-visible .navbar { text-align: right; } .top.is-visible .navbar__toggle { height: auto; } .top.is-visible .search__input { font-size: 1.4728968807rem; } .top.is-visible .search__btn { position: relative; margin-left: 1rem; right: 0; top: 0; } .top.is-hidden { opacity: 0; -webkit-transform: translate(0, -86px); transform: translate(0, -86px); -webkit-transition: background 0.3s, color 0.3s, opacity 0.24s, -webkit-transform 0.24s; transition: background 0.3s, color 0.3s, opacity 0.24s, -webkit-transform 0.24s; transition: transform 0.24s, background 0.3s, color 0.3s, opacity 0.24s; transition: transform 0.24s, background 0.3s, color 0.3s, opacity 0.24s, -webkit-transform 0.24s; } .logo { color: var(--dark) !important; display: block; font-family: var(--logo-font); font-size: 1.7875512975rem; letter-spacing: 1px; } @media all and (min-width: 56.25em) { .logo { font-size: 3.6355864383rem; padding: 1.5rem 0 0.75rem; text-align: center; } } .logo:hover { text-decoration: none; } .logo:focus { outline: none; } .logo > img { height: var(--header-height); -o-object-fit: contain; object-fit: contain; padding: 0.5rem 0; width: auto; } @media all and (min-width: 56.25em) { .logo > img { height: 5rem; } } @media all and (max-width: 56.1875em) { .search { grid-area: search; } } .search__btn { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; margin: 0; padding: 0.5rem; width: auto; position: relative; right: 0; } @media all and (min-width: 56.25em) { .search__btn { padding-right: 0; position: absolute; top: 40%; } } .search__btn:hover, .search__btn:focus { -webkit-transform: translateY(0); transform: translateY(0); } .search__btn:hover > svg, .search__btn:focus > svg { fill: var(--color); } .search__btn > svg { display: block; fill: var(--dark); -webkit-transition: all 0.24s ease; transition: all 0.24s ease; } .search__form { flex-basis: 90%; } .search__input { background: none; border: none !important; display: none; font-family: var(--heading-font); margin: 0 !important; opacity: 0; padding: 0; width: 100%; font-size: clamp(1.4728968807rem, 1.4728968807rem + 0.6965283404 * ((100vw - 20rem) / 46), 2.1694252211rem); } .search__close { background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none; color: transparent; cursor: pointer; margin: 0 !important; opacity: 0; padding: 0; height: 1.6rem; width: 1.6rem; position: relative; text-indent: -999rem; } .search__close:before, .search__close:after { background-color: var(--dark); content: ""; left: 1rem; height: 1.6rem; opacity: 1; position: absolute; width: 1px; top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.14s ease-out; transition: all 0.14s ease-out; } .search__close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .search__close:hover { -webkit-transform: translateY(0); transform: translateY(0); } .search__close:hover:before, .search__close:hover:after { background-color: var(--color); } .search__overlay { background-color: var(--white); height: 100%; left: 0; opacity: 0; position: absolute; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; top: 0; visibility: hidden; width: 100%; z-index: 2005; } .search__overlay-inner { align-items: center; display: flex; height: 100%; justify-content: space-between; } .search__overlay.expanded { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; display: block; visibility: visible; } .search__overlay.expanded .search__input { -webkit-animation: slideininput 0.24s 0.1s forwards; animation: slideininput 0.24s 0.1s forwards; display: block; } @-webkit-keyframes slideininput { 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideininput { 60% { opacity: 0; } 100% { opacity: 1; } } .search__overlay.expanded .search__close { -webkit-animation: slideinclose 0.24s 0.1s forwards; animation: slideinclose 0.24s 0.1s forwards; } @-webkit-keyframes slideinclose { 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideinclose { 60% { opacity: 0; } 100% { opacity: 1; } } @media all and (max-width: 56.1875em) { .navbar { grid-area: menu; } } .navbar .navbar__menu { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } @media all and (max-width: 56.1875em) { .navbar .navbar__menu { display: none; } } .navbar .navbar__menu li { display: block; font-family: var(--menu-font); font-size: 0.9374999997rem; font-variation-settings: "wght" var(--font-weight-bold); line-height: var(--line-height); padding: 0; position: relative; white-space: nowrap; width: auto; } .navbar .navbar__menu li a, .navbar .navbar__menu li span[aria-haspopup=true] { color: var(--dark); display: block; padding: 0 0.5rem; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .navbar .navbar__menu li a:active, .navbar .navbar__menu li a:focus, .navbar .navbar__menu li a:hover, .navbar .navbar__menu li span[aria-haspopup=true]:active, .navbar .navbar__menu li span[aria-haspopup=true]:focus, .navbar .navbar__menu li span[aria-haspopup=true]:hover { color: var(--color); } .navbar .navbar__menu li span { color: var(--dark); cursor: default; display: block; padding: 0 0.5rem; } .navbar .navbar__menu > li.active a { color: var(--color); } .navbar .navbar__menu > li:hover > a, .navbar .navbar__menu > li:hover > span[aria-haspopup=true] { color: var(--color); } .navbar .has-submenu:active > .navbar__submenu, .navbar .has-submenu:focus > .navbar__submenu, .navbar .has-submenu:hover > .navbar__submenu { left: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); visibility: visible; margin-top: 0.75rem; } .navbar .has-submenu:active > .navbar__submenu:before, .navbar .has-submenu:focus > .navbar__submenu:before, .navbar .has-submenu:hover > .navbar__submenu:before { content: ""; height: 0.75rem; position: absolute; width: 100%; top: -0.75rem; } .navbar .has-submenu:active > .navbar__submenu.is-right-submenu, .navbar .has-submenu:focus > .navbar__submenu.is-right-submenu, .navbar .has-submenu:hover > .navbar__submenu.is-right-submenu { left: auto; right: 0; -webkit-transform-origin: right top; transform-origin: right top; } .navbar .has-submenu .has-submenu:active > .navbar__submenu, .navbar .has-submenu .has-submenu:focus > .navbar__submenu, .navbar .has-submenu .has-submenu:hover > .navbar__submenu { top: 0; margin-top: 0; } .navbar .has-submenu .has-submenu:active > .navbar__submenu.is-right-submenu, .navbar .has-submenu .has-submenu:focus > .navbar__submenu.is-right-submenu, .navbar .has-submenu .has-submenu:hover > .navbar__submenu.is-right-submenu { top: 0; margin-top: 0; } .navbar .navbar__submenu { background: var(--color); -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); border-radius: var(--border-radius); left: -9999px; list-style-type: none; margin: 0; padding: 0.5rem 0; position: absolute; text-align: left; visibility: hidden; white-space: nowrap; z-index: 1; opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: 0 top; transform-origin: 0 top; -webkit-transition: opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1), -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar .navbar__submenu__submenu { z-index: 2; } .navbar .navbar__submenu li { line-height: 1.5; font-size: 0.8789062495rem; text-transform: none; } .navbar .navbar__submenu li a, .navbar .navbar__submenu li span[aria-haspopup=true] { color: rgba(255, 255, 255, 0.88) !important; padding: 0.5rem 1.5rem; -webkit-transition: all 0.24s ease; transition: all 0.24s ease; } .navbar .navbar__submenu li a:active, .navbar .navbar__submenu li a:focus, .navbar .navbar__submenu li a:hover, .navbar .navbar__submenu li span[aria-haspopup=true]:active, .navbar .navbar__submenu li span[aria-haspopup=true]:focus, .navbar .navbar__submenu li span[aria-haspopup=true]:hover { background: rgba(255, 255, 255, 0.05); color: var(--white) !important; } .navbar .navbar__submenu li span { color: rgba(255, 255, 255, 0.88) !important; padding: 0.5rem 1.25rem; } .navbar .navbar__submenu li:hover > a, .navbar .navbar__submenu li:hover > span[aria-haspopup=true] { color: var(--white) !important; } .navbar .navbar__toggle { background: none; -webkit-box-shadow: none; box-shadow: none; border: none; cursor: pointer; display: block; line-height: 1; height: 4.5rem; margin: 0; overflow: visible; padding: 1rem 0 1rem 1.5rem; text-transform: none; z-index: 2004; } @media all and (min-width: 37.5em) { .navbar .navbar__toggle { height: var(--header-height); } } @media all and (min-width: 56.25em) { .navbar .navbar__toggle { display: none; } } .navbar .navbar__toggle:hover, .navbar .navbar__toggle:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; -webkit-transform: none; transform: none; } .navbar .navbar__toggle-box { width: 24px; height: 14px; display: inline-block; position: relative; } .navbar .navbar__toggle-inner { display: block; top: 50%; text-indent: -9999999em; } .navbar .navbar__toggle-inner::before { content: ""; display: block; top: -6px; } .navbar .navbar__toggle-inner::after { content: ""; display: block; bottom: -6px; } .navbar .navbar__toggle-inner, .navbar .navbar__toggle-inner::before, .navbar .navbar__toggle-inner::after { width: 22px; height: 2px; background-color: var(--dark); position: absolute; -webkit-transition: opacity 0.14s ease-out, -webkit-transform; transition: opacity 0.14s ease-out, -webkit-transform; transition: transform, opacity 0.14s ease-out; transition: transform, opacity 0.14s ease-out, -webkit-transform; } .navbar .navbar__toggle-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .navbar .navbar__toggle-inner::before { -webkit-transition: top 0.075s ease 0.12s, opacity 0.075s ease; transition: top 0.075s ease 0.12s, opacity 0.075s ease; } .navbar .navbar__toggle-inner::after { -webkit-transition: bottom 0.075s ease 0.12s, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .navbar .navbar__toggle.is-active .navbar__toggle-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .navbar .navbar__toggle.is-active .navbar__toggle-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s ease 0.12s; transition: top 0.075s ease, opacity 0.075s ease 0.12s; } .navbar .navbar__toggle.is-active .navbar__toggle-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; } .navbar_mobile_overlay { background: var(--white); height: calc(100vh - 4.5rem); left: 0; opacity: 1; overflow: auto; pointer-events: auto; position: fixed; top: 4.5rem; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 100%; z-index: 998; } @media all and (min-width: 37.5em) { .navbar_mobile_overlay { height: calc(100vh - var(--header-height)); top: var(--header-height); } } .navbar_mobile_overlay.is-hidden { opacity: 0; pointer-events: none; } .navbar_mobile_overlay .navbar__menu { margin: 24px; } .navbar_mobile_overlay .navbar__menu li { font-family: var(--menu-font); list-style: none; margin: 0; padding: 0; text-align: center; } .navbar_mobile_overlay .navbar__menu li a, .navbar_mobile_overlay .navbar__menu li .is-separator { color: var(--dark); display: block; padding: 10px 20px 10px 0; position: relative; } .navbar_mobile_overlay .navbar__menu li a:active, .navbar_mobile_overlay .navbar__menu li a:focus, .navbar_mobile_overlay .navbar__menu li a:hover, .navbar_mobile_overlay .navbar__menu li .is-separator:active, .navbar_mobile_overlay .navbar__menu li .is-separator:focus, .navbar_mobile_overlay .navbar__menu li .is-separator:hover { color: var(--dark); } .navbar_mobile_overlay .navbar__menu li a[aria-haspopup=true]::after, .navbar_mobile_overlay .navbar__menu li .is-separator[aria-haspopup=true]::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: var(--gray-1) transparent transparent transparent; left: 0.5rem; top: 14px; position: relative; } .navbar_mobile_overlay .navbar__submenu { margin: 0; padding: 0; visibility: hidden; } .navbar_mobile_overlay .navbar__submenu[aria-hidden=false] { visibility: visible; } .navbar_mobile_overlay .navbar__submenu_wrapper { height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar_mobile_overlay .navbar__submenu_wrapper.is-active { height: auto; opacity: 1; } .navbar_mobile_sidebar { background: var(--white); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); height: 100vh; left: 0; max-width: 400px; overflow: auto; position: fixed; top: 0; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 80%; z-index: 1000; } .navbar_mobile_sidebar.is-hidden { left: -400px; } .navbar_mobile_sidebar .navbar__menu { margin: 24px; } .navbar_mobile_sidebar .navbar__menu li { font-family: var(--menu-font); font-size: 16px; list-style: none; line-height: 1.3; margin: 0; padding: 0; } .navbar_mobile_sidebar .navbar__menu li a, .navbar_mobile_sidebar .navbar__menu li .is-separator { color: var(--dark); display: block; padding: 10px 20px 10px 0; position: relative; } .navbar_mobile_sidebar .navbar__menu li a:active, .navbar_mobile_sidebar .navbar__menu li a:focus, .navbar_mobile_sidebar .navbar__menu li a:hover, .navbar_mobile_sidebar .navbar__menu li .is-separator:active, .navbar_mobile_sidebar .navbar__menu li .is-separator:focus, .navbar_mobile_sidebar .navbar__menu li .is-separator:hover { color: var(--dark); } .navbar_mobile_sidebar .navbar__menu li a[aria-haspopup=true]::after, .navbar_mobile_sidebar .navbar__menu li .is-separator[aria-haspopup=true]::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: var(--gray-1) transparent transparent transparent; right: 0; top: 18px; position: absolute; } .navbar_mobile_sidebar .navbar__submenu { margin: 0 0 0 24px; padding: 0; visibility: hidden; } .navbar_mobile_sidebar .navbar__submenu[aria-hidden=false] { visibility: visible; } .navbar_mobile_sidebar .navbar__submenu_wrapper { height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar_mobile_sidebar .navbar__submenu_wrapper.is-active { height: auto; opacity: 1; } .navbar_mobile_sidebar__overlay { background: rgba(0, 0, 0, 0.5); height: 100%; opacity: 1; pointer-events: auto; position: fixed; top: 0; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 100%; z-index: 10; } .navbar_mobile_sidebar__overlay.is-hidden { opacity: 0; pointer-events: none; } .container { -webkit-box-sizing: content-box; box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: var(--page-width); padding: 0 var(--page-margin); } @media all and (max-width: 56.1875em) { .container { padding-top: var(--header-height); } } .wrapper { margin-left: auto; margin-right: auto; max-width: var(--entry-width); } .hero { background: var(--hero-bg); margin-bottom: var(--grid-gap); min-height: var(--hero-min-height); position: relative; text-align: center; top: 0; z-index: 1; } .hero:after { content: " "; display: block; clear: both; } @media all and (min-width: 56.25em) { .hero { margin-top: 12.75rem; } } @media all and (min-width: 56.25em) { .hero--narrow { left: calc((100% - var(--page-width)) / 2); width: var(--page-width); } } .hero--full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .hero > header { color: var(--white); max-width: var(--page-width); padding: 0 4%; text-align: center; width: 100%; z-index: 2; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media all and (min-width: 56.25em) { .hero > header { max-width: calc(var(--page-width) + 8%); } } .hero > header * { color: var(--white); } .hero > header h1 { margin-top: 0.5rem; } .hero > header a:not(.page__desc a) { text-decoration: none; } .hero > header a:not(.page__desc a):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .hero__image { margin: 0; position: relative; } .hero__image::after { background: var(--hero-bg); content: ""; display: block; height: 100%; left: 0; opacity: var(--hero-opacity); position: absolute; top: 0; width: 100%; } .hero__image > img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; } @media all and (max-width: 56.1875em) { .hero__image > img { min-height: var(--hero-min-height); } } @media all and (min-width: 56.25em) { .hero__image > img { height: var(--hero-max-height); } } .hero__image > figcaption { background: var(--dark); border-radius: var(--border-radius); bottom: 4%; color: var(--white); display: inline-table; padding: 0 0.5rem; position: absolute; right: var(--page-margin); text-align: left; } .l-grid { display: grid; grid-gap: var(--grid-gap); margin: 0; } @media all and (min-width: 37.5em) { .l-grid { grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 56.25em) { .l-grid { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 75em) { .l-grid { grid-template-columns: repeat(4, 1fr); } } @media all and (min-width: 75em) { .l-grid--1 .c-card:nth-child(7n-2) { grid-column: span 2; } .l-grid--1 .c-card:nth-child(7n-2) h2 { font-size: 2.1694252211rem; } } .l-grid--1 .c-card:nth-child(6n-5) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } @media all and (min-width: 75em) { .l-grid--2 .c-card:nth-child(5n) { grid-column: span 2; } .l-grid--2 .c-card:nth-child(5n) h2 { font-size: 2.1694252211rem; } } .l-grid--2 .c-card:nth-child(8n-6) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } @media all and (min-width: 75em) { .l-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 75em) { .l-grid--3 .c-card:nth-child(2n) { grid-column: span 1; } } .l-grid--3 .c-card:nth-child(8n-6) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } @media all and (min-width: 75em) { .l-grid--4 .c-card:nth-child(5n) { grid-column: span 4; } .l-grid--4 .c-card:nth-child(5n) h2 { font-size: 2.1694252211rem; } } .l-grid--4 .c-card:nth-child(8n-6) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } @media all and (min-width: 37.5em) { .l-grid--5 { grid-template-columns: repeat(2, 1fr); } } .l-grid--5 .c-card:nth-child(5n-2) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } @media all and (min-width: 37.5em) { .l-grid--6 { grid-template-columns: repeat(1, 1fr); } } .l-grid--6 .c-card:nth-child(3n) .c-card__image > a:after { background: var(--color); opacity: var(--card-accent-opacity); } .c-card { border-radius: var(--border-radius); font-size: 0.8239746086rem; height: var(--card-height); overflow: hidden; padding: 0; position: relative; text-align: center; } .c-card:after { background: var(--dark); content: ""; display: inherit; height: 100%; z-index: 0; } .c-card__image { margin: 0; } .c-card__image > a { display: block; overflow: hidden; position: relative; } .c-card__image > a:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: var(--card-opacity); position: absolute; top: 0; width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .c-card__image img { display: block; height: var(--card-height); -o-object-fit: cover; object-fit: cover; width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .c-card:hover .c-card__image > a:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: var(--card-accent-opacity); position: absolute; top: 0; width: 100%; } .c-card:hover .c-card__image img { -webkit-transform: scale(1.6) rotate(-10deg); transform: scale(1.6) rotate(-10deg); } .c-card__header { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } .c-card__header > h2 { font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.1567604947 * ((100vw - 20rem) / 46), 1.2945382732rem); margin-top: 0.5rem; } .c-card__header > h2 > a { color: var(--white); text-decoration: none; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; } .c-card__header > h2 > a:hover { color: var(--white); } .c-card__header > h2 > a:active { color: var(--white); } .c-card__header > h2 > a:focus { color: var(--white); outline: none; } .c-card__header > h2 > a::before { content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .c-card__header > p { color: var(--white); font-size: 0.6789341556rem; margin: 0; text-transform: uppercase; } .post__image { display: inline-block; } .post__image > img { display: inline-block; } .post__image--left { float: left; margin-bottom: 1.5rem; margin-right: 1.5rem; max-width: 50%; } .post__image--right { float: right; margin-bottom: 1.5rem; margin-left: 1.5rem; max-width: 50%; } .post__image--center { display: block; margin-left: auto; margin-right: auto; text-align: center; } .post__image--wide { display: block; } @media all and (min-width: 56.25em) { .post__image--wide { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 0 var(--page-margin); text-align: center; } .post__image--wide a, .post__image--wide img { display: block; height: auto; margin: auto; max-width: var(--page-width); width: 100%; } } .post__image--full { display: block; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); text-align: center; } .post__image--full a, .post__image--full img { display: block; height: auto; width: 100%; } .post__meta { color: var(--gray-1); font-size: 0.8239746086rem; } .post__entry { margin: 1.5rem 0 3rem; } @media all and (min-width: 56.25em) { .post__entry { margin: 2.75rem auto; } } .post__entry > :nth-child(1) { margin-top: 0; } .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button) { text-decoration: none; } .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .post__video, .post__iframe { position: relative; display: block; margin-top: calc(1rem + 1vw); margin-bottom: calc(1rem + 1vw); overflow: hidden; padding: 0; width: 100%; } .post__video::before, .post__iframe::before { display: block; content: ""; padding-top: var(--embed-aspect-ratio); } .post__video iframe, .post__video video, .post__iframe iframe, .post__iframe video { border: none; height: 100%; left: 0; position: absolute; top: 0; bottom: 0; width: 100%; } .post__toc ul { counter-reset: item; list-style: decimal; margin: calc(0.5rem + 0.25vw) 0 calc(1.5rem + 0.25vw) 2ch; } .post__toc ul li { counter-increment: item; padding: 0; } .post__toc ul ul { margin-top: 0; } .post__toc ul ul li { display: block; } .post__toc ul ul li:before { content: counters(item, ".") ". "; margin-left: -20px; } .post__bio { border-top: 1px solid var(--light); margin: 1.5rem 0 0; overflow: hidden; padding: 2.75rem 0 1.5rem; text-align: center; font-size: 0.8789062495rem; } @media all and (min-width: 37.5em) { .post__bio { padding-left: 6rem; text-align: left; } } .post__bio > img { border-radius: 50%; height: 4rem; margin: 0 0 1.5rem; width: 4rem; } @media all and (min-width: 37.5em) { .post__bio > img { float: left; margin-left: -5.5rem; } } .post__bio > h3 { margin: 0; } .post__bio a { text-decoration: none; } .post__bio a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .post__share { display: flex; flex-wrap: wrap; margin: 2.75rem -0.25rem; } .post__share > a { border-radius: var(--border-radius); color: var(--white) !important; display: inline-block; flex: 1 1 auto; font: var(--font-weight-bold) 0.6789341556rem var(--body-font); letter-spacing: 0.5px; margin: 0 1% 0.25rem 0; padding: 0.75rem 1rem; text-transform: uppercase; text-align: center; } @media all and (max-width: 37.4375em) { .post__share > a { width: 48%; } } .post__share > a:hover { background: var(--dark); text-decoration: none; } .post__share svg { fill: white; height: 0.9rem; margin: 0 0.5rem 0 0; pointer-events: none; vertical-align: middle; width: 0.9rem; } .post__last-updated { color: var(--gray-1); font-size: 0.7724761953rem; font-style: italic; margin: -1.5rem 0 2.75rem; } .post__tag { border-top: 1px solid var(--light); margin-top: 1.5rem; margin-left: 0; padding-top: 2.75rem; } .post__tag > li { display: inline-block; list-style: none; padding: 0; margin: 0 1% 0.25rem 0; } .post__tag > li > a { border-radius: var(--border-radius); border: 1px solid var(--light); color: var(--dark); display: block; font: var(--font-weight-normal) 0.6789341556rem var(--body-font); letter-spacing: 0.5px; padding: 0.5rem 0.75rem; text-align: center; text-transform: uppercase; } .post__tag > li > a:hover { color: var(--white); background: var(--dark); border-color: var(--dark); text-decoration: none; } @media all and (max-width: 37.4375em) { .post__tag > li { width: 48%; } } .post__nav { align-items: flex-start; border-top: 1px solid var(--light); color: var(--gray-1); display: flex; font-size: 0.7724761953rem; justify-content: space-between; margin-top: 2.25rem; padding: 1.5rem 0; } .post__nav__prev, .post__nav__next { width: 50%; } .post__nav__prev { text-align: left; } .post__nav__next { flex-direction: row-reverse; margin-left: auto; text-align: right; } .post__nav h3 { font-size: 1rem; margin: 0; } .post__nav + .post__related { margin-top: 0; } .post__related { border-top: 1px solid var(--light); margin-top: 2.25rem; } .post__related__wrap { display: flex; flex-wrap: wrap; margin: 1.5rem -2% 0; width: 104%; } .post__related__wrap figure { flex-basis: 50%; margin: 0; padding: 0.75rem 2% 0; } @media all and (min-width: 37.5em) { .post__related__wrap figure { flex-basis: 33.333%; } } .post__related__wrap figure a { display: block; } .post__related__wrap figure a > img { border-radius: var(--border-radius); height: 8rem; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.24s ease; transition: all 0.24s ease; width: 100%; } .post__related__wrap figure a:hover img { opacity: 0.8; } .post__related__wrap figcaption { font-style: normal; margin-top: 1rem; text-align: left; } .post__related__wrap h4 { font-size: 1rem; margin: 0.5rem 0; } .comments-area { border-top: 1px solid var(--light); margin-top: 2.25rem; } .banner { text-align: center; } .banner--before-post { margin-bottom: 1.5rem; } @media all and (min-width: 56.25em) { .banner--before-post { margin-bottom: 3.25rem; } } .banner--after-post { margin-top: calc(2.25rem + 0.5vw); } .page__desc > :nth-child(1) { margin-top: 0; } .page__desc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .page__desc a:hover { text-decoration: none; } .page--author__thumb { border-radius: 50%; } .page--author__website { align-items: center; display: inline-flex; margin-top: calc(1rem + 0.5vw); } .page--author__website a { margin-left: 0.4rem; } .page--search form { align-items: flex-start; display: flex; flex-wrap: wrap; margin: 1.5rem 0 -1rem; } @media all and (min-width: 56.25em) { .page--search form { margin-top: 2.75rem; } } @media all and (max-width: 37.4375em) { .page--search input { margin-bottom: 0.5rem; } } @media all and (min-width: 20em) { .page--search input { flex: 1 0 auto; margin-right: 0.5rem; } } @media all and (max-width: 37.4375em) { .page--search button { width: 100%; } } .page--error { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; } .msg { padding: 1rem 1.5rem; } .msg--highlight { background-color: #fff7e5; } .msg--info { background-color: #d9edf7; } .msg--success { background: #d5efc2; } .dropcap:first-letter { float: left; font-family: var(--heading-font); font-size: 2.8084039796rem; line-height: 0.9; margin-right: 0.5rem; padding: 0.5rem 0.25rem 0.5rem 0; } .pec-wrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .pec-overlay { align-items: center; background-color: var(--light); font-size: 14px; display: none; height: inherit; justify-content: center; line-height: 1.4; padding: 1rem; position: relative; text-align: center; } @media all and (min-width: 37.5em) { .pec-overlay { font-size: 16px; line-height: var(--line-height); padding: 1rem 2rem; } } .pec-overlay.is-active { display: flex; } .pec-overlay-inner p { margin: 0 0 1rem; } .post__share .facebook { background: #0866FF; } .post__share .twitter { background: #000000; } .post__share .instagram { background: #000000; } .post__share .vimeo { background: #1ab7ea; } .post__share .pinterest { background: #bd081c; } .post__share .youtube { background: #cd201f; } .post__share .linkedin { background: #007bb6; } .post__share .buffer { background: #333333; } .post__share .mix { background: #fd8235; } .post__share .whatsapp { background: #25D366; } .pagination { display: flex; justify-content: center; margin-top: calc(2.25rem + 0.5vw); } .pagination > a + a { margin-left: 0.5rem; } .gallery { margin: calc(1rem + 1vw) -0.5rem; } @media all and (min-width: 20em) { .gallery { display: flex; flex-wrap: wrap; } } @media all and (min-width: 56.25em) { .gallery-wrapper--wide { display: flex; justify-content: center; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 0 var(--page-margin); } .gallery-wrapper--wide .gallery { max-width: var(--page-width); } } .gallery-wrapper--full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } @media all and (min-width: 20em) { .gallery[data-columns="1"] .gallery__item { flex: 1 0 100%; } } @media all and (min-width: 30em) { .gallery[data-columns="2"] .gallery__item { flex: 1 0 50%; } } @media all and (min-width: 37.5em) { .gallery[data-columns="3"] .gallery__item { flex: 1 0 33.333%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="4"] .gallery__item { flex: 0 1 25%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="5"] .gallery__item { flex: 0 1 20%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="6"] .gallery__item { flex: 0 1 16.666%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="7"] .gallery__item { flex: 1 0 14.285%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="8"] .gallery__item { flex: 1 0 12.5%; } } .gallery__item { margin: 0; padding: 0.5rem; position: relative; } @media all and (min-width: 20em) { .gallery__item { flex: 1 0 50%; } } @media all and (min-width: 30em) { .gallery__item { flex: 1 0 33.333%; } } @media all and (min-width: 37.5em) { .gallery__item { flex: 1 0 25%; } } .gallery__item a { display: block; height: 100%; width: 100%; } .gallery__item a::after { background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); bottom: 0.5rem; content: ""; display: block; opacity: 0; left: 0.5rem; height: calc(100% - 1rem); position: absolute; right: 0.5rem; top: 0.5rem; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; width: calc(100% - 1rem); } .gallery__item a:hover::after { opacity: 1; } .gallery__item img { display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .gallery__item figcaption { bottom: 1.2rem; color: var(--white); left: 50%; opacity: 0; position: absolute; text-align: center; -webkit-transform: translate(-50%, 1.2rem); transform: translate(-50%, 1.2rem); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .gallery__item:hover figcaption { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .pswp--dark .pswp__bg { background: var(--black); } .pswp--light .pswp__bg { background: var(--white); } .pswp--light .pswp__counter { color: var(--dark); } .pswp--light .pswp__caption__center { color: var(--dark); } .footer { background: var(--dark); overflow: hidden; padding: calc(2.25rem + 1vw) 0 calc(3rem + 1.5vw); margin: calc(2.25rem + 0.5vw) 0 0; text-align: center; } .footer a { color: var(--white); } .footer a:hover { color: rgba(255, 255, 255, 0.7); } .footer__copyright { color: var(--gray-2); font-size: 0.6789341556rem; letter-spacing: 1px; text-transform: uppercase; } .footer__social svg { fill: var(--white); height: 1rem; margin: 1.5rem 0.375rem 0; opacity: 0.6; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; width: 1rem; } .footer__social svg:hover { opacity: 1; } .footer__bttop { bottom: 1.25rem; border-radius: 50%; line-height: 1; opacity: 0; padding: 0.45rem; position: fixed; right: 2rem; text-align: center; width: auto !important; visibility: hidden; z-index: 999; } @media all and (min-width: 56.25em) { .footer__bttop { bottom: 2.5rem; } } .footer__bttop:hover { opacity: 1; } .footer__bttop > svg { fill: var(--white); height: 23px; margin: 0; width: 23px; } .footer__bttop.is-visible { visibility: visible; opacity: 1; }