liebling/assets/css/app.css

3622 lines
81 KiB
CSS
Raw Normal View History

2021-02-15 18:56:34 +00:00
@charset "UTF-8";
/*! sanitize.css v7.0.2 | CC0 License | github.com/csstools/sanitize.css */
/* Document
* ========================================================================== */
/**
* 1. Remove repeating backgrounds in all browsers (opinionated).
* 2. Add border box sizing in all browsers (opinionated).
*/
*,
::before,
::after {
background-repeat: no-repeat;
/* 1 */
box-sizing: border-box;
/* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit;
/* 1 */
vertical-align: inherit;
/* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Use the default user interface font in all browsers (opinionated).
* 3. Correct the line height in all browsers.
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 6. Breaks words to prevent overflow in all browsers (opinionated).
*/
html {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Oxygen, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 2 */
line-height: 1.15;
/* 3 */
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
/* 4 */
word-break: break-word;
/* 6 */
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* 1. Add the correct sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* Add the correct display in IE.
*/
main {
display: block;
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*/
nav ol,
nav ul {
list-style: none;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Oxygen Mono, Liberation Mono, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Add the correct text decoration in Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Oxygen Mono, Liberation Mono, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Remove the text shadow on text selections in Firefox 61- (opinionated).
* 1. Restore the coloring undone by defining the text shadow
* in all browsers (opinionated).
*/
::-moz-selection {
background-color: #b3d4fc;
/* 1 */
color: #000;
/* 1 */
text-shadow: none;
}
::selection {
background-color: #b3d4fc;
/* 1 */
color: #000;
/* 1 */
text-shadow: none;
}
/* Embedded content
* ========================================================================== */
/*
* Change the alignment on media elements in all browers (opinionated).
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
svg {
fill: currentColor;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Tabular data
* ========================================================================== */
/**
* Collapse border spacing in all browsers (opinionated).
*/
table {
border-collapse: collapse;
}
/* Forms
* ========================================================================== */
/**
* Inherit styling in all browsers (opinionated).
*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* Remove the margin in Safari.
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button {
overflow: visible;
/* 1 */
text-transform: none;
/* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* Show the overflow in Edge and IE.
*/
input {
overflow: visible;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in Edge and IE.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
* 3. Change the resize direction on textareas in all browsers (opinionated).
*/
textarea {
margin: 0;
/* 1 */
overflow: auto;
/* 2 */
resize: vertical;
/* 3 */
}
/**
* Remove the padding in IE 10-.
*/
[type=checkbox],
[type=radio] {
padding: 0;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct display in Edge and IE.
*/
details {
display: block;
}
/*
* Add the correct styles in Edge, IE, and Safari.
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* User interaction
* ========================================================================== */
/*
* 1. Remove the tapping delay on clickable elements
in all browsers (opinionated).
* 2. Remove the tapping delay in IE 10.
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
/* 1 */
touch-action: manipulation;
/* 2 */
}
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*/
[aria-busy=true] {
cursor: progress;
}
/*
* Change the cursor on control elements in all browsers (opinionated).
*/
[aria-controls] {
cursor: pointer;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*/
[aria-disabled],
[disabled] {
cursor: disabled;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*/
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute;
}
/** Mixins */
/** Colors */
/** Config */
:root,
[data-theme=light] {
--background-color: #fff;
--primary-foreground-color: #4a4a4a;
--secondary-foreground-color: #000;
--primary-subtle-color: #0470ee;
--secondary-subtle-color: #f4f8fd;
--titles-color: #333;
--link-color: #133467;
--primary-border-color: #9b9b9b;
--secondary-border-color: aliceblue;
--article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
--transparent-background-color: rgba(255,255,255,0.99);
--footer-background-color: #133467;
--submenu-shadow-color-opacity: 0.25;
--button-shadow-color-normal: rgba(108, 108, 108, 0.2);
--button-shadow-color-hover: rgba(108, 108, 108, 0.3);
--table-background-color-odd: #fafafa;
--table-head-border-bottom: #e2e2e2;
--toggle-darkmode-button-display-moon: block;
--toggle-darkmode-button-display-sun: none;
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.05);
--header-menu-gradient-first-color: rgba(255, 255, 255, 0);
--header-menu-gradient-second-color: rgba(255, 255, 255, 1);
}
[data-theme=dark] {
--background-color: #111;
--primary-foreground-color: #ccc;
--secondary-foreground-color: #fff;
--primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920;
--titles-color: #b4b4b4;
--link-color: #b6b7f6;
--primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
--transparent-background-color: rgba(0,0,0,0.99);
--footer-background-color: #080808;
--submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
--table-background-color-odd: #050505;
--table-head-border-bottom: #1d1d1d;
--toggle-darkmode-button-display-moon: none;
--toggle-darkmode-button-display-sun: block;
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.5);
--header-menu-gradient-first-color: rgba(17, 17, 17, 0);
--header-menu-gradient-second-color: rgba(17, 17, 17, 0.65);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--background-color: #111;
--primary-foreground-color: #ccc;
--secondary-foreground-color: #fff;
--primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920;
--titles-color: #b4b4b4;
--link-color: #b6b7f6;
--primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
--transparent-background-color: rgba(0,0,0,0.99);
--footer-background-color: #080808;
--submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
--table-background-color-odd: #050505;
--table-head-border-bottom: #1d1d1d;
--toggle-darkmode-button-display-moon: none;
--toggle-darkmode-button-display-sun: block;
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.5);
--header-menu-gradient-first-color: rgba(17, 17, 17, 0);
--header-menu-gradient-second-color: rgba(17, 17, 17, 0.65);
}
}
/** Helpers */
.hide {
display: none;
}
.sr-only {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
.focusable:focus, .m-toggle-darkmode input:focus, .m-icon-button:focus, .m-button:focus {
box-shadow: 0 0 0 2px var(--primary-subtle-color) !important;
}
.content-centered, .m-hero, .m-icon-button {
display: flex;
align-items: center;
justify-content: center;
}
.no-appearance, .m-toggle-darkmode input, .m-alert__close, .m-input, .m-icon-button, .m-button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
.no-padding {
padding: 0;
}
.no-margin {
margin: 0;
}
.no-scroll-y {
overflow-y: hidden;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.pos-relative {
position: relative;
}
.pos-absolute {
position: absolute;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
.uppercase {
text-transform: uppercase;
}
.pointer {
cursor: pointer;
}
.only-desktop {
display: none;
}
@media only screen and (min-width: 48rem) {
.only-desktop {
display: block;
}
}
/** Icons */
[class^=icon-], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "icomoon" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-moon:before {
content: "\E90F";
}
.icon-sunny:before {
content: "\E910";
}
.icon-chevron-down:before {
content: "\E900";
}
.icon-star:before {
content: "\E901";
}
.icon-arrow-left:before {
content: "\E902";
}
.icon-arrow-right:before {
content: "\E903";
}
.icon-arrow-top:before {
content: "\E904";
}
.icon-close:before {
content: "\E905";
}
.icon-comments:before {
content: "\E906";
}
.icon-facebook:before {
content: "\E907";
}
.icon-globe:before {
content: "\E908";
}
.icon-menu:before {
content: "\E909";
}
.icon-more:before {
content: "\E90A";
}
.icon-search:before {
content: "\E90B";
}
.icon-twitter:before {
content: "\E90C";
}
.icon-imdb:before {
content: "\E90D";
}
.icon-vk:before {
content: "\E90E";
}
.icon-steam:before {
content: "\E914";
}
.icon-twitch:before {
content: "\E915";
}
.icon-youtube:before {
content: "\E916";
}
.icon-vimeo:before {
content: "\E917";
}
.icon-whatsapp:before {
content: "\E918";
}
.icon-reddit:before {
content: "\E919";
}
.icon-rss:before {
content: "\E91A";
}
.icon-spotify:before {
content: "\E91B";
}
.icon-telegram:before {
content: "\E91C";
}
.icon-soundcloud:before {
content: "\E91D";
}
.icon-flickr:before {
content: "\E91E";
}
.icon-letterboxd:before {
content: "\E91F";
}
.icon-odnoklassniki:before {
content: "\E920";
}
.icon-pinterest:before {
content: "\E921";
}
.icon-tiktok:before {
content: "\E922";
}
.icon-tumblr:before {
content: "\E923";
}
.icon-xing:before {
content: "\E924";
}
.icon-mixcloud:before {
content: "\E925";
}
.icon-mixer:before {
content: "\E926";
}
.icon-wechat:before {
content: "\E927";
}
.icon-deviantart:before {
content: "\E928";
}
.icon-discord:before {
content: "\E929";
}
.icon-instagram:before {
content: "\E92A";
}
.icon-linkedin:before {
content: "\E92B";
}
.icon-snapchat:before {
content: "\E92C";
}
.icon-gitlab:before {
content: "\E92D";
}
.icon-github:before {
content: "\E930";
}
.icon-behance:before {
content: "\E951";
}
/** Global styles */
body {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
color: var(--primary-foreground-color);
font-size: 1rem;
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-display: swap;
overflow-x: hidden;
background-color: var(--background-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.share-menu-displayed {
padding-bottom: 45px;
}
@media only screen and (min-width: 48rem) {
body.share-menu-displayed {
padding-bottom: 0;
}
}
.main-wrap {
display: flex;
flex-direction: column;
flex-grow: 1;
}
p {
line-height: 1.5;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
position: relative;
}
.tippy-popper * {
text-align: left !important;
}
.medium-zoom-overlay {
background-color: var(--background-color) !important;
}
.medium-zoom-overlay,
.medium-zoom-image {
z-index: 5;
}
.l-wrapper {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
@media only screen and (min-width: 48rem) {
.l-wrapper {
max-width: 1200px;
}
}
@media only screen and (min-width: 80rem) {
.l-wrapper {
padding: 0;
}
}
.l-wrapper.in-submenu {
padding: 0;
}
@media only screen and (min-width: 48rem) {
.l-wrapper.in-submenu {
padding: 0 20px;
}
}
@media only screen and (min-width: 80rem) {
.l-wrapper.in-submenu {
padding: 0;
}
}
@media only screen and (min-width: 48rem) {
.l-wrapper.in-post {
max-width: 960px;
}
}
@media only screen and (min-width: 48rem) {
.l-wrapper.in-comments {
max-width: 820px;
}
}
@media only screen and (min-width: 64rem) {
.l-wrapper.in-recommended {
padding: 0;
max-width: calc(100% - 60px);
}
}
@media only screen and (min-width: 90rem) {
.l-wrapper.in-recommended {
max-width: 1200px;
}
}
.l-wrapper.in-post.no-image {
padding-top: 40px;
}
@media only screen and (min-width: 48rem) {
.l-wrapper.in-post.no-image {
padding-top: 80px;
}
}
.l-content {
padding: 40px 0 20px;
}
@media only screen and (min-width: 48rem) {
.l-content {
padding: 60px 0 40px;
}
}
.m-button {
display: inline-block;
color: #333;
text-align: center;
letter-spacing: 0.2px;
line-height: 1;
font-size: 1rem;
font-weight: 600;
border-radius: 5px;
padding: 13px 25px;
cursor: pointer;
outline: 0;
border: 0;
position: relative;
background-color: transparent;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.m-button.outlined {
color: var(--titles-color);
border: 1px solid var(--primary-foreground-color);
}
.m-button.filled, .m-button.primary {
box-shadow: 0 2px 4px var(--button-shadow-color-normal), 0 0 0 transparent;
}
.m-button.filled:hover, .m-button.primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
}
.m-button.filled {
border-radius: 5px;
background-color: #fff;
}
.m-button.block {
display: block;
width: 100%;
}
.m-button.primary {
color: #fff;
background-color: var(--primary-subtle-color);
}
.m-button.loading {
cursor: default;
overflow: hidden;
}
.m-button.loading:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 25%;
height: 2px;
background-color: #fff;
-webkit-animation: loading 1s infinite;
animation: loading 1s infinite;
}
@-webkit-keyframes loading {
0% {
transform: translatex(0);
}
50% {
transform: translatex(300%);
}
100% {
transform: translatex(0);
}
}
@keyframes loading {
0% {
transform: translatex(0);
}
50% {
transform: translatex(300%);
}
100% {
transform: translatex(0);
}
}
.m-icon-button {
color: var(--titles-color);
font-size: 1.125rem;
border: 0;
outline: 0;
padding: 0;
cursor: pointer;
border-radius: 50%;
background-color: transparent;
}
.m-icon-button.outlined {
border: 1px solid var(--primary-foreground-color);
}
.m-icon-button.filled {
background-color: var(--background-color);
box-shadow: 0 2px 4px var(--button-shadow-color-normal), 0 0 0 transparent;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.m-icon-button.filled:hover {
box-shadow: 0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
}
.m-icon-button:disabled {
cursor: default;
opacity: 0.5;
}
.m-icon-button.in-mobile-topbar {
width: 50px;
height: 50px;
}
.m-icon-button.as-close-menu {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
font-size: 0.625rem;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.as-close-menu {
display: none !important;
}
}
.m-icon-button.as-close-search {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
font-size: 0.625rem;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.as-close-search {
top: 30px;
right: 30px;
width: 42px;
height: 42px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 80rem) {
.m-icon-button.as-close-search {
top: 40px;
right: 40px;
width: 50px;
height: 50px;
}
}
.m-icon-button.in-menu-main {
display: none;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.in-menu-main {
display: flex;
width: 32px;
height: 32px;
}
}
.m-icon-button.more {
font-size: 1.25rem;
z-index: 6;
position: relative;
}
.m-icon-button.more.active {
color: var(--primary-subtle-color);
}
.m-icon-button.in-pagination-left, .m-icon-button.in-pagination-right {
width: 40px;
height: 40px;
font-size: 0.625rem;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.in-pagination-left, .m-icon-button.in-pagination-right {
width: 46px;
height: 46px;
font-size: 0.688rem;
}
}
.m-icon-button.in-pagination-left {
margin-right: 30px;
}
.m-icon-button.in-pagination-right {
margin-left: 30px;
}
.m-icon-button.in-featured-articles {
position: absolute;
color: #fff;
font-size: 0.875rem;
width: 40px;
height: 40px;
bottom: 5px;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.in-featured-articles {
bottom: 26px;
}
}
.m-icon-button.in-featured-articles.glide-prev {
right: 56px;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.in-featured-articles.glide-prev {
right: 76px;
}
}
.m-icon-button.in-featured-articles.glide-next {
right: 16px;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.in-featured-articles.glide-next {
right: 36px;
}
}
.m-icon-button.in-recommended-articles {
position: absolute;
font-size: 0.625rem;
width: 40px;
height: 40px;
top: 200px;
z-index: 2;
transform: translateY(-50%);
}
@media only screen and (min-width: 64rem) {
.m-icon-button.in-recommended-articles {
display: none;
}
}
.m-icon-button.in-recommended-articles.glide-prev {
left: 0;
}
.m-icon-button.in-recommended-articles.glide-next {
right: 0;
}
.m-icon-button.as-load-comments {
position: relative;
width: 60px;
height: 60px;
font-size: 1.25rem;
margin: 0 auto;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-icon-button.as-load-comments {
width: 80px;
height: 80px;
font-size: 1.625rem;
}
}
.m-icon-button.in-share {
color: var(--titles-color);
font-size: 0.75rem;
text-decoration: none;
width: 31px;
height: 31px;
margin: 0 25px;
}
@media only screen and (min-width: 64rem) {
.m-icon-button.in-share {
font-size: 0.875rem;
width: 40px;
height: 40px;
margin: 0 0 20px 0;
}
}
@media only screen and (min-width: 80rem) {
.m-icon-button.in-share {
font-size: 1rem;
width: 50px;
height: 50px;
}
}
.m-icon-button.progress {
position: relative;
}
.m-icon-button.progress svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.m-icon-button.progress svg circle {
stroke: var(--primary-subtle-color);
transform-origin: 50% 50%;
transform: rotate(-90deg);
transition: stroke-dashoffset 0.2s;
}
.rtl .m-icon-button.in-featured-articles.glide-prev {
right: auto;
left: 16px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-icon-button.in-featured-articles.glide-prev {
right: auto;
left: 36px;
}
}
.rtl .m-icon-button.in-featured-articles.glide-next {
right: auto;
left: 52px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-icon-button.in-featured-articles.glide-next {
right: auto;
left: 72px;
}
}
.rtl .m-icon-button.in-recommended-articles.glide-prev {
left: auto;
right: 0;
transform: rotate(180deg);
}
.rtl .m-icon-button.in-recommended-articles.glide-next {
right: auto;
left: 0;
transform: rotate(180deg);
}
.m-input {
color: var(--primary-foreground-color);
letter-spacing: 0.2px;
line-height: 1.3;
font-size: 1rem;
width: 100%;
border-radius: 5px;
padding: 11px 15px;
border: 1px solid var(--primary-border-color);
outline: 0;
background-color: var(--background-color);
}
.m-input:focus {
border-color: var(--primary-subtle-color);
}
.m-input.in-search {
font-weight: 600;
padding-left: 40px;
}
@media only screen and (min-width: 48rem) {
.m-input.in-search {
font-size: 1.25rem;
padding: 15px 30px 15px 60px;
}
}
.m-input.in-subscribe-section {
margin-bottom: 15px;
}
.m-section-title {
color: var(--primary-foreground-color);
text-align: center;
letter-spacing: 0.3px;
line-height: 1.3;
font-weight: 400;
font-size: 1.25rem;
margin: 0 0 30px;
}
@media only screen and (min-width: 48rem) {
.m-section-title {
font-size: 1.5rem;
margin-bottom: 40px;
}
}
.m-section-title.in-recommended {
margin-bottom: 0 !important;
}
.m-small-text {
color: var(--titles-color);
font-size: 0.875rem;
}
.m-small-text.in-subscribe-page {
padding-top: 30px;
font-weight: 600;
}
.m-small-text.in-author-along-with {
margin-bottom: 20px;
}
.m-small-text.in-author-along-with a {
text-decoration: underline;
}
.m-not-found {
color: var(--primary-foreground-color);
line-height: 1.3;
font-size: 0.875rem;
font-weight: 600;
}
.m-not-found.in-recent-articles {
margin-left: 20px;
}
@media only screen and (min-width: 48rem) {
.m-not-found.in-recent-articles {
margin-left: 0;
}
}
.m-alert {
color: #fff;
text-align: center;
letter-spacing: 1px;
line-height: 1.4;
font-size: 0.875rem;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16px 45px 14px;
z-index: 11;
transform: translateY(-100%);
transition: transform 0.2s ease;
}
@media only screen and (min-width: 48rem) {
.m-alert {
font-size: 1rem;
padding: 24px 75px 22px;
}
}
.m-alert.success {
background-color: var(--primary-subtle-color);
}
.m-alert.opened {
visibility: visible;
transform: translateY(0);
}
.m-alert__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
cursor: pointer;
outline: 0;
border: 0;
padding: 0;
background-color: transparent;
transform: translateY(-50%);
}
@media only screen and (min-width: 48rem) {
.m-alert__close {
right: 40px;
width: 25px;
height: 25px;
}
}
.m-alert__close span {
color: #fff;
font-size: 0.75rem;
}
@media only screen and (min-width: 48rem) {
.m-alert__close span {
font-size: 0.875rem;
}
}
.rtl .m-alert__close {
right: auto;
left: 20px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-alert__close {
right: auto;
left: 40px;
}
}
.m-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 4;
background-color: var(--background-color);
will-change: transform;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media only screen and (min-width: 48rem) {
.m-header {
padding: 15px 0;
}
}
.m-header.mobile-menu-opened {
height: 100%;
}
@media only screen and (min-width: 48rem) {
.m-header.mobile-menu-opened {
height: auto;
}
}
.m-header.headroom--pinned {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 0 0 transparent;
transform: translateY(0%);
}
.m-header.headroom--pinned .m-header__shadow {
display: none;
}
.m-header.headroom--unpinned {
transform: translateY(-100%);
}
.m-header.submenu-is-active {
background-color: var(--background-color);
}
.m-header.submenu-is-active .m-header__shadow {
display: none;
}
.m-header.with-picture {
background-color: var(--background-color);
}
.m-mobile-topbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
position: relative;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-mobile-topbar {
display: none !important;
}
}
.m-logo {
display: inline-block;
height: 25px;
}
.m-logo img {
width: auto;
max-width: 150px;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.m-logo.in-mobile-topbar {
height: 20px;
margin: 0 20px;
}
.m-site-name.in-mobile-topbar {
color: var(--titles-color);
font-weight: 600;
}
.m-site-name.in-desktop-menu {
font-weight: 700;
}
@media only screen and (min-width: 48rem) {
.m-nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 37px;
overflow-y: hidden;
}
}
@media only screen and (min-width: 90rem) {
.m-nav {
margin: 0 -5px;
}
}
@media only screen and (min-width: 48rem) {
.m-nav.toggle-overflow {
overflow-y: initial;
}
}
.m-nav__left {
margin-bottom: 30px;
}
@media only screen and (min-width: 48rem) {
.m-nav__left {
display: flex;
flex: 1 1 auto;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 5px;
margin-bottom: 0;
-webkit-overflow-scrolling: touch;
}
}
@media only screen and (min-width: 48rem) {
.m-nav__left.toggle-overflow {
overflow-x: hidden;
}
}
.m-nav__left ul {
padding: 0;
margin: 0;
}
@media only screen and (min-width: 48rem) {
.m-nav__left ul {
display: flex;
align-items: center;
}
}
.m-nav__left li {
color: var(--titles-color);
letter-spacing: 0.3px;
font-size: 1.125rem;
margin-bottom: 15px;
}
@media only screen and (min-width: 48rem) {
.m-nav__left li {
margin-bottom: 0;
margin-right: 35px;
position: relative;
}
}
.m-nav__left li:last-of-type {
margin-bottom: 0;
}
.m-nav__left li.nav-current {
font-weight: 600;
}
.m-nav__left li a {
color: inherit;
}
.m-nav__left li.more a {
display: inline-flex;
align-items: center;
}
@media only screen and (min-width: 48rem) {
.m-nav__left li.more a {
display: flex;
}
}
.m-nav__left li.more a span {
display: inline-block;
color: inherit;
font-size: 1rem;
margin-left: 8px;
transform: translateY(1px);
}
@media only screen and (min-width: 48rem) {
.m-nav__left li.submenu-option {
z-index: 2;
}
}
.m-nav__right {
display: flex;
align-items: center;
justify-content: flex-end;
}
@media only screen and (min-width: 48rem) {
.m-nav__right {
flex-shrink: 0;
position: relative;
padding-left: 20px;
padding-right: 5px;
}
}
@media only screen and (min-width: 48rem) {
.m-nav__right:before {
content: "";
position: absolute;
pointer-events: none;
top: 0;
left: -20px;
width: 20px;
height: 100%;
z-index: 2;
background: linear-gradient(90deg, var(--header-menu-gradient-first-color) 0, var(--header-menu-gradient-second-color));
}
}
@media only screen and (min-width: 48rem) {
.rtl .m-nav__left {
padding-left: 0;
padding-right: 5px;
}
}
@media only screen and (min-width: 48rem) {
.rtl .m-nav__left li {
margin-right: 0;
margin-left: 35px;
}
}
@media only screen and (min-width: 48rem) {
.rtl .m-nav__right {
padding-left: 5px;
padding-right: 20px;
}
}
@media only screen and (min-width: 48rem) {
.rtl .m-nav__right:before {
left: auto;
right: -20px;
transform: rotate(180deg);
}
}
.m-menu {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow-y: auto;
z-index: 2;
background-color: var(--background-color);
-webkit-overflow-scrolling: touch;
transform: scale(1.2);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-menu.opened {
visibility: visible;
opacity: 1;
z-index: 10;
transform: scale(1);
}
@media only screen and (min-width: 48rem) {
.m-menu {
visibility: visible !important;
position: relative;
top: auto;
left: auto;
height: auto;
opacity: 1 !important;
overflow: initial;
background-color: transparent;
transform: translate3d(0, 0, 0) !important;
}
}
.m-menu__main {
padding: 50px 0 5px;
min-height: 100%;
}
@media only screen and (min-width: 48rem) {
.m-menu__main {
padding: 0;
min-height: 0;
}
}
.rtl .m-menu__main {
padding-top: 75px;
}
@media only screen and (min-width: 48rem) {
.rtl .m-menu__main {
padding: 0;
}
}
.m-secondary-menu {
padding: 0;
margin: 0;
list-style-type: none;
}
.m-secondary-menu li {
font-size: 1rem;
}
.m-secondary-menu li.nav-current a {
font-weight: 600;
}
.m-secondary-menu li a {
display: block;
padding: 6px 10px;
border-radius: 4px;
transition: background-color linear 0.1s;
}
@media only screen and (min-width: 48rem) {
.m-secondary-menu li a {
padding: 8px 10px;
}
}
.m-secondary-menu li a:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.rtl .m-secondary-menu .li,
.rtl .m-secondary-menu .li a {
text-align: right !important;
}
.m-submenu {
padding-top: 25px;
}
@media only screen and (min-width: 48rem) {
.m-submenu {
visibility: hidden;
position: fixed;
top: 45px;
left: 0;
width: 100%;
padding: 30px 0 20px 0;
background-color: var(--background-color);
border-top: 1px solid var(--secondary-border-color);
z-index: 5;
box-shadow: 0 60px 60px rgba(0, 0, 0, var(--submenu-shadow-color-opacity)), 0 0 0 transparent;
}
}
@media only screen and (min-width: 80rem) {
.m-submenu {
padding: 32px 0 23px 0;
}
}
@media only screen and (min-width: 48rem) {
.m-submenu.opened {
visibility: visible;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation: openSubmenuAnimation 0.3s both;
animation: openSubmenuAnimation 0.3s both;
}
@-webkit-keyframes openSubmenuAnimation {
from {
opacity: 0;
transform: translate3d(0, -5%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes openSubmenuAnimation {
from {
opacity: 0;
transform: translate3d(0, -5%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
@media only screen and (min-width: 48rem) {
.m-submenu.closed {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation: closeSubmenuAnimation 0.3s both;
animation: closeSubmenuAnimation 0.3s both;
}
@-webkit-keyframes closeSubmenuAnimation {
from {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
opacity: 0;
transform: translate3d(0, -2.5%, 0);
}
}
@keyframes closeSubmenuAnimation {
from {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
opacity: 0;
transform: translate3d(0, -2.5%, 0);
}
}
}
@media only screen and (min-width: 48rem) {
_:-ms-fullscreen, :root .m-submenu {
top: 65px;
}
}
.m-submenu-title {
letter-spacing: 0.3px;
line-height: 1.3;
font-size: 1.125rem;
font-weight: 400;
margin: 0 0 25px;
}
.m-submenu-title.in-recent-articles {
padding: 0 20px;
}
@media only screen and (min-width: 48rem) {
.m-submenu-title.in-recent-articles {
padding: 0;
}
}
.rtl .m-submenu-title {
direction: rtl;
}
.m-recent-articles {
margin: 0 -20px 40px;
overflow: hidden;
}
@media only screen and (min-width: 48rem) {
.m-recent-articles {
margin: 0 0 40px;
}
}
.m-recent-articles ul {
cursor: -webkit-grab;
cursor: grab;
}
.m-recent-article {
display: block;
width: 230px;
margin: 0 20px;
}
@media only screen and (min-width: 48rem) {
.m-recent-article {
margin: 0 60px 0 0;
}
}
.m-recent-article:hover .m-recent-article__picture img {
transform: scale(1.1);
}
@media only screen and (min-width: 48rem) {
.rtl .m-recent-article {
margin: 0 0 0 60px;
}
}
.m-recent-article__picture {
height: 130px;
position: relative;
margin-bottom: 15px;
border-radius: 5px;
background-color: var(--secondary-subtle-color);
overflow: hidden;
}
.m-recent-article__picture.no-picture img {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
}
.m-recent-article__picture img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-recent-article__title {
color: var(--titles-color);
letter-spacing: 0.2px;
line-height: 1.438rem;
font-size: 1rem;
font-weight: 400;
margin: 0 0 10px;
}
@media only screen and (min-width: 48rem) {
.m-recent-article__title {
letter-spacing: 0.25px;
font-size: 1.125rem;
}
}
.m-recent-article__date {
color: var(--titles-color);
letter-spacing: 0.15px;
font-size: 0.813rem;
}
.m-tags.in-post {
padding-top: 25px;
}
.m-tags.in-post ul {
padding: 0;
list-style-type: none;
}
.m-tags.in-post a {
text-decoration: none;
}
.m-tags ul {
display: flex;
flex-wrap: wrap;
}
.m-tags li {
letter-spacing: 0.2px;
font-size: 0.875rem;
font-weight: 600;
margin-right: 30px;
margin-bottom: 10px !important;
}
.m-tags li:last-of-type {
margin-right: 0;
}
.m-tags li a {
color: var(--link-color) !important;
}
.m-toggle-darkmode {
position: fixed;
right: 20px;
bottom: 45px;
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-toggle-darkmode {
position: relative;
right: auto;
bottom: auto;
margin-left: 20px;
z-index: auto;
}
}
.m-toggle-darkmode input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 0;
border: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.m-toggle-darkmode input::-moz-focus-inner {
border: 0;
}
.m-toggle-darkmode div {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background-color: var(--toggle-darkmode-background-color);
z-index: 1;
}
.m-toggle-darkmode span {
color: var(--titles-color);
font-size: 0.9375rem;
}
.m-toggle-darkmode span.moon {
display: var(--toggle-darkmode-button-display-moon);
}
.m-toggle-darkmode span.sun {
display: var(--toggle-darkmode-button-display-sun);
}
_:-ms-fullscreen, :root .m-toggle-darkmode {
display: none;
}
.m-hero {
position: relative;
flex-direction: column;
min-height: 365px;
overflow: hidden;
padding: 100px 0 75px;
background-color: var(--secondary-subtle-color);
}
@media only screen and (min-width: 48rem) {
.m-hero {
min-height: 400px;
padding: 150px 0 75px;
}
}
.m-hero.with-picture {
color: #fff;
background-color: #000;
}
@media only screen and (min-width: 48rem) {
.m-hero.with-picture {
min-height: 450px;
}
}
@media only screen and (min-width: 80rem) {
.m-hero.with-picture {
min-height: 565px;
}
}
.m-hero.with-picture .m-hero-title {
color: #fff;
}
.m-hero.no-picture.in-post {
display: none;
}
.m-hero__picture {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
}
.m-hero__picture.in-post {
opacity: 1;
}
.m-hero__picture img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.m-hero__content {
position: relative;
text-align: center;
padding: 0 20px;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-hero__content {
max-width: 700px;
}
}
@media only screen and (min-width: 80rem) {
.m-hero__content {
padding: 0;
}
}
.m-hero__meta {
margin: 0 auto;
}
@media only screen and (min-width: 48rem) {
.m-hero__meta {
display: flex;
align-items: center;
justify-content: center;
}
}
.rtl .m-hero__meta {
direction: ltr;
}
.m-hero-avatar {
width: 80px;
height: 80px;
margin: 0 auto 25px;
border-radius: 50%;
background-color: #5c697c;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 transparent;
}
@media only screen and (min-width: 48rem) {
.m-hero-avatar {
width: 100px;
height: 100px;
}
}
.m-hero-title {
color: var(--titles-color);
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 15px;
}
@media only screen and (min-width: 48rem) {
.m-hero-title {
letter-spacing: 0.5px;
font-size: 2.25rem;
}
}
.m-hero-title.bigger {
letter-spacing: 0.5px;
font-size: 2rem;
}
@media only screen and (min-width: 48rem) {
.m-hero-title.bigger {
letter-spacing: 0.8px;
font-size: 3.25rem;
margin-bottom: 10px;
}
}
.m-hero-description {
letter-spacing: 0.2px;
line-height: 1.5;
font-size: 0.938rem;
margin-bottom: 20px;
}
@media only screen and (min-width: 48rem) {
.m-hero-description {
font-size: 1.125rem;
}
}
.m-hero-description.bigger {
line-height: 1.3;
font-size: 1.125rem;
margin-bottom: 25px;
}
@media only screen and (min-width: 48rem) {
.m-hero-description.bigger {
font-size: 1.375rem;
}
}
.m-hero-description.with-picture {
color: #fff;
}
.m-hero-social {
text-align: center;
list-style-type: none;
padding: 0;
margin: 0 0 15px;
}
@media only screen and (min-width: 48rem) {
.m-hero-social {
margin-right: 7px;
margin-bottom: 0;
}
}
.m-hero-social.with-picture {
color: #fff;
}
.m-hero-social li {
display: inline-block;
margin: 0 11px;
}
.m-hero-social li a {
color: inherit;
font-size: 0.938rem;
}
.m-hero-social li a span {
color: inherit;
}
.rtl .m-hero-social {
direction: ltr;
}
.m-hero-stats {
text-align: center;
list-style-type: none;
padding: 0;
margin: 0;
}
@media only screen and (min-width: 48rem) {
.m-hero-stats {
margin-left: 7px;
}
}
.m-hero-stats.with-picture {
color: #fff;
}
.m-hero-stats li {
display: inline-block;
color: inherit;
letter-spacing: 0.2px;
font-size: 0.813rem;
margin: 0 4px;
}
@media only screen and (min-width: 48rem) {
.m-hero-stats li {
letter-spacing: 0.3px;
font-size: 1rem;
}
}
.m-heading {
text-align: center;
margin: 0 auto 40px;
}
@media only screen and (min-width: 48rem) {
.m-heading {
margin-bottom: 60px;
}
}
@media only screen and (min-width: 48rem) {
.m-heading.in-subscribe-page {
margin-bottom: 50px;
}
}
.m-heading.no-margin {
margin-bottom: 0 !important;
}
.m-heading__title {
color: var(--titles-color);
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.75rem;
margin: 0 0 10px;
}
@media only screen and (min-width: 48rem) {
.m-heading__title {
letter-spacing: 0.5px;
font-size: 2.25rem;
margin-bottom: 15px;
}
}
.m-heading__title.in-post {
letter-spacing: 0.5px;
font-size: 2rem;
margin-bottom: 15px;
}
@media only screen and (min-width: 48rem) {
.m-heading__title.in-post {
letter-spacing: 0.7px;
font-size: 2.625rem;
margin-bottom: 20px;
}
}
.m-heading__title.in-page {
margin: 0;
}
.m-heading__description {
letter-spacing: 0.2px;
line-height: 1.3;
font-size: 0.938rem;
margin: 0 auto;
}
@media only screen and (min-width: 48rem) {
.m-heading__description {
font-size: 1.125rem;
}
}
@media only screen and (min-width: 48rem) {
.m-heading__description.in-subscribe-page {
max-width: 420px;
font-size: 1rem;
}
}
.m-heading__description.in-newsletter-form {
font-size: 0.875rem;
max-width: 80%;
}
@media only screen and (min-width: 48rem) {
.m-heading__description.in-newsletter-form {
max-width: 420px;
}
}
.m-heading__meta {
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.2px;
font-size: 0.875rem;
font-weight: 600;
}
@media only screen and (min-width: 48rem) {
.m-heading__meta {
font-size: 1rem;
}
}
.m-heading__meta__tag,
.m-heading__meta__time {
color: var(--link-color) !important;
}
.m-heading__meta__tag {
text-decoration: none !important;
}
.m-heading__meta__divider {
display: inline-block;
color: var(--primary-border-color);
margin: 0 10px;
}
.m-article-card {
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 20px;
height: 400px;
background-color: var(--background-color);
border-radius: 10px;
border: 1px solid var(--secondary-border-color);
z-index: 1;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.m-article-card:hover {
transform: translateY(-5px);
}
.m-article-card:hover:before {
box-shadow: var(--article-shadow-hover), 0 0 0 transparent;
}
.m-article-card:hover .m-article-card__author {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 transparent;
}
@media only screen and (min-width: 48rem) {
.m-article-card {
width: calc((100% / 2) - 20px);
height: 420px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 64rem) {
.m-article-card {
width: calc((100% / 3) - 40px);
margin-left: 20px;
margin-right: 20px;
margin-bottom: 40px;
}
}
.m-article-card.no-picture .m-article-card__picture {
height: 85px !important;
}
.m-article-card.no-picture .m-article-card__info {
background-color: var(--secondary-subtle-color);
}
.m-article-card.no-picture .m-article-card__title {
line-height: 1.4;
font-size: 1.625rem;
}
.m-article-card.as-author .m-article-card__picture {
background-color: #000;
}
.m-article-card.as-author .m-article-card__picture-link {
z-index: 2;
}
.m-article-card.as-author .m-article-card__picture-background {
opacity: 0.75;
}
.m-article-card.as-author .m-article-card__info {
padding: 0;
}
.m-article-card.as-author .m-article-card__info-link {
padding: 20px 20px 60px 20px;
}
.m-article-card:before {
content: "";
position: absolute;
top: 10px;
right: 10px;
bottom: 0;
left: 10px;
border-radius: 10px;
box-shadow: var(--article-shadow-normal), 0 0 0 transparent;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.m-article-card__picture {
position: relative;
height: 200px;
border-radius: 10px 10px 0 0;
background-color: var(--secondary-subtle-color);
overflow: hidden;
transform: translateZ(0);
}
@media only screen and (min-width: 48rem) {
.m-article-card__picture {
height: 220px;
}
}
.m-article-card__picture-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.m-article-card__picture-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
}
.m-article-card__name {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
color: #fff;
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.25rem;
font-weight: 600;
margin: 0;
z-index: 1;
}
@media only screen and (min-width: 48rem) {
.m-article-card__name {
left: 25px;
bottom: 25px;
}
}
.m-article-card__author {
position: absolute;
top: 20px;
left: 20px;
width: 35px;
height: 35px;
border-radius: 50%;
z-index: 2;
transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
@media only screen and (min-width: 48rem) {
.m-article-card__author {
top: 25px;
left: 25px;
}
}
.m-article-card__author div {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.m-article-card__featured {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 26px;
right: 20px;
width: 24px;
height: 24px;
color: #000;
background-color: #fff;
border-radius: 50%;
z-index: 2;
}
@media only screen and (min-width: 48rem) {
.m-article-card__featured {
top: 31px;
right: 25px;
}
}
.m-article-card__featured span {
color: inherit;
font-size: 0.75rem;
}
.m-article-card__info {
flex: 1;
position: relative;
padding-top: 48px;
height: 200px;
overflow: hidden;
border-radius: 0 0 10px 10px;
background-color: var(--background-color);
}
@media only screen and (min-width: 48rem) {
.m-article-card__info {
padding-top: 53px;
}
}
.m-article-card__info.no-tag {
padding-top: 0 !important;
}
.m-article-card__info.no-tag .m-article-card__info-link {
padding-top: 48px;
}
@media only screen and (min-width: 48rem) {
.m-article-card__info.no-tag .m-article-card__info-link {
padding-top: 53px;
}
}
.m-article-card__tag {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
color: var(--link-color);
letter-spacing: 0.2px;
line-height: 1.3;
font-size: 0.875rem;
font-weight: 600;
}
@media only screen and (min-width: 48rem) {
.m-article-card__tag {
top: 25px;
left: 25px;
}
}
.m-article-card__info-link {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 0 20px 20px 20px;
}
@media only screen and (min-width: 48rem) {
.m-article-card__info-link {
padding: 0 25px 25px 25px;
}
}
.m-article-card__title {
color: var(--titles-color);
letter-spacing: 0.4px;
line-height: 1.3;
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.m-article-card__excerpt {
display: block;
position: relative;
overflow: hidden;
height: 100%;
color: var(--titles-color);
letter-spacing: 0.3px;
line-height: 1.5;
font-size: 1rem;
}
.m-article-card__timestamp,
.m-article-card__author-stats {
display: flex;
align-items: center;
color: var(--titles-color);
letter-spacing: 0.2px;
font-size: 0.875rem;
}
.m-article-card__timestamp span:nth-child(2),
.m-article-card__author-stats span:nth-child(2) {
padding: 0 10px;
}
.m-article-card__author-stats {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
justify-content: space-between;
}
.m-article-card__author-stats span {
padding: 0 !important;
}
.m-article-card__social {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0;
margin: 0;
}
.m-article-card__social li {
display: inline-block;
margin-left: 22px;
}
.m-article-card__social li a {
color: var(--primary-foreground-color);
font-size: 0.938rem;
}
.m-article-card__social li a span {
color: inherit;
}
.rtl .m-article-card__social {
direction: ltr;
}
.m-search {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow-y: auto;
z-index: 2;
background-color: var(--transparent-background-color);
-webkit-overflow-scrolling: touch;
transform: scale(1.2);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-search.opened {
visibility: visible;
opacity: 1;
z-index: 10;
transform: scale(1);
}
.m-search__content {
padding: 80px 20px 40px;
margin: 0 auto;
}
@media only screen and (min-width: 48rem) {
.m-search__content {
padding-top: 100px;
padding-bottom: 50px;
max-width: 700px;
}
}
@media only screen and (min-width: 80rem) {
.m-search__content {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (min-width: 90rem) {
.m-search__content {
max-width: 800px;
}
}
.m-search__form {
margin-bottom: 30px;
}
@media only screen and (min-width: 48rem) {
.m-search__form {
max-width: 500px;
margin: 0 auto 45px;
}
}
.m-search-icon {
position: absolute;
top: 50%;
left: 15px;
color: #9b9b9b;
font-size: 1rem;
font-weight: 500;
pointer-events: none;
transform: translateY(-45%);
}
@media only screen and (min-width: 48rem) {
.m-search-icon {
font-size: 1.25em;
left: 25px;
}
}
.m-result {
border-bottom: 1px solid var(--primary-border-color);
}
.m-result.last {
border-bottom: 0;
}
.m-result__link {
display: block;
width: 100%;
height: 100%;
padding: 10px 0;
}
@media only screen and (min-width: 48rem) {
.m-result__link {
padding: 15px 0;
}
}
.m-result__title {
color: var(--primary-foreground-color);
letter-spacing: 0.3px;
line-height: 1.4;
font-size: 1rem;
font-weight: 400;
margin: 0 0 5px;
}
@media only screen and (min-width: 48rem) {
.m-result__title {
letter-spacing: 0.4px;
font-size: 1.25rem;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 80rem) {
.m-result__title {
font-size: 1.375rem;
}
}
.m-result__date {
color: var(--titles-color);
letter-spacing: 0.2px;
font-size: 0.813rem;
}
@media only screen and (min-width: 48rem) {
.m-result__date {
letter-spacing: 0.3px;
font-size: 0.938rem;
}
}
.m-footer {
flex-shrink: 0;
background-color: var(--footer-background-color);
}
.m-footer__content {
color: #fff;
text-align: center;
padding: 50px 20px;
}
@media only screen and (min-width: 48rem) {
.m-footer__content {
padding: 75px 0;
max-width: 680px;
margin: 0 auto;
}
}
.m-footer__nav-secondary {
margin-bottom: 25px;
}
.m-footer__nav-secondary .m-secondary-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@media only screen and (min-width: 48rem) {
.m-footer__nav-secondary .m-secondary-menu li {
margin: 0 5px;
}
}
.m-footer-copyright {
font-size: 0.875rem;
letter-spacing: 0.3px;
line-height: 1.7;
margin-bottom: 20px;
}
.m-footer-copyright span {
display: block;
}
@media only screen and (min-width: 48rem) {
.m-footer-copyright span {
display: inline;
}
}
.m-footer-copyright span:nth-child(2) {
display: none;
}
@media only screen and (min-width: 48rem) {
.m-footer-copyright span:nth-child(2) {
display: inline;
}
}
.m-footer-copyright a {
text-decoration: underline;
}
.m-footer-copyright.jslicense {
opacity: 0.7;
margin-bottom: 0;
}
.m-footer-social {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.m-footer-social a {
display: inline-block;
color: #fff;
margin: 0 15px;
}
.m-footer-social a span {
color: inherit;
font-size: 1rem;
}
.rtl .m-footer-social {
direction: ltr;
}
[data-aos-duration="50"] [data-aos], [data-aos][data-aos][data-aos-duration="50"] {
transition-duration: 50ms;
}
[data-aos-delay="50"] [data-aos], [data-aos][data-aos][data-aos-delay="50"] {
transition-delay: 0;
}
[data-aos-delay="50"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="50"].aos-animate {
transition-delay: 50ms;
}
[data-aos-duration="100"] [data-aos], [data-aos][data-aos][data-aos-duration="100"] {
transition-duration: 100ms;
}
[data-aos-delay="100"] [data-aos], [data-aos][data-aos][data-aos-delay="100"] {
transition-delay: 0;
}
[data-aos-delay="100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="100"].aos-animate {
transition-delay: 100ms;
}
[data-aos-duration="150"] [data-aos], [data-aos][data-aos][data-aos-duration="150"] {
transition-duration: 150ms;
}
[data-aos-delay="150"] [data-aos], [data-aos][data-aos][data-aos-delay="150"] {
transition-delay: 0;
}
[data-aos-delay="150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="150"].aos-animate {
transition-delay: 150ms;
}
[data-aos-duration="200"] [data-aos], [data-aos][data-aos][data-aos-duration="200"] {
transition-duration: 200ms;
}
[data-aos-delay="200"] [data-aos], [data-aos][data-aos][data-aos-delay="200"] {
transition-delay: 0;
}
[data-aos-delay="200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="200"].aos-animate {
transition-delay: 200ms;
}
[data-aos-duration="250"] [data-aos], [data-aos][data-aos][data-aos-duration="250"] {
transition-duration: 250ms;
}
[data-aos-delay="250"] [data-aos], [data-aos][data-aos][data-aos-delay="250"] {
transition-delay: 0;
}
[data-aos-delay="250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="250"].aos-animate {
transition-delay: 250ms;
}
[data-aos-duration="300"] [data-aos], [data-aos][data-aos][data-aos-duration="300"] {
transition-duration: 300ms;
}
[data-aos-delay="300"] [data-aos], [data-aos][data-aos][data-aos-delay="300"] {
transition-delay: 0;
}
[data-aos-delay="300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="300"].aos-animate {
transition-delay: 300ms;
}
[data-aos-duration="350"] [data-aos], [data-aos][data-aos][data-aos-duration="350"] {
transition-duration: 350ms;
}
[data-aos-delay="350"] [data-aos], [data-aos][data-aos][data-aos-delay="350"] {
transition-delay: 0;
}
[data-aos-delay="350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="350"].aos-animate {
transition-delay: 350ms;
}
[data-aos-duration="400"] [data-aos], [data-aos][data-aos][data-aos-duration="400"] {
transition-duration: 400ms;
}
[data-aos-delay="400"] [data-aos], [data-aos][data-aos][data-aos-delay="400"] {
transition-delay: 0;
}
[data-aos-delay="400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="400"].aos-animate {
transition-delay: 400ms;
}
[data-aos-duration="450"] [data-aos], [data-aos][data-aos][data-aos-duration="450"] {
transition-duration: 450ms;
}
[data-aos-delay="450"] [data-aos], [data-aos][data-aos][data-aos-delay="450"] {
transition-delay: 0;
}
[data-aos-delay="450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="450"].aos-animate {
transition-delay: 450ms;
}
[data-aos-duration="500"] [data-aos], [data-aos][data-aos][data-aos-duration="500"] {
transition-duration: 500ms;
}
[data-aos-delay="500"] [data-aos], [data-aos][data-aos][data-aos-delay="500"] {
transition-delay: 0;
}
[data-aos-delay="500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="500"].aos-animate {
transition-delay: 500ms;
}
[data-aos-duration="550"] [data-aos], [data-aos][data-aos][data-aos-duration="550"] {
transition-duration: 550ms;
}
[data-aos-delay="550"] [data-aos], [data-aos][data-aos][data-aos-delay="550"] {
transition-delay: 0;
}
[data-aos-delay="550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="550"].aos-animate {
transition-delay: 550ms;
}
[data-aos-duration="600"] [data-aos], [data-aos][data-aos][data-aos-duration="600"] {
transition-duration: 600ms;
}
[data-aos-delay="600"] [data-aos], [data-aos][data-aos][data-aos-delay="600"] {
transition-delay: 0;
}
[data-aos-delay="600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="600"].aos-animate {
transition-delay: 600ms;
}
[data-aos-duration="650"] [data-aos], [data-aos][data-aos][data-aos-duration="650"] {
transition-duration: 650ms;
}
[data-aos-delay="650"] [data-aos], [data-aos][data-aos][data-aos-delay="650"] {
transition-delay: 0;
}
[data-aos-delay="650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="650"].aos-animate {
transition-delay: 650ms;
}
[data-aos-duration="700"] [data-aos], [data-aos][data-aos][data-aos-duration="700"] {
transition-duration: 700ms;
}
[data-aos-delay="700"] [data-aos], [data-aos][data-aos][data-aos-delay="700"] {
transition-delay: 0;
}
[data-aos-delay="700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="700"].aos-animate {
transition-delay: 700ms;
}
[data-aos-duration="750"] [data-aos], [data-aos][data-aos][data-aos-duration="750"] {
transition-duration: 750ms;
}
[data-aos-delay="750"] [data-aos], [data-aos][data-aos][data-aos-delay="750"] {
transition-delay: 0;
}
[data-aos-delay="750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="750"].aos-animate {
transition-delay: 750ms;
}
[data-aos-duration="800"] [data-aos], [data-aos][data-aos][data-aos-duration="800"] {
transition-duration: 800ms;
}
[data-aos-delay="800"] [data-aos], [data-aos][data-aos][data-aos-delay="800"] {
transition-delay: 0;
}
[data-aos-delay="800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="800"].aos-animate {
transition-delay: 800ms;
}
[data-aos-duration="850"] [data-aos], [data-aos][data-aos][data-aos-duration="850"] {
transition-duration: 850ms;
}
[data-aos-delay="850"] [data-aos], [data-aos][data-aos][data-aos-delay="850"] {
transition-delay: 0;
}
[data-aos-delay="850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="850"].aos-animate {
transition-delay: 850ms;
}
[data-aos-duration="900"] [data-aos], [data-aos][data-aos][data-aos-duration="900"] {
transition-duration: 900ms;
}
[data-aos-delay="900"] [data-aos], [data-aos][data-aos][data-aos-delay="900"] {
transition-delay: 0;
}
[data-aos-delay="900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="900"].aos-animate {
transition-delay: 900ms;
}
[data-aos-duration="950"] [data-aos], [data-aos][data-aos][data-aos-duration="950"] {
transition-duration: 950ms;
}
[data-aos-delay="950"] [data-aos], [data-aos][data-aos][data-aos-delay="950"] {
transition-delay: 0;
}
[data-aos-delay="950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="950"].aos-animate {
transition-delay: 950ms;
}
[data-aos-duration="1000"] [data-aos], [data-aos][data-aos][data-aos-duration="1000"] {
transition-duration: 1000ms;
}
[data-aos-delay="1000"] [data-aos], [data-aos][data-aos][data-aos-delay="1000"] {
transition-delay: 0;
}
[data-aos-delay="1000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1000"].aos-animate {
transition-delay: 1000ms;
}
[data-aos-duration="1050"] [data-aos], [data-aos][data-aos][data-aos-duration="1050"] {
transition-duration: 1050ms;
}
[data-aos-delay="1050"] [data-aos], [data-aos][data-aos][data-aos-delay="1050"] {
transition-delay: 0;
}
[data-aos-delay="1050"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1050"].aos-animate {
transition-delay: 1050ms;
}
[data-aos-duration="1100"] [data-aos], [data-aos][data-aos][data-aos-duration="1100"] {
transition-duration: 1100ms;
}
[data-aos-delay="1100"] [data-aos], [data-aos][data-aos][data-aos-delay="1100"] {
transition-delay: 0;
}
[data-aos-delay="1100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1100"].aos-animate {
transition-delay: 1100ms;
}
[data-aos-duration="1150"] [data-aos], [data-aos][data-aos][data-aos-duration="1150"] {
transition-duration: 1150ms;
}
[data-aos-delay="1150"] [data-aos], [data-aos][data-aos][data-aos-delay="1150"] {
transition-delay: 0;
}
[data-aos-delay="1150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1150"].aos-animate {
transition-delay: 1150ms;
}
[data-aos-duration="1200"] [data-aos], [data-aos][data-aos][data-aos-duration="1200"] {
transition-duration: 1200ms;
}
[data-aos-delay="1200"] [data-aos], [data-aos][data-aos][data-aos-delay="1200"] {
transition-delay: 0;
}
[data-aos-delay="1200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1200"].aos-animate {
transition-delay: 1200ms;
}
[data-aos-duration="1250"] [data-aos], [data-aos][data-aos][data-aos-duration="1250"] {
transition-duration: 1250ms;
}
[data-aos-delay="1250"] [data-aos], [data-aos][data-aos][data-aos-delay="1250"] {
transition-delay: 0;
}
[data-aos-delay="1250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1250"].aos-animate {
transition-delay: 1250ms;
}
[data-aos-duration="1300"] [data-aos], [data-aos][data-aos][data-aos-duration="1300"] {
transition-duration: 1300ms;
}
[data-aos-delay="1300"] [data-aos], [data-aos][data-aos][data-aos-delay="1300"] {
transition-delay: 0;
}
[data-aos-delay="1300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1300"].aos-animate {
transition-delay: 1300ms;
}
[data-aos-duration="1350"] [data-aos], [data-aos][data-aos][data-aos-duration="1350"] {
transition-duration: 1350ms;
}
[data-aos-delay="1350"] [data-aos], [data-aos][data-aos][data-aos-delay="1350"] {
transition-delay: 0;
}
[data-aos-delay="1350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1350"].aos-animate {
transition-delay: 1350ms;
}
[data-aos-duration="1400"] [data-aos], [data-aos][data-aos][data-aos-duration="1400"] {
transition-duration: 1400ms;
}
[data-aos-delay="1400"] [data-aos], [data-aos][data-aos][data-aos-delay="1400"] {
transition-delay: 0;
}
[data-aos-delay="1400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1400"].aos-animate {
transition-delay: 1400ms;
}
[data-aos-duration="1450"] [data-aos], [data-aos][data-aos][data-aos-duration="1450"] {
transition-duration: 1450ms;
}
[data-aos-delay="1450"] [data-aos], [data-aos][data-aos][data-aos-delay="1450"] {
transition-delay: 0;
}
[data-aos-delay="1450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1450"].aos-animate {
transition-delay: 1450ms;
}
[data-aos-duration="1500"] [data-aos], [data-aos][data-aos][data-aos-duration="1500"] {
transition-duration: 1500ms;
}
[data-aos-delay="1500"] [data-aos], [data-aos][data-aos][data-aos-delay="1500"] {
transition-delay: 0;
}
[data-aos-delay="1500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1500"].aos-animate {
transition-delay: 1500ms;
}
[data-aos-duration="1550"] [data-aos], [data-aos][data-aos][data-aos-duration="1550"] {
transition-duration: 1550ms;
}
[data-aos-delay="1550"] [data-aos], [data-aos][data-aos][data-aos-delay="1550"] {
transition-delay: 0;
}
[data-aos-delay="1550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1550"].aos-animate {
transition-delay: 1550ms;
}
[data-aos-duration="1600"] [data-aos], [data-aos][data-aos][data-aos-duration="1600"] {
transition-duration: 1600ms;
}
[data-aos-delay="1600"] [data-aos], [data-aos][data-aos][data-aos-delay="1600"] {
transition-delay: 0;
}
[data-aos-delay="1600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1600"].aos-animate {
transition-delay: 1600ms;
}
[data-aos-duration="1650"] [data-aos], [data-aos][data-aos][data-aos-duration="1650"] {
transition-duration: 1650ms;
}
[data-aos-delay="1650"] [data-aos], [data-aos][data-aos][data-aos-delay="1650"] {
transition-delay: 0;
}
[data-aos-delay="1650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1650"].aos-animate {
transition-delay: 1650ms;
}
[data-aos-duration="1700"] [data-aos], [data-aos][data-aos][data-aos-duration="1700"] {
transition-duration: 1700ms;
}
[data-aos-delay="1700"] [data-aos], [data-aos][data-aos][data-aos-delay="1700"] {
transition-delay: 0;
}
[data-aos-delay="1700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1700"].aos-animate {
transition-delay: 1700ms;
}
[data-aos-duration="1750"] [data-aos], [data-aos][data-aos][data-aos-duration="1750"] {
transition-duration: 1750ms;
}
[data-aos-delay="1750"] [data-aos], [data-aos][data-aos][data-aos-delay="1750"] {
transition-delay: 0;
}
[data-aos-delay="1750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1750"].aos-animate {
transition-delay: 1750ms;
}
[data-aos-duration="1800"] [data-aos], [data-aos][data-aos][data-aos-duration="1800"] {
transition-duration: 1800ms;
}
[data-aos-delay="1800"] [data-aos], [data-aos][data-aos][data-aos-delay="1800"] {
transition-delay: 0;
}
[data-aos-delay="1800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1800"].aos-animate {
transition-delay: 1800ms;
}
[data-aos-duration="1850"] [data-aos], [data-aos][data-aos][data-aos-duration="1850"] {
transition-duration: 1850ms;
}
[data-aos-delay="1850"] [data-aos], [data-aos][data-aos][data-aos-delay="1850"] {
transition-delay: 0;
}
[data-aos-delay="1850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1850"].aos-animate {
transition-delay: 1850ms;
}
[data-aos-duration="1900"] [data-aos], [data-aos][data-aos][data-aos-duration="1900"] {
transition-duration: 1900ms;
}
[data-aos-delay="1900"] [data-aos], [data-aos][data-aos][data-aos-delay="1900"] {
transition-delay: 0;
}
[data-aos-delay="1900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1900"].aos-animate {
transition-delay: 1900ms;
}
[data-aos-duration="1950"] [data-aos], [data-aos][data-aos][data-aos-duration="1950"] {
transition-duration: 1950ms;
}
[data-aos-delay="1950"] [data-aos], [data-aos][data-aos][data-aos-delay="1950"] {
transition-delay: 0;
}
[data-aos-delay="1950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="1950"].aos-animate {
transition-delay: 1950ms;
}
[data-aos-duration="2000"] [data-aos], [data-aos][data-aos][data-aos-duration="2000"] {
transition-duration: 2000ms;
}
[data-aos-delay="2000"] [data-aos], [data-aos][data-aos][data-aos-delay="2000"] {
transition-delay: 0;
}
[data-aos-delay="2000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2000"].aos-animate {
transition-delay: 2000ms;
}
[data-aos-duration="2050"] [data-aos], [data-aos][data-aos][data-aos-duration="2050"] {
transition-duration: 2050ms;
}
[data-aos-delay="2050"] [data-aos], [data-aos][data-aos][data-aos-delay="2050"] {
transition-delay: 0;
}
[data-aos-delay="2050"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2050"].aos-animate {
transition-delay: 2050ms;
}
[data-aos-duration="2100"] [data-aos], [data-aos][data-aos][data-aos-duration="2100"] {
transition-duration: 2100ms;
}
[data-aos-delay="2100"] [data-aos], [data-aos][data-aos][data-aos-delay="2100"] {
transition-delay: 0;
}
[data-aos-delay="2100"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2100"].aos-animate {
transition-delay: 2100ms;
}
[data-aos-duration="2150"] [data-aos], [data-aos][data-aos][data-aos-duration="2150"] {
transition-duration: 2150ms;
}
[data-aos-delay="2150"] [data-aos], [data-aos][data-aos][data-aos-delay="2150"] {
transition-delay: 0;
}
[data-aos-delay="2150"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2150"].aos-animate {
transition-delay: 2150ms;
}
[data-aos-duration="2200"] [data-aos], [data-aos][data-aos][data-aos-duration="2200"] {
transition-duration: 2200ms;
}
[data-aos-delay="2200"] [data-aos], [data-aos][data-aos][data-aos-delay="2200"] {
transition-delay: 0;
}
[data-aos-delay="2200"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2200"].aos-animate {
transition-delay: 2200ms;
}
[data-aos-duration="2250"] [data-aos], [data-aos][data-aos][data-aos-duration="2250"] {
transition-duration: 2250ms;
}
[data-aos-delay="2250"] [data-aos], [data-aos][data-aos][data-aos-delay="2250"] {
transition-delay: 0;
}
[data-aos-delay="2250"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2250"].aos-animate {
transition-delay: 2250ms;
}
[data-aos-duration="2300"] [data-aos], [data-aos][data-aos][data-aos-duration="2300"] {
transition-duration: 2300ms;
}
[data-aos-delay="2300"] [data-aos], [data-aos][data-aos][data-aos-delay="2300"] {
transition-delay: 0;
}
[data-aos-delay="2300"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2300"].aos-animate {
transition-delay: 2300ms;
}
[data-aos-duration="2350"] [data-aos], [data-aos][data-aos][data-aos-duration="2350"] {
transition-duration: 2350ms;
}
[data-aos-delay="2350"] [data-aos], [data-aos][data-aos][data-aos-delay="2350"] {
transition-delay: 0;
}
[data-aos-delay="2350"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2350"].aos-animate {
transition-delay: 2350ms;
}
[data-aos-duration="2400"] [data-aos], [data-aos][data-aos][data-aos-duration="2400"] {
transition-duration: 2400ms;
}
[data-aos-delay="2400"] [data-aos], [data-aos][data-aos][data-aos-delay="2400"] {
transition-delay: 0;
}
[data-aos-delay="2400"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2400"].aos-animate {
transition-delay: 2400ms;
}
[data-aos-duration="2450"] [data-aos], [data-aos][data-aos][data-aos-duration="2450"] {
transition-duration: 2450ms;
}
[data-aos-delay="2450"] [data-aos], [data-aos][data-aos][data-aos-delay="2450"] {
transition-delay: 0;
}
[data-aos-delay="2450"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2450"].aos-animate {
transition-delay: 2450ms;
}
[data-aos-duration="2500"] [data-aos], [data-aos][data-aos][data-aos-duration="2500"] {
transition-duration: 2500ms;
}
[data-aos-delay="2500"] [data-aos], [data-aos][data-aos][data-aos-delay="2500"] {
transition-delay: 0;
}
[data-aos-delay="2500"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2500"].aos-animate {
transition-delay: 2500ms;
}
[data-aos-duration="2550"] [data-aos], [data-aos][data-aos][data-aos-duration="2550"] {
transition-duration: 2550ms;
}
[data-aos-delay="2550"] [data-aos], [data-aos][data-aos][data-aos-delay="2550"] {
transition-delay: 0;
}
[data-aos-delay="2550"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2550"].aos-animate {
transition-delay: 2550ms;
}
[data-aos-duration="2600"] [data-aos], [data-aos][data-aos][data-aos-duration="2600"] {
transition-duration: 2600ms;
}
[data-aos-delay="2600"] [data-aos], [data-aos][data-aos][data-aos-delay="2600"] {
transition-delay: 0;
}
[data-aos-delay="2600"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2600"].aos-animate {
transition-delay: 2600ms;
}
[data-aos-duration="2650"] [data-aos], [data-aos][data-aos][data-aos-duration="2650"] {
transition-duration: 2650ms;
}
[data-aos-delay="2650"] [data-aos], [data-aos][data-aos][data-aos-delay="2650"] {
transition-delay: 0;
}
[data-aos-delay="2650"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2650"].aos-animate {
transition-delay: 2650ms;
}
[data-aos-duration="2700"] [data-aos], [data-aos][data-aos][data-aos-duration="2700"] {
transition-duration: 2700ms;
}
[data-aos-delay="2700"] [data-aos], [data-aos][data-aos][data-aos-delay="2700"] {
transition-delay: 0;
}
[data-aos-delay="2700"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2700"].aos-animate {
transition-delay: 2700ms;
}
[data-aos-duration="2750"] [data-aos], [data-aos][data-aos][data-aos-duration="2750"] {
transition-duration: 2750ms;
}
[data-aos-delay="2750"] [data-aos], [data-aos][data-aos][data-aos-delay="2750"] {
transition-delay: 0;
}
[data-aos-delay="2750"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2750"].aos-animate {
transition-delay: 2750ms;
}
[data-aos-duration="2800"] [data-aos], [data-aos][data-aos][data-aos-duration="2800"] {
transition-duration: 2800ms;
}
[data-aos-delay="2800"] [data-aos], [data-aos][data-aos][data-aos-delay="2800"] {
transition-delay: 0;
}
[data-aos-delay="2800"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2800"].aos-animate {
transition-delay: 2800ms;
}
[data-aos-duration="2850"] [data-aos], [data-aos][data-aos][data-aos-duration="2850"] {
transition-duration: 2850ms;
}
[data-aos-delay="2850"] [data-aos], [data-aos][data-aos][data-aos-delay="2850"] {
transition-delay: 0;
}
[data-aos-delay="2850"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2850"].aos-animate {
transition-delay: 2850ms;
}
[data-aos-duration="2900"] [data-aos], [data-aos][data-aos][data-aos-duration="2900"] {
transition-duration: 2900ms;
}
[data-aos-delay="2900"] [data-aos], [data-aos][data-aos][data-aos-delay="2900"] {
transition-delay: 0;
}
[data-aos-delay="2900"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2900"].aos-animate {
transition-delay: 2900ms;
}
[data-aos-duration="2950"] [data-aos], [data-aos][data-aos][data-aos-duration="2950"] {
transition-duration: 2950ms;
}
[data-aos-delay="2950"] [data-aos], [data-aos][data-aos][data-aos-delay="2950"] {
transition-delay: 0;
}
[data-aos-delay="2950"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="2950"].aos-animate {
transition-delay: 2950ms;
}
[data-aos-duration="3000"] [data-aos], [data-aos][data-aos][data-aos-duration="3000"] {
transition-duration: 3000ms;
}
[data-aos-delay="3000"] [data-aos], [data-aos][data-aos][data-aos-delay="3000"] {
transition-delay: 0;
}
[data-aos-delay="3000"] [data-aos].aos-animate, [data-aos][data-aos][data-aos-delay="3000"].aos-animate {
transition-delay: 3000ms;
}
[data-aos-easing=linear] [data-aos], [data-aos][data-aos][data-aos-easing=linear] {
transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
[data-aos-easing=ease] [data-aos], [data-aos][data-aos][data-aos-easing=ease] {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-aos-easing=ease-in] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in] {
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}
[data-aos-easing=ease-out] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out] {
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
[data-aos-easing=ease-in-out] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out] {
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
[data-aos-easing=ease-in-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-back] {
transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
[data-aos-easing=ease-out-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-back] {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 10.275);
}
[data-aos-easing=ease-in-out-back] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-back] {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 10.55);
}
[data-aos-easing=ease-in-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-sine] {
transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}
[data-aos-easing=ease-out-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-sine] {
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
[data-aos-easing=ease-in-out-sine] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-sine] {
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-aos-easing=ease-in-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-quad] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
[data-aos-easing=ease-out-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-quad] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-aos-easing=ease-in-out-quad] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-quad] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
[data-aos-easing=ease-in-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-cubic] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
[data-aos-easing=ease-out-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-cubic] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-aos-easing=ease-in-out-cubic] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-cubic] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
[data-aos-easing=ease-in-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-quart] {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
[data-aos-easing=ease-out-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-out-quart] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-aos-easing=ease-in-out-quart] [data-aos], [data-aos][data-aos][data-aos-easing=ease-in-out-quart] {
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
/**
* Fade animations:
* fade
* fade-up, fade-down
*/
[data-aos^=fade][data-aos^=fade]:not(.no-aos-animation) {
opacity: 0;
transition-property: opacity, transform;
}
[data-aos^=fade][data-aos^=fade]:not(.no-aos-animation).aos-animate {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-aos=fade-up]:not(.no-aos-animation) {
transform: translate3d(0, 100px, 0);
}
[data-aos=fade-down]:not(.no-aos-animation) {
transform: translate3d(0, -100px, 0);
}
.glide {
position: relative;
box-sizing: border-box;
}
.glide * {
box-sizing: inherit;
}
.glide__track {
height: 100%;
overflow: hidden;
}
.glide__slides {
position: relative;
width: 100%;
list-style: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.glide__slides--dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.glide__slide a {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
-ms-user-select: none;
}
.glide__arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.glide__bullets {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.glide--rtl {
direction: rtl;
}