@charset "UTF-8"; :root { --page-margin: 6vw; --entry-width: 42rem; --navbar-height: 4.4rem; --line-height: 1.7; --font-weight-normal: 400; --font-weight-bold: 700; --headings-weight: 700; --headings-transform: none; --white: #FFFFFF; --white-rgb: 255,255,255; --black: #000000; --dark: #17181E; --gray-1: #61666C; --gray-2: #747577; --light: #E6E7EB; --lighter: #F3F3F3; --color: #D73A42; --color-rgb: 215,58,66; --text-color: #17181E; --headings-color: #17181E; --logo-color: #FFFFFF; --hero-height: 80vh; --hero-bg: #17181E; --hero-heading-color: #FFFFFF; --hero-text-color: rgba(255,255,255,0.75); --hero-link-color: #FFFFFF; --hero-link-color-hover: rgba(255,255,255,0.75); --hero-border-color: rgba(255,255,255,0.3); } @media all and (min-width: 56.25em) { :root { --navbar-height: 6rem; } } article, aside, footer, header, hgroup, main, nav, section { display: block; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } li { list-style: none; } img { height: auto; max-width: 100%; vertical-align: top; } button, input, select, textarea { font: inherit; } .facebook { background: #3b5998; } .twitter { background: #55acee; } .mix { background: #fd8235; } .instagram { background: #405de6; } .vimeo { background: #1ab7ea; } .pinterest { background: #bd081c; } .youtube { background: #cd201f; } .linkedin { background: #007bb6; } .buffer { background: #333333; } .whatsapp { background: #25D366; } ::-moz-selection { background: var(--color); color: var(--white); } ::selection { background: var(--color); color: var(--white); } html { font-smooth: always; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } html { font-size: 1.1rem; } @media screen and (min-width: 20rem) { html { font-size: calc(1.1rem + 0.1 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { html { font-size: 1.2rem; } } html.no-scroll { overflow: hidden; position: fixed; } body { background: var(--white); color: var(--text-color); font-family: var(--body-font); font-weight: var(--font-weight-normal); line-height: var(--line-height); -ms-scroll-chaining: none; overscroll-behavior: none; } a { color: var(--color); text-decoration: none; -webkit-transition: all 0.24s ease-out; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } a:hover { color: var(--dark); } a:active { color: var(--dark); } a:focus { outline: none; } .invert { color: var(--dark); text-decoration: none; -webkit-transition: all 0.24s ease-out; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .invert:hover { color: var(--color); } .invert:active { color: var(--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-weight: 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-family: var(--heading-font); } h1, .h1 { font-size: 1.5710900065rem; } @media screen and (min-width: 20rem) { h1, .h1 { font-size: calc(1.5710900065rem + 1.6242496345 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h1, .h1 { font-size: 3.195339641rem; } } h2, .h2 { font-size: 1.3808408252rem; } @media screen and (min-width: 20rem) { h2, .h2 { font-size: calc(1.3808408252rem + 1.0874829835 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h2, .h2 { font-size: 2.4683238087rem; } } h3, .h3 { font-size: 1.2136296308rem; } @media screen and (min-width: 20rem) { h3, .h3 { font-size: calc(1.2136296308rem + 0.4621997101 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h3, .h3 { font-size: 1.6758293408rem; } } h4, .h4 { font-size: 1.1377777785rem; } @media screen and (min-width: 20rem) { h4, .h4 { font-size: calc(1.1377777785rem + 0.1567604947 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h4, .h4 { font-size: 1.2945382732rem; } } h5, .h5 { font-size: 1.066666667rem; } @media screen and (min-width: 20rem) { h5, .h5 { font-size: calc(1.066666667rem + 0.0711111115 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h5, .h5 { font-size: 1.1377777785rem; } } h6, .h6 { font-size: 1rem; } @media screen and (min-width: 20rem) { h6, .h6 { font-size: calc(1rem + 0 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { h6, .h6 { font-size: 1rem; } } h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: calc(0.5666666667rem + 0.25vw); } b, strong { font-weight: var(--font-weight-bold); } blockquote { font-family: var(--heading-font); padding: 3.6833333333rem 0 0; position: relative; text-align: center; } blockquote { font-size: 1.1377777785rem; } @media screen and (min-width: 20rem) { blockquote { font-size: calc(1.1377777785rem + 0.2430630467 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { blockquote { font-size: 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); -ms-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-weight: 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-weight: 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: gray-2; 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-weight: var(--font-weight-bold); letter-spacing: 1.1377777785rem; padding-left: 1.1377777785rem; } .separator--dot::before { content: "·"; color: var(--dark); font-size: 1.2136296308rem; font-weight: 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-weight: var(--font-weight-bold); overflow: hidden; padding: 0.5666666667rem 1.4166666667rem; text-align: center; -webkit-transition: all 0.24s ease-out; -o-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); -ms-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-2); 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-weight: 500; padding: 0; } label { font-weight: 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(--white); border: none; border: 1px solid var(--light); 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 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--navbar-height); position: absolute; padding: 0 var(--page-margin); -webkit-transition: background 0.5s ease; -o-transition: background 0.5s ease; transition: background 0.5s ease; width: 100%; z-index: 2; } @media all and (min-width: 56.25em) { .top { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: var(--navbar-height); } } .top.is-visible { background: var(--dark); -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); -ms-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; -o-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; 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); -ms-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; -o-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; 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-weight: var(--font-weight-normal); margin-right: auto; } .logo > img { max-height: calc(3.9666666667rem + 1vw); } .search { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media all and (min-width: 56.25em) { .search { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; 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); -ms-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; -o-transition: all 0.24s ease; transition: all 0.24s ease; width: 15px; } .search__form { -ms-flex-preferred-size: 90%; 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%; } .search__input { font-size: 1.2136296308rem; } @media screen and (min-width: 20rem) { .search__input { font-size: calc(1.2136296308rem + 0.3574603758 * ((100vw - 20rem) / 50)); } } @media screen and (min-width: 70rem) { .search__input { font-size: 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); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.14s ease-out; -o-transition: all 0.14s ease-out; transition: all 0.14s ease-out; } .search__close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .search__close:hover { -webkit-transform: translateY(0); -ms-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(--dark); -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; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; top: 0; visibility: hidden; width: 100%; z-index: 2005; } .search__overlay-inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 4.4rem; -webkit-box-pack: justify; -ms-flex-pack: justify; 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); -ms-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 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .navbar .navbar__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; 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-weight: 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(--white); display: block; padding: 0 0.5666666667rem; -webkit-transition: all 0.24s ease-out; -o-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: rgba(var(--white-rgb), 0.7); } .navbar .navbar__menu li span { color: var(--white); cursor: default; display: block; padding: 0 0.5666666667rem; } .navbar .navbar__menu > li:hover > a, .navbar .navbar__menu > li:hover > span[aria-haspopup=true] { color: rgba(var(--white-rgb), 0.7); } .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); -ms-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; -ms-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(--dark); -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); left: -9999px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; white-space: nowrap; z-index: 1; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: 0 top; -ms-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); -o-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); 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: rgba(var(--white-rgb), 0.7) !important; padding: 0.5666666667rem 1.4166666667rem; -webkit-transition: all 0.24s ease; -o-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(--white) !important; } .navbar .navbar__submenu li span { color: rgba(var(--white-rgb), 0.7) !important; padding: 0.5666666667rem 1.4166666667rem; } .navbar .navbar__submenu li:hover > a, .navbar .navbar__submenu li:hover > span[aria-haspopup=true] { color: var(--white) !important; } .navbar .navbar__toggle { background: var(--dark); -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; -ms-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; -o-transition: transform, opacity 0.14s ease-out; 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; -o-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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; -o-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); -o-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); 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); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; -o-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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; -o-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); -ms-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; -o-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; 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.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); -o-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; } .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); -o-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); -o-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; } .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); -o-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); -o-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(--white); 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-2); 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); -ms-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 { font-weight: bold; } .hero__content a { color: var(--hero-link-color); text-decoration: none; -webkit-transition: all 0.24s ease-out; -o-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 { 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(--text-color); border-radius: 2px; bottom: 1rem; color: var(--light); 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 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: gray-2; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.8239746086rem; margin-bottom: calc(-1.4166666667rem - 1vw); } .feed__author { font-family: var(--menu-font); font-weight: var(--font-weight-bold); } .feed__date { color: var(--gray-2); 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: -ms-grid; display: grid; -ms-grid-columns: 100%; 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 { -ms-grid-columns: 1fr calc(1.7rem + 1.5vw) 1fr; grid-template-columns: repeat(2, 1fr); } } .feed--grid h2 { margin-top: 0; } .feed--grid sup { font-size: 1.066666667rem; vertical-align: top; } .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: gray-2; 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__avatar-thumbs { border-radius: 50%; height: 4.5333333333rem; width: 4.5333333333rem; } .post__last-updated { color: var(--gray-2); 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: 1px; color: var(--dark); font-size: 0.7241964329rem; padding: 0.2833333333rem 0.85rem; } .post__tag > li > a:hover { background: var(--light); } .post__share { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: calc(2.8333333333rem + 1vw) -0.2833333333rem 0; } .post__share > a { border-radius: 2px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0.2833333333rem; line-height: 0; padding: 0.7083333333rem 1.1333333333rem; -webkit-transition: all 0.24s ease-out; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; text-align: center; } .post__share > a:hover { -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } .post__share > a span { color: var(--white); font-family: var(--menu-font); font-size: 0.5967194723rem; font-weight: 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 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; 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%; -ms-flex-negative: 0; 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-weight: var(--font-weight-bold); margin: 0; } .bio__info > p { font-family: var(--body-font); font-size: 0.8239746086rem; line-height: 1.5; margin: 0.5666666667rem 0 0; } @media all and (min-width: 37.5em) { .bio__info > p { width: 80%; } } .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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media all and (min-width: 37.5em) { .post__nav-prev, .post__nav-next { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } } .post__nav-prev svg, .post__nav-next svg { fill: var(--gray-2); } @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-2); 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 { position: relative; display: block; margin-top: calc(1.7rem + 0.5vw); margin-bottom: calc(1.7rem + 0.5vw); overflow: hidden; padding: 0; width: 100%; } .post__video::before, .post__iframe::before { display: block; content: ""; padding-top: 56.25%; } .post__video--21by9::before, .post__iframe--21by9::before { padding-top: 42.857143%; } .post__video--4by3::before, .post__iframe--4by3::before { padding-top: 75%; } .post__video--1by1::before, .post__iframe--1by1::before { padding-top: 100%; } .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 1rem; } .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; } .banner { text-align: center; } .banner--after-post { margin-top: calc(2.55rem + 1vw); } .author__avatar { border-radius: 50%; height: 3rem; margin-bottom: calc(-1.4166666667rem - 1vw); width: 3rem; } @media all and (min-width: 37.5em) { .author__avatar { height: 4rem; width: 4rem; } } .author__website { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .author__website a { font-family: var(--menu-font); font-weight: var(--font-weight-bold); margin-left: 0.4rem; } .search-page__form { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: calc(1.7rem + .5vw); } @media all and (max-width: 37.4375em) { .search-page__input { margin-bottom: 0.5666666667rem; } } @media all and (min-width: 20em) { .search-page__input { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; margin-right: 0.5666666667rem; } } #disqus_thread { margin-top: 1.7rem; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; } .msg { padding: 1.1333333333rem 2.2666666667rem; } .msg--highlight { background-color: #FFFCF1; } .msg--info { background: #F2F9FF; } .msg--success { background: #F7FBF6; } .msg--warning { background: #FFF3F3; color: #A94442; } .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-weight: 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; } /* Pagination ------------------------ */ .pagination { display: -webkit-box; display: -ms-flexbox; 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-2); } /* Footer ------------------------ */ .footer { background: var(--dark); font-family: var(--body-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; -o-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-2); 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--show { visibility: visible; opacity: 1; } .footer__bttop--fade-out { opacity: 0.6; } .gallery { margin: calc(1.7rem + 1vw) -0.2833333333rem; } @media all and (min-width: 20em) { .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; 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% + 0.5666666667rem); } } .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 { -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; } } @media all and (min-width: 30em) { .gallery[data-columns="2"] .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } } @media all and (min-width: 37.5em) { .gallery[data-columns="3"] .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 33.333%; flex: 1 0 33.333%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="4"] .gallery__item { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="5"] .gallery__item { -webkit-box-flex: 0; -ms-flex: 0 1 20%; flex: 0 1 20%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="6"] .gallery__item { -webkit-box-flex: 0; -ms-flex: 0 1 16.666%; flex: 0 1 16.666%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="7"] .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 14.285%; flex: 1 0 14.285%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="8"] .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 12.5%; flex: 1 0 12.5%; } } .gallery__item { margin: 0; padding: 0.2833333333rem; position: relative; } @media all and (min-width: 20em) { .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; } } @media all and (min-width: 30em) { .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 33.333%; flex: 1 0 33.333%; } } @media all and (min-width: 37.5em) { .gallery__item { -webkit-box-flex: 1; -ms-flex: 1 0 25%; 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: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); bottom: 0.2833333333rem; content: ""; display: block; opacity: 0; left: 0.2833333333rem; height: calc(100% - 0.5666666667rem); position: absolute; right: 0.2833333333rem; top: 0.2833333333rem; -webkit-transition: all 0.24s ease-out; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; width: calc(100% - 0.5666666667rem); } .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); -ms-transform: translate(-50%, 1.2rem); transform: translate(-50%, 1.2rem); -webkit-transition: all 0.24s ease-out; -o-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .gallery__item:hover figcaption { opacity: 1; -webkit-transform: translate(-50%, 0); -ms-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; -ms-transform: none; transform: none; }