*, *: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(1.1rem, 1.1rem + 0.1 * ((100vw - 20rem) / 50), 1.2rem); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } html.no-scroll { overflow: hidden; position: fixed; } body { background: var(--page-bg); color: var(--text-color); font-family: var(--body-font); font-variation-settings: "wght" var(--font-weight-normal); line-height: var(--line-height); -ms-scroll-chaining: none; overscroll-behavior: none; } a { text-decoration: none; } a { color: var(--link-color); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } a:hover { color: var(--link-color-hover); } a:active { color: var(--link-color-hover); } a:focus { outline: none; } .invert { color: var(--link-color-hover); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .invert:hover { color: var(--link-color); } .invert:active { color: var(--link-color); } .invert:focus { outline: none; } p, ul, ol, dl { margin-top: calc(1.1333333333rem + 0.25vw); } blockquote, figure, hr, pre, table { margin-top: calc(1.7rem + 0.5vw); margin-bottom: calc(1.7rem + 0.5vw); } h1, h2, h3, h4, h5, h6 { color: var(--headings-color); font-family: var(--heading-font); font-variation-settings: "wght" var(--headings-weight); -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; line-height: 1.2; margin-top: calc(1.7rem + 1vw); text-transform: var(--headings-transform); } h1, .h1 { font-size: clamp(1.5710900065rem, 1.5710900065rem + 1.424540906 * ((100vw - 20rem) / 50), 2.9956309125rem); font-family: var(--heading-font); } h2, .h2 { font-size: clamp(1.3808408252rem, 1.3808408252rem + 0.9332127447 * ((100vw - 20rem) / 50), 2.3140535699rem); } h3, .h3 { font-size: clamp(1.2136296308rem, 1.2136296308rem + 0.4621997101 * ((100vw - 20rem) / 50), 1.6758293408rem); } h4, .h4 { font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.1567604947 * ((100vw - 20rem) / 50), 1.2945382732rem); } h5, .h5 { font-size: clamp(1.066666667rem, 1.066666667rem + 0.0711111115 * ((100vw - 20rem) / 50), 1.1377777785rem); } h6, .h6 { font-size: clamp(1rem, 1rem + 0 * ((100vw - 20rem) / 50), 1rem); } h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: calc(0.5666666667rem + 0.25vw); } b, strong { font-variation-settings: "wght" var(--font-weight-bold); } blockquote { color: var(--headings-color); font-family: var(--heading-font); padding: 3.6833333333rem 0 0; position: relative; text-align: center; font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.2430630467 * ((100vw - 20rem) / 50), 1.3808408252rem); } blockquote::before { color: var(--dark); content: "“"; font: normal 320%/0.9 Georgia, Times, Times New Roman, serif; top: 0.5666666667rem; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } blockquote > :nth-child(1) { margin-top: 0; } ul, ol { margin-left: 2rem; } ul > li, ol > li { list-style: inherit; padding: 0 0 0.2833333333rem 0.85rem; } dl dt { font-variation-settings: "wght" var(--font-weight-bold); } pre { background-color: var(--lighter); font-size: 0.8239746086rem; padding: 1.7rem; white-space: pre-wrap; word-wrap: break-word; } pre > code { color: var(--text-color); display: inline-block; font-size: inherit; padding: 0; } code { background-color: var(--lighter); color: var(--color); font-size: 0.8239746086rem; font-family: Menlo, Monaco, Consolas, Courier New, monospace; } table { border: 1px solid var(--light); border-collapse: collapse; border-spacing: 0; vertical-align: top; text-align: left; width: 100%; } table th { font-variation-settings: "wght" var(--font-weight-bold); padding: 0.7083333333rem 1.1333333333rem; } table td { border-top: 1px solid var(--light); padding: 0.7083333333rem 1.1333333333rem; } .table-striped tr:nth-child(2n) { background: var(--lighter); } .table-bordered th, .table-bordered td { border: 1px solid var(--light); } .table-title th { background: var(--lighter); } figcaption { clear: both; color: var(--gray); font-style: italic; font-size: 0.7241964329rem; margin: 0.85rem 0 0; text-align: center; } kbd { background: var(--dark); border-radius: 2px; color: var(--white); font-family: Menlo, Monaco, Consolas, Courier New, monospace; font-size: 0.8789062495rem; padding: 0.1416666667rem 0.425rem; } sub, sup { font-size: 65%; } small { font-size: 0.8789062495rem; } 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(--color); border: 1px solid var(--color); border-radius: 2px; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.08); color: var(--white); cursor: pointer; display: inline-block; font-family: var(--body-font); font-size: 0.6789341556rem; font-variation-settings: "wght" var(--font-weight-bold); overflow: hidden; padding: 0.5666666667rem 1.4166666667rem; text-align: center; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; text-transform: uppercase; vertical-align: middle; will-change: transform; } @media all and (max-width: 19.9375em) { .btn, [type=button], [type=submit], button { width: 100%; } } @media all and (max-width: 37.4375em) { .btn, [type=button], [type=submit], button { margin-bottom: 0.5666666667rem; } } .btn:hover, [type=button]:hover, [type=submit]:hover, button:hover, .btn:active, [type=button]:active, [type=submit]:active, button:active, .btn:focus, [type=button]:focus, [type=submit]:focus, button:focus { -webkit-box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); color: var(--white); -webkit-transform: translateY(-2px); transform: translateY(-2px); } @media all and (min-width: 20em) { .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-left: 0.5666666667rem; } } .btn:disabled, [type=button]:disabled, [type=submit]:disabled, button:disabled { background-color: var(--light); border-color: var(--light); color: var(--gray); cursor: not-allowed; } [type=button], [type=submit], button { -webkit-appearance: none; -moz-appearance: none; } ::-webkit-search-cancel-button { -webkit-appearance: none; } fieldset { border: 1px solid var(--light); margin: calc(1.7rem + 1vw) 0 0; padding: 1.7rem; } fieldset > legend { margin-left: -1rem; padding: 0 1rem; } legend { font-variation-settings: "wght" 500; padding: 0; } label { font-variation-settings: "wght" 500; margin: 0 1.1333333333rem 0.85rem 0; } [type=text], [type=url], [type=tel], [type=number], [type=email], [type=search], textarea, select { background-color: var(--page-bg); border: none; border: 1px solid var(--light); color: var(--text-color); font-size: 1rem; outline: none; padding: 0.34rem 0.85rem; vertical-align: middle; 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(--dark); } 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.4166666667rem; line-height: 1.4166666667rem; margin-right: 1.1333333333rem; vertical-align: middle; text-align: center; width: 1.4166666667rem; } 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='%23d73a42'/%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='%23d73a42'/%3e%3c/svg%3e"); } [type=file] { margin-bottom: 1.7rem; 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: 3.4rem; } select[multiple] { border: 1px solid var(--light); padding: 1.7rem; width: 100%; } select[multiple]:hover { border-color: var(--light); } select[multiple]:focus { border-color: var(--dark); } select[multiple]:disabled { background-color: var(--light); cursor: not-allowed; } select[multiple]:disabled:hover { border-color: var(--light); } textarea { display: block; overflow: auto; resize: vertical; max-width: 100%; } .top { align-items: center; display: flex; height: var(--navbar-height); position: absolute; padding: 0 var(--page-margin); -webkit-transition: background 0.5s ease; transition: background 0.5s ease; width: 100%; z-index: 2; } @media all and (min-width: 56.25em) { .top { justify-content: space-between; height: var(--navbar-height); } } .top.is-visible { background: var(--section-bg); -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06); opacity: 1; 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; width: 100%; } @media all and (min-width: 56.25em) { .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(--logo-color) !important; font-size: 1.2136296308rem; font-family: var(--logo-font); font-variation-settings: "wght" var(--font-weight-normal); margin-right: auto; } .logo > img { height: var(--navbar-height); -o-object-fit: contain; object-fit: contain; padding: 0.5666666667rem 0; width: auto; } .search { order: 2; } @media all and (min-width: 56.25em) { .search { order: 3; } } .search__btn { border: none !important; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; margin: 0; padding: 0.5666666667rem; width: auto; } @media all and (min-width: 56.25em) { .search__btn { margin-left: 1rem; padding-right: 0; } } .search__btn:hover, .search__btn:focus { -webkit-transform: translateY(0); transform: translateY(0); } .search__btn:hover > svg, .search__btn:focus > svg { fill: rgba(255, 255, 255, 0.7); } .search__btn > svg { display: block; fill: var(--white); height: 15px; -webkit-transition: all 0.24s ease; transition: all 0.24s ease; width: 15px; } .search__form { flex-basis: 90%; } .search__input { background: none; border: none !important; color: var(--white); display: none; font-family: var(--heading-font); margin: 0 !important; opacity: 0; padding: 0; width: 100%; font-size: clamp(1.2136296308rem, 1.2136296308rem + 0.3574603758 * ((100vw - 20rem) / 50), 1.5710900065rem); } .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(--white); 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: rgba(255, 255, 255, 0.7); } .search__overlay { background-color: var(--section-bg); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); left: 0; opacity: 0; position: fixed; -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: 4.4rem; justify-content: space-between; padding: 0 var(--page-margin); } @media all and (min-width: 56.25em) { .search__overlay-inner { height: 6rem; } } .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.12s forwards; animation: slideininput 0.24s 0.12s 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.12s forwards; animation: slideinclose 0.24s 0.12s forwards; } @-webkit-keyframes slideinclose { 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideinclose { 60% { opacity: 0; } 100% { opacity: 1; } } .navbar { order: 3; } .navbar .navbar__menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } @media all and (max-width: 56.1875em) { .navbar .navbar__menu { display: none; } } .navbar .navbar__menu li { font-family: var(--menu-font); display: block; font-size: 0.7724761953rem; line-height: var(--line-height); font-variation-settings: "wght" 500; padding: 0; position: relative; text-transform: uppercase; width: auto; } .navbar .navbar__menu li a, .navbar .navbar__menu li span[aria-haspopup=true] { color: var(--nav-link-color); display: block; padding: 0 0.5666666667rem; -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(--nav-link-color-hover); } .navbar .navbar__menu li span { color: var(--nav-link-color); cursor: default; display: block; padding: 0 0.5666666667rem; } .navbar .navbar__menu > li:hover > a, .navbar .navbar__menu > li:hover > span[aria-haspopup=true] { color: var(--nav-link-color-hover); } .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.85rem; } .navbar .has-submenu:active > .navbar__submenu:before, .navbar .has-submenu:focus > .navbar__submenu:before, .navbar .has-submenu:hover > .navbar__submenu:before { content: ""; height: 0.85rem; position: absolute; width: 100%; top: -0.85rem; } .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(--section-bg); -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: 10px 0; position: absolute; 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.7241964329rem; } .navbar .navbar__submenu li a, .navbar .navbar__submenu li span[aria-haspopup=true] { color: var(--nav-link-color-hover) !important; padding: 0.5666666667rem 1.4166666667rem; -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(var(--white-rgb), 0.05); color: var(--nav-link-color) !important; } .navbar .navbar__submenu li span { color: var(--nav-link-color-hover) !important; padding: 0.5666666667rem 1.4166666667rem; } .navbar .navbar__submenu li:hover > a, .navbar .navbar__submenu li:hover > span[aria-haspopup=true] { color: var(--nav-link-color) !important; } .navbar .navbar__toggle { background: var(--section-bg); -webkit-box-shadow: none; box-shadow: none; border: none; border-radius: 3px; cursor: pointer; display: block; line-height: 1; margin: 0; overflow: visible; padding: 1rem; position: relative; right: -1rem; text-transform: none; z-index: 2004; } @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(--white); 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(--page-bg); height: calc(100vh - 4.4rem); left: 0; opacity: 1; overflow: auto; pointer-events: auto; position: fixed; top: 4.4rem; -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: 1001; } .navbar_mobile_overlay.is-hidden { opacity: 0; pointer-events: none; } .navbar_mobile_overlay .navbar__menu { margin: 24px; } .navbar_mobile_overlay .navbar__menu li { list-style: none; margin: 0; padding: 0; text-align: center; } .navbar_mobile_overlay .navbar__menu li a, .navbar_mobile_overlay .navbar__menu li span { color: var(--dark); display: block; padding: 0.5666666667rem; 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 span:active, .navbar_mobile_overlay .navbar__menu li span:focus, .navbar_mobile_overlay .navbar__menu li span:hover { color: var(--dark); } .navbar_mobile_overlay .navbar__menu li a[aria-haspopup=true]::after, .navbar_mobile_overlay .navbar__menu li span[aria-haspopup=true]::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: currentColor transparent transparent transparent; left: 0.5666666667rem; top: 15px; 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(--page-bg); -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: 1001; } .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: currentColor 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; } .site-container { background: var(--page-bg); max-width: 100%; overflow: hidden; } .wrapper { -webkit-box-sizing: content-box; box-sizing: content-box; max-width: var(--entry-width); margin: 0 auto; padding: 0 var(--page-margin); } .readmore { display: inline-block; color: var(--gray); font-size: 0.8239746086rem; font-style: italic; text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .hero { background: var(--hero-bg); height: var(--hero-height); position: relative; top: 0; z-index: 1; } .hero__content { bottom: 10%; color: var(--hero-text-color); left: 50%; position: absolute; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 100%; z-index: 2; } .hero__content h1 { color: var(--hero-heading-color); } .hero__content h1 > sup { font-size: 1.066666667rem; vertical-align: top; } .hero__content h1 + p { margin-top: calc(0.2833333333rem + 0.25vw); } .hero__content a { color: var(--hero-link-color); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .hero__content a:hover { color: var(--hero-link-color-hover); } .hero__content a:active { color: var(--hero-link-color); } .hero__content a:focus { outline: none; } .hero__image { height: 100%; margin: 0; position: absolute; width: 100%; } .hero__image--overlay::after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.64))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .hero__image > img { display: block; height: inherit; -o-object-fit: cover; object-fit: cover; width: inherit; } .hero__image > figcaption { background: var(--page-bg); border-radius: calc(4 * var(--border-radius)); bottom: 1rem; color: var(--text-color); display: block; padding: 0 0.34rem; position: absolute; text-align: right; right: var(--page-margin); z-index: 3; } .feed__item { margin-top: calc(2.55rem + 1.5vw); padding-bottom: calc(0.5666666667rem + 1vw); } .feed__image { -webkit-box-sizing: content-box; box-sizing: content-box; margin: calc(1.7rem + 1vw) auto; max-width: calc(var(--entry-width) + 20%); padding: 0 6vw; } .feed__image > img { display: inline-block; height: auto; width: 100%; } .feed__meta { align-items: center; color: var(--gray); display: flex; font-size: 0.8239746086rem; margin-bottom: calc(-1.1333333333rem - 1vw); } .feed__author { font-family: var(--menu-font); font-variation-settings: "wght" var(--font-weight-bold); text-decoration: none; } .feed__date { color: var(--gray); font-style: italic; } .feed__author + .feed__date { margin-left: 0.85rem; } .feed__author + .feed__date::before { content: ""; background: var(--light); display: inline-block; height: 1px; margin-right: 4px; width: 1rem; vertical-align: middle; } .feed__readmore { margin-top: calc(1.1333333333rem + 0.25vw); } .feed--grid { display: grid; grid-template-columns: 100%; grid-gap: calc(1.7rem + 1.5vw); margin-top: 0; padding-top: calc(2.55rem + 1.5vw); } @media all and (min-width: 37.5em) { .feed--grid { grid-template-columns: repeat(2, 1fr); } } .feed--grid h2 { margin-top: 0; } .feed--grid sup { font-size: 1.066666667rem; vertical-align: top; } .feed--grid-tag-desc > :nth-child(1) { margin-top: 0; } .post__image { display: inline-block; } .post__image > img { display: inline-block; } .post__image--left { float: left; margin-bottom: 1.7rem; margin-right: 1.7rem; max-width: 50%; } .post__image--right { float: right; margin-bottom: 1.7rem; margin-left: 1.7rem; 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(-1 * var(--page-margin)); margin-right: calc(-1 * var(--page-margin)); text-align: center; } .post__image--wide a, .post__image--wide img { display: block; height: auto; 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); font-size: 0.8239746086rem; font-style: italic; margin-bottom: calc(-1.4166666667rem - 1vw); } .post__meta--author { border-top: 1px solid var(--hero-border-color); font-style: normal; display: inline-block; margin-top: 1.7rem; padding-top: 1.4166666667rem; } @media all and (min-width: 37.5em) { .post__meta--author { margin-top: 2.8333333333rem; padding-top: 1.7rem; } } .post__author-thumb { border-radius: 50%; height: 1.7rem; margin-right: 0.5666666667rem; width: 1.7rem; } .post__entry { margin-top: calc(2.55rem + 1.5vw); } .post__entry > :nth-child(1) { margin-top: 0; } .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a) { color: var(--link-color-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):hover, .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):active, .post__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):focus { color: var(--link-color); } .post__avatar-thumbs { border-radius: 50%; height: 4.5333333333rem; width: 4.5333333333rem; } .post__last-updated { color: var(--gray); font-size: 0.7724761953rem; font-style: italic; margin-top: 2.2666666667rem; } .post__last-updated + .post__tag { margin: 1.1333333333rem 0 0; } .post__tag { margin: 2.2666666667rem 0 0; font-family: var(--menu-font); font-size: 0.8239746086rem; } .post__tag > li { display: inline-block; margin-right: 0.2833333333rem; padding: 0; } .post__tag > li > a { background: var(--lighter); border-radius: calc(4 * var(--border-radius)); color: var(--dark); font-size: 0.7241964329rem; font-variation-settings: "wght" var(--font-weight-normal); padding: 0.425rem 0.85rem; } .post__tag > li > a:hover { background: var(--light); } .post__share { display: flex; flex-wrap: wrap; margin: calc(2.8333333333rem + 1vw) -0.2833333333rem 0; } .post__share > a { border-radius: calc(4 * var(--border-radius)); flex: 1 1 auto; margin: 0.2833333333rem; line-height: 0; padding: 0.7083333333rem 1.1333333333rem; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; text-align: center; } .post__share > a:hover { -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .post__share > a span { color: var(--white); font-family: var(--menu-font); font-size: 0.5967194723rem; font-variation-settings: "wght" var(--font-weight-bold); margin-left: 0.2833333333rem; text-transform: uppercase; } .post__share > a svg { fill: var(--white); height: 18px; pointer-events: none; width: 18px; vertical-align: middle; } .post__bio { align-items: center; display: flex; margin: calc(3.4rem + 1vw) 0 calc(3.4rem + 2vw); } @media all and (min-width: 37.5em) { .post__bio::before { content: ""; border-top: 1px solid var(--light); height: 1px; margin-right: 2rem; width: 20%; } } .bio__avatar { border-radius: 50%; flex-shrink: 0; height: 3rem; margin-right: 1.2rem; width: 3rem; } @media all and (min-width: 37.5em) { .bio__avatar { height: 4rem; margin-right: 2rem; width: 4rem; } } .bio__name { font-family: var(--menu-font); font-size: 1rem; font-variation-settings: "wght" var(--font-weight-bold); margin: 0; } .bio__desc { font-family: var(--body-font); font-size: 0.8239746086rem; line-height: 1.5; } @media all and (min-width: 37.5em) { .bio__desc { width: 80%; } } .bio__desc > :nth-child(1) { margin-top: 0.5666666667rem; } .bio__desc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .bio__desc a { color: var(--link-color-hover); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .bio__desc a:hover { color: var(--link-color); } .bio__desc a:active { color: var(--link-color); } .bio__desc a:focus { outline: none; } .post__nav { border-top: 1px solid var(--light); margin-top: calc(2.55rem + 1vw); padding: 2.55rem var(--page-margin) 2.8333333333rem; position: relative; } @media all and (min-width: 37.5em) { .post__nav-inner { display: flex; justify-content: space-between; } } @media all and (min-width: 37.5em) { .post__nav-prev, .post__nav-next { align-items: center; display: flex; } } .post__nav-prev svg, .post__nav-next svg { fill: var(--gray); } @media all and (max-width: 37.4375em) { .post__nav-prev svg, .post__nav-next svg { display: none; } } @media all and (min-width: 37.5em) { .post__nav-next { margin-left: auto; text-align: right; } } @media all and (max-width: 37.4375em) { .post__nav-prev + .post__nav-next { margin-top: 1.1333333333rem; } } @media all and (min-width: 37.5em) { .post__nav-prev + .post__nav-next { margin-left: 1.7rem; } } .post__nav-link { font-family: var(--body-font); font-size: 0.8239746086rem; font-style: italic; line-height: 1.5; } @media all and (min-width: 37.5em) { .post__nav-link[rel=prev] { padding-left: 0.85rem; } } @media all and (min-width: 37.5em) { .post__nav-link[rel=next] { padding-right: 0.85rem; } } .post__nav-link > span { color: var(--gray); display: block; font-size: 0.7724761953rem; font-family: var(--menu-font); font-style: normal; } .post__nav + .post__related { margin-top: 0; } .post__nav + .post__comments { border-top: 1px solid var(--light); margin-top: 0; } .post__related { background: var(--lighter); margin-top: calc(2.55rem + 1vw); margin-bottom: calc(-2.55rem - 1vw); padding: calc(0.85rem + 1vw) 0 calc(3.4rem + 3vw); } .related__item { margin-top: calc(3.4rem + 1vw); } .related__item::before { content: ""; border-top: 1px solid var(--light); display: block; height: 1px; margin-bottom: 2rem; width: 20%; } .post__related + .post__comments { border-top: none; } .post + .post__comments { margin-top: 0; } .post + .post__comments .h5 { margin-top: 0; } .post__comments { margin-top: calc(2.55rem + 1vw); overflow: hidden; } .post__video, .post__iframe { display: block; margin-top: calc(1.7rem + 0.5vw); margin-bottom: calc(1.7rem + 0.5vw); overflow: hidden; padding: 0; position: relative; 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 h3 { font-size: 1rem; margin: 0; } .post__toc ul { counter-reset: item; list-style: decimal; margin: calc(0.5666666667rem + 0.25vw) 0 0 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: -2ch; } .banner { text-align: center; } .banner--after-post { margin-top: calc(2.55rem + 1vw); } .page__desc > :nth-child(1) { margin-top: calc(0.2833333333rem + 0.25vw); } .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--author__avatar { border-radius: 50%; height: 3rem; margin-bottom: calc(-1.4166666667rem - 1vw); width: 3rem; } @media all and (min-width: 37.5em) { .page--author__avatar { height: 4rem; width: 4rem; } } .page--author__website { align-items: center; display: inline-flex; } .page--author__website a { font-family: var(--menu-font); font-variation-settings: "wght" var(--font-weight-bold); margin-left: 0.4rem; text-decoration: none; } .page--search form { align-items: flex-start; display: flex; flex-wrap: wrap; } @media all and (max-width: 37.4375em) { .page--search input { margin-bottom: 0.5666666667rem; } } @media all and (min-width: 20em) { .page--search input { flex: 1 0 auto; margin-right: 0.5666666667rem; } } @media all and (max-width: 37.4375em) { .page--search button { width: 100%; } } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; } .msg { border-left: 4px solid; font-size: 0.9374999997rem; padding: 1.1333333333rem 1.7rem; position: relative; } .msg--highlight { background-color: rgba(var(--highlight-color-rgb), 0.4); border-color: var(--highlight-color); } .msg--info { background-color: rgba(var(--info-color-rgb), 0.4); border-color: var(--info-color); } .msg--success { background-color: rgba(var(--success-color-rgb), 0.4); border-color: var(--success-color); } .msg--warning { background-color: rgba(var(--warning-color-rgb), 0.4); border-color: var(--warning-color); } .ordered-list { counter-reset: listCounter; } .ordered-list li { counter-increment: listCounter; list-style: none; padding-left: 0.2833333333rem; position: relative; } .ordered-list li::before { color: var(--color); content: counter(listCounter, decimal-leading-zero) "."; font-variation-settings: "wght" var(--font-weight-bold); left: -2rem; position: absolute; } .dropcap:first-letter { color: var(--headings-color); float: left; font-size: 3.6355864383rem; line-height: 0.7; margin-right: 0.5666666667rem; padding: 0.5666666667rem 0.5666666667rem 0.5666666667rem 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; } .facebook { background: #0866FF; } .twitter { background: #000000; } .instagram { background: #000000; } .vimeo { background: #1ab7ea; } .pinterest { background: #bd081c; } .youtube { background: #cd201f; } .linkedin { background: #007bb6; } .buffer { background: #333333; } .mix { background: #fd8235; } .whatsapp { background: #25D366; } /* Pagination ------------------------ */ .pagination { display: flex; margin-top: calc(3.4rem + 1vw); } @media all and (min-width: 56.25em) { .pagination { margin-top: calc(5.1rem + 1vw); } } .pagination__item + .pagination__item { margin-left: 1.1333333333rem; } .pagination svg { fill: var(--gray); } /* Footer ------------------------ */ .footer { background: var(--section-bg); font-family: var(--menu-font); overflow: hidden; padding: calc(3.4rem + 1vw) var(--page-margin); margin: calc(2.55rem + 1vw) 0 0; text-align: center; } .footer__social svg { fill: var(--white); height: 0.9374999997rem; margin: 0 0.85rem; opacity: 0.6; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; width: 0.9374999997rem; } .footer__social svg:hover { opacity: 1; } .footer__copyright { color: var(--gray); font-size: 0.6789341556rem; letter-spacing: 1px; text-transform: uppercase; padding: 1.7rem 0; } .footer a { color: var(--white); } .footer a:hover { color: rgba(var(--white-rgb), 0.7); } .footer__bttop { bottom: 1.4166666667rem; border-radius: 50%; line-height: 1; opacity: 0; padding: 0.51rem; 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.8333333333rem; } } .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; } .gallery { margin: calc(1.7rem + 1vw) calc(var(--gallery-gap) * -1); } @media all and (min-width: 20em) { .gallery { display: flex; flex-wrap: wrap; } } @media all and (min-width: 56.25em) { .gallery-wrapper--wide { margin-left: calc(-1 * var(--page-margin)); margin-right: calc(-1 * var(--page-margin)); } .gallery-wrapper--wide .gallery { width: calc(100% + var(--gallery-gap) * 2); } } .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: var(--gallery-gap); 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: var(--gallery-gap); content: ""; display: block; opacity: 0; left: var(--gallery-gap); height: calc(100% - var(--gallery-gap) * 2); position: absolute; right: var(--gallery-gap); top: var(--gallery-gap); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; width: calc(100% - var(--gallery-gap) * 2); } .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: black; } .pswp--light .pswp__bg { background: var(--white); } .pswp--light .pswp__counter { color: var(--text-color); } .pswp--light .pswp__caption__center { color: var(--text-color); } .pswp .pswp__button { -webkit-box-shadow: none; box-shadow: none; -webkit-transform: none; transform: none; }