writing/build/assets/css/main.css

2375 lines
52 KiB
CSS
Raw Normal View History

2020-12-23 17:39:28 +00:00
@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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><polygon points="3 6 3 6 0 0 6 0 3 6" fill="%238a8b8c"/></svg>') 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;
}