:root {
--cover-bg-placeholder: #eee url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MCIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxMjgwIDcyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjRUVFIiBkPSJNMCAwaDEyODB2NzIwSDB6Ii8+PHBhdGggZD0ibTgxNC41OTEgMzU3LjEwNi01Ny44MDQtNTcuNjU4IDQxLjc5NC00MS42ODgtLjAzNC0uMDM5LjAzNC0uMDM0aC0uMDcyTDY4NC40OTEgMTQzLjk1OEM2NzMuODI3IDEzMy4zMjEgNjU5Ljg0NSAxMjggNjQ1Ljg2OCAxMjhjLTEzLjk4MiAwLTI3Ljk1OSA1LjMyMS0zOC42MjcgMTUuOTU4TDQ2NC45OTkgMjg1Ljg0M2MtMjEuMzMyIDIxLjI3OC0yMS4zMzIgNTUuNzc2IDAgNzcuMDU0bDcyLjIyMyA3Mi4wNDEtNDEuNzk0IDQxLjY4NSA5OS42NjggOTkuNDE1QzYwNS43NjQgNTg2LjY3OSA2MTkuNzQyIDU5MiA2MzMuNzIzIDU5MmMxMy45NzggMCAyNy45NTktNS4zMjEgMzguNjIzLTE1Ljk2MmwxNDIuMjQ1LTE0MS44ODFjMjEuMzMzLTIxLjI3MSAyMS4zMzMtNTUuNzc2IDAtNzcuMDUxWm0tMzMwLjYxNC0xMy4xNDJjLTEwLjgyOS0xMC44MDItMTAuODI5LTI4LjM4NiAwLTM5LjE4OGwxNDIuMjQ1LTE0MS44ODRjNS4yNDYtNS4yMzMgMTIuMjI1LTguMTE3IDE5LjY0Ni04LjExNyA3LjQyIDAgMTQuMzk1IDIuODg0IDE5LjY0NSA4LjExN2w5NS4wMzYgOTQuNzk1aC00NS42NDFsLjAwOC4wMDhMNTU2LjIgNDE2LjAwNGwtNzIuMjIzLTcyLjA0Wm0zMTEuNjMzIDcxLjI2M0w2NTMuMzY1IDU1Ny4xMTZjLTUuMjQ2IDUuMjI5LTEyLjIyMiA4LjExMy0xOS42NDIgOC4xMTMtNy40MjQgMC0xNC4zOTktMi44ODQtMTkuNjQ1LTguMTEzbC04MC42OS04MC40OSAxODEuNTMxLTE4MS4wNjggODAuNjkxIDgwLjQ4NmMxMC44MzMgMTAuNzk4IDEwLjgzMyAyOC4zODUgMCAzOS4xODNaIiBmaWxsPSIjZmZmIi8+PC9zdmc+) no-repeat center / cover
}
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%
}
ul {
list-style: none
}
button, input, select, textarea {
margin: 0
}
html {
box-sizing: border-box
}
* {
box-sizing: inherit
}
*::before, *::after {
box-sizing: inherit
}
img, embed, iframe, object, video {
max-width: 100%
}
audio {
max-width: 100%
}
iframe {
border: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
td, th {
padding: 0;
text-align: left
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
font-variant-ligatures: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizelegibility;
text-shadow: rgba(0, 0, 0, 0.1) 0 0 1px
}
html:lang(ar-SA) {
direction: rtl
}
body {
color: #3b3d40;
font-size: 1rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
line-height: 1.35
}
button, input {
font-family: "Inter", "Arial-Fallback", arial, sans-serif
}
a {
color: inherit;
text-decoration: none
}
img {
border: 0 none
}
.pt-xxxs {
padding-top: 4px !important
}
.pt-xxs {
padding-top: 8px !important
}
.pt-xs {
padding-top: 12px !important
}
.pt-s {
padding-top: 16px !important
}
.pt-m {
padding-top: 24px !important
}
.pt-l {
padding-top: 36px !important
}
.pt-xl {
padding-top: 48px !important
}
.pt-n {
padding-top: 0 !important
}
.pt-auto {
padding-top: auto !important
}
.pb-xxxs {
padding-bottom: 4px !important
}
.pb-xxs {
padding-bottom: 8px !important
}
.pb-xs {
padding-bottom: 12px !important
}
.pb-s {
padding-bottom: 16px !important
}
.pb-m {
padding-bottom: 24px !important
}
.pb-l {
padding-bottom: 36px !important
}
.pb-xl {
padding-bottom: 48px !important
}
.pb-n {
padding-bottom: 0 !important
}
.pb-auto {
padding-bottom: auto !important
}
.pr-xxxs {
padding-right: 4px !important
}
.pr-xxs {
padding-right: 8px !important
}
.pr-xs {
padding-right: 12px !important
}
.pr-s {
padding-right: 16px !important
}
.pr-m {
padding-right: 24px !important
}
.pr-l {
padding-right: 36px !important
}
.pr-xl {
padding-right: 48px !important
}
.pr-n {
padding-right: 0 !important
}
.pr-auto {
padding-right: auto !important
}
.pl-xxxs {
padding-left: 4px !important
}
.pl-xxs {
padding-left: 8px !important
}
.pl-xs {
padding-left: 12px !important
}
.pl-s {
padding-left: 16px !important
}
.pl-m {
padding-left: 24px !important
}
.pl-l {
padding-left: 36px !important
}
.pl-xl {
padding-left: 48px !important
}
.pl-n {
padding-left: 0 !important
}
.pl-auto {
padding-left: auto !important
}
.ph-xxxs {
padding-left: 4px !important;
padding-right: 4px !important
}
.ph-xxs {
padding-left: 8px !important;
padding-right: 8px !important
}
.ph-xs {
padding-left: 12px !important;
padding-right: 12px !important
}
.ph-s {
padding-left: 16px !important;
padding-right: 16px !important
}
.ph-m {
padding-left: 24px !important;
padding-right: 24px !important
}
.ph-l {
padding-left: 36px !important;
padding-right: 36px !important
}
.ph-xl {
padding-left: 48px !important;
padding-right: 48px !important
}
.ph-n {
padding-left: 0 !important;
padding-right: 0 !important
}
.ph-auto {
padding-left: auto !important;
padding-right: auto !important
}
.pv-xxxs {
padding-top: 4px !important;
padding-bottom: 4px !important
}
.pv-xxs {
padding-top: 8px !important;
padding-bottom: 8px !important
}
.pv-xs {
padding-top: 12px !important;
padding-bottom: 12px !important
}
.pv-s {
padding-top: 16px !important;
padding-bottom: 16px !important
}
.pv-m {
padding-top: 24px !important;
padding-bottom: 24px !important
}
.pv-l {
padding-top: 36px !important;
padding-bottom: 36px !important
}
.pv-xl {
padding-top: 48px !important;
padding-bottom: 48px !important
}
.pv-n {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.pv-auto {
padding-top: auto !important;
padding-bottom: auto !important
}
.pa-xxxs {
padding: 4px !important
}
.pa-xxs {
padding: 8px !important
}
.pa-xs {
padding: 12px !important
}
.pa-s {
padding: 16px !important
}
.pa-m {
padding: 24px !important
}
.pa-l {
padding: 36px !important
}
.pa-xl {
padding: 48px !important
}
.pa-n {
padding: 0 !important
}
.pa-auto {
padding: auto !important
}
.mt-xxxs {
margin-top: 4px !important
}
.mt-xxs {
margin-top: 8px !important
}
.mt-xs {
margin-top: 12px !important
}
.mt-s {
margin-top: 16px !important
}
.mt-m {
margin-top: 24px !important
}
.mt-l {
margin-top: 36px !important
}
.mt-xl {
margin-top: 48px !important
}
.mt-n {
margin-top: 0 !important
}
.mt-auto {
margin-top: auto !important
}
.mb-xxxs {
margin-bottom: 4px !important
}
.mb-xxs {
margin-bottom: 8px !important
}
.mb-xs {
margin-bottom: 12px !important
}
.mb-s {
margin-bottom: 16px !important
}
.mb-m {
margin-bottom: 24px !important
}
.mb-l {
margin-bottom: 36px !important
}
.mb-xl {
margin-bottom: 48px !important
}
.mb-n {
margin-bottom: 0 !important
}
.mb-auto {
margin-bottom: auto !important
}
.mr-xxxs {
margin-right: 4px !important
}
.mr-xxs {
margin-right: 8px !important
}
.mr-xs {
margin-right: 12px !important
}
.mr-s {
margin-right: 16px !important
}
.mr-m {
margin-right: 24px !important
}
.mr-l {
margin-right: 36px !important
}
.mr-xl {
margin-right: 48px !important
}
.mr-n {
margin-right: 0 !important
}
.mr-auto {
margin-right: auto !important
}
.ml-xxxs {
margin-left: 4px !important
}
.ml-xxs {
margin-left: 8px !important
}
.ml-xs {
margin-left: 12px !important
}
.ml-s {
margin-left: 16px !important
}
.ml-m {
margin-left: 24px !important
}
.ml-l {
margin-left: 36px !important
}
.ml-xl {
margin-left: 48px !important
}
.ml-n {
margin-left: 0 !important
}
.ml-auto {
margin-left: auto !important
}
.mh-xxxs {
margin-left: 4px !important;
margin-right: 4px !important
}
.mh-xxs {
margin-left: 8px !important;
margin-right: 8px !important
}
.mh-xs {
margin-left: 12px !important;
margin-right: 12px !important
}
.mh-s {
margin-left: 16px !important;
margin-right: 16px !important
}
.mh-m {
margin-left: 24px !important;
margin-right: 24px !important
}
.mh-l {
margin-left: 36px !important;
margin-right: 36px !important
}
.mh-xl {
margin-left: 48px !important;
margin-right: 48px !important
}
.mh-n {
margin-left: 0 !important;
margin-right: 0 !important
}
.mh-auto {
margin-left: auto !important;
margin-right: auto !important
}
.mv-xxxs {
margin-top: 4px !important;
margin-bottom: 4px !important
}
.mv-xxs {
margin-top: 8px !important;
margin-bottom: 8px !important
}
.mv-xs {
margin-top: 12px !important;
margin-bottom: 12px !important
}
.mv-s {
margin-top: 16px !important;
margin-bottom: 16px !important
}
.mv-m {
margin-top: 24px !important;
margin-bottom: 24px !important
}
.mv-l {
margin-top: 36px !important;
margin-bottom: 36px !important
}
.mv-xl {
margin-top: 48px !important;
margin-bottom: 48px !important
}
.mv-n {
margin-top: 0 !important;
margin-bottom: 0 !important
}
.mv-auto {
margin-top: auto !important;
margin-bottom: auto !important
}
.ma-xxxs {
margin: 4px !important
}
.ma-xxs {
margin: 8px !important
}
.ma-xs {
margin: 12px !important
}
.ma-s {
margin: 16px !important
}
.ma-m {
margin: 24px !important
}
.ma-l {
margin: 36px !important
}
.ma-xl {
margin: 48px !important
}
.ma-n {
margin: 0 !important
}
.ma-auto {
margin: auto !important
}
.is-shown {
display: block !important
}
.is-hidden {
display: none !important
}
.is-invisible {
position: absolute;
top: -999999em;
left: auto;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden
}
.is-sticky {
position: sticky;
top: 60px
}
.is-sticky::after {
display: table;
clear: both;
content: ""
}
@media (min-width: 48em) {
.is-sticky {
top: 92px
}
}
.has-no-scroll {
overflow: hidden;
touch-action: none;
-webkit-overflow-scrolling: none;
overscroll-behavior: none
}
.hidden-xs-up {
display: none !important
}
@media (max-width: 29.94em) {
.hidden-xs-down {
display: none !important
}
}
@media (min-width: 30em) {
.hidden-sm-up {
display: none !important
}
}
@media (max-width: 47.94em) {
.hidden-sm-down {
display: none !important
}
}
@media (min-width: 48em) {
.hidden-md-up {
display: none !important
}
}
@media (max-width: 63.94em) {
.hidden-md-down {
display: none !important
}
}
@media (min-width: 64em) {
.hidden-lg-up {
display: none !important
}
}
@media (max-width: 79.94em) {
.hidden-lg-down {
display: none !important
}
}
@media (min-width: 80em) {
.hidden-xl-up {
display: none !important
}
}
@media (max-width: 89.94em) {
.hidden-xl-down {
display: none !important
}
}
@media (min-width: 90em) {
.hidden-xxl-up {
display: none !important
}
}
@media (max-width: 119.94em) {
.hidden-xxl-down {
display: none !important
}
}
@media (min-width: 120em) {
.hidden-xxxl-up {
display: none !important
}
}
.hidden-xxxl-down {
display: none !important
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -8px
}
.row--reverse {
flex-direction: row-reverse
}
.col-xs-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 8px
}
.col-xs-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 8px
}
.col-xs-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 8px
}
.col-xs-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 8px
}
.col-xs-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 8px
}
.col-xs-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 8px
}
.col-xs-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 8px
}
.col-xs-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 8px
}
.col-xs-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 8px
}
.col-xs-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 8px
}
.col-xs-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 8px
}
.col-xs-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 8px
}
@media only screen and (min-width: 20em) {
.row {
margin: 0 -8px
}
.col-sm-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 8px
}
.col-sm-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 8px
}
.col-sm-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 8px
}
.col-sm-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 8px
}
.col-sm-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 8px
}
.col-sm-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 8px
}
.col-sm-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 8px
}
.col-sm-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 8px
}
.col-sm-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 8px
}
.col-sm-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 8px
}
.col-sm-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 8px
}
.col-sm-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 8px
}
}
@media only screen and (min-width: 48em) {
.row {
margin: 0 -8px
}
.col-md-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 8px
}
.col-md-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 8px
}
.col-md-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 8px
}
.col-md-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 8px
}
.col-md-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 8px
}
.col-md-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 8px
}
.col-md-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 8px
}
.col-md-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 8px
}
.col-md-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 8px
}
.col-md-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 8px
}
.col-md-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 8px
}
.col-md-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 8px
}
}
@media only screen and (min-width: 64em) {
.row {
margin: 0 -12px
}
.col-lg-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 12px
}
.col-lg-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 12px
}
.col-lg-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 12px
}
.col-lg-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 12px
}
.col-lg-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 12px
}
.col-lg-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 12px
}
.col-lg-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 12px
}
.col-lg-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 12px
}
.col-lg-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 12px
}
.col-lg-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 12px
}
.col-lg-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 12px
}
.col-lg-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 12px
}
}
@media only screen and (min-width: 80em) {
.row {
margin: 0 -12px
}
.col-xl-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 12px
}
.col-xl-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 12px
}
.col-xl-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 12px
}
.col-xl-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 12px
}
.col-xl-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 12px
}
.col-xl-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 12px
}
.col-xl-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 12px
}
.col-xl-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 12px
}
.col-xl-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 12px
}
.col-xl-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 12px
}
.col-xl-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 12px
}
.col-xl-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 12px
}
}
@media only screen and (min-width: 90em) {
.row {
margin: 0 -12px
}
.col-xxl-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 12px
}
.col-xxl-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 12px
}
.col-xxl-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 12px
}
.col-xxl-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 12px
}
.col-xxl-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 12px
}
.col-xxl-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 12px
}
.col-xxl-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 12px
}
.col-xxl-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 12px
}
.col-xxl-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 12px
}
.col-xxl-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 12px
}
.col-xxl-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 12px
}
.col-xxl-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 12px
}
}
@media only screen and (min-width: 120em) {
.row {
margin: 0 -12px
}
.col-xxxl-1 {
flex-basis: 8.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 8.3333333333%;
padding: 0 12px
}
.col-xxxl-2 {
flex-basis: 16.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 16.6666666667%;
padding: 0 12px
}
.col-xxxl-3 {
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
max-width: 25%;
padding: 0 12px
}
.col-xxxl-4 {
flex-basis: 33.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 33.3333333333%;
padding: 0 12px
}
.col-xxxl-5 {
flex-basis: 41.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 41.6666666667%;
padding: 0 12px
}
.col-xxxl-6 {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
max-width: 50%;
padding: 0 12px
}
.col-xxxl-7 {
flex-basis: 58.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 58.3333333333%;
padding: 0 12px
}
.col-xxxl-8 {
flex-basis: 66.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 66.6666666667%;
padding: 0 12px
}
.col-xxxl-9 {
flex-basis: 75%;
flex-grow: 0;
flex-shrink: 0;
max-width: 75%;
padding: 0 12px
}
.col-xxxl-10 {
flex-basis: 83.3333333333%;
flex-grow: 0;
flex-shrink: 0;
max-width: 83.3333333333%;
padding: 0 12px
}
.col-xxxl-11 {
flex-basis: 91.6666666667%;
flex-grow: 0;
flex-shrink: 0;
max-width: 91.6666666667%;
padding: 0 12px
}
.col-xxxl-12 {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 0 12px
}
}
.app-bonus-info {
flex: 1;
padding: 16px;
background: #eee;
border: 1px solid #e0e0e0;
border-radius: 8px
}
.app-specs__list {
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
width: 100%;
margin-bottom: -16px
}
.app-specs__list > li {
flex: 1 1 220px
}
.app-specs__list::after {
flex: auto;
min-width: 33.33%;
max-width: 50%;
content: ""
}
.app-specs__title {
margin-bottom: 2px;
font-size: .875rem
}
.app-specs__title--tooltip {
margin-top: 16px
}
@media (min-width: 64em) {
.app-specs__title--tooltip {
margin-top: 0;
font-weight: 600;
font-size: .8125rem
}
}
.app-specs__description {
display: block;
font-weight: 600;
font-size: .875rem;
word-break: break-word
}
@media (min-width: 64em) {
.app-specs__description {
display: inline-block
}
.app-specs__description--tooltip {
font-weight: 400;
font-size: .8125rem
}
}
.app-specs__description--list {
display: inline
}
.app-specs__description--list:not(:last-child)::after {
content: ", "
}
@media (min-width: 64em) {
.app-specs__description--list {
display: inline-block;
width: 50%
}
.app-specs__description--list:not(:last-child)::after {
content: ""
}
}
.app-specs__link {
color: #004cd9;
font-weight: 400;
font-size: .875rem
}
.app-specs__link:hover {
text-decoration: underline;
cursor: pointer
}
.app-specs__tooltip-wrapper {
position: relative;
top: 3px;
display: inline-block
}
@media (min-width: 64em) {
.app-specs__tooltip {
position: absolute;
top: 24px;
left: 24px;
z-index: 80;
min-width: 230px;
padding: 16px;
background: #fff;
box-shadow: 0 0 2px 0 #9e9e9e;
visibility: hidden;
opacity: 0;
transition: opacity .2s ease-in-out
}
:lang(ar-SA) .app-specs__tooltip {
right: 24px;
left: 0
}
}
.app-specs__label {
position: relative;
display: none;
margin-left: 4px;
color: #006adc;
font-size: 1rem
}
@media (min-width: 64em) {
.app-specs__label {
display: inline
}
}
:lang(ar-SA) .app-specs__label {
margin-right: 4px;
margin-left: 0
}
.app-specs__label:hover ~ .app-specs__tooltip {
visibility: visible;
opacity: 1
}
.app-download--sticky {
position: fixed;
bottom: 0;
left: 0;
z-index: 85;
width: 100%;
padding: 8px 16px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
border-radius: 8px 8px 0 0;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-animation: .5s slide-up;
animation: .5s slide-up;
will-change: bottom
}
@media (min-width: 48em) {
.app-download--sticky {
padding: 16px
}
}
@media (min-width: 64em), (hover: hover) {
.app-download--sticky {
position: relative;
bottom: auto;
left: auto;
z-index: 1;
width: 100%;
padding: 0;
background-color: transparent;
border-top: none;
border-radius: 0;
box-shadow: none;
-webkit-animation: none;
animation: none
}
}
@-webkit-keyframes slide-up {
from {
bottom: -80px
}
to {
bottom: 0
}
}
@keyframes slide-up {
from {
bottom: -80px
}
to {
bottom: 0
}
}
.app-featured__name {
margin-bottom: 4px;
font-weight: 600;
font-size: 1.25rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
line-height: 1.2
}
@media (min-width: 70em) {
.app-featured__name {
margin-bottom: 8px;
font-size: 1.5rem
}
}
.app-featured__features {
display: flex;
flex-wrap: wrap;
align-items: center
}
.app-featured__features:last-child {
margin-bottom: -4px
}
@media (min-width: 70em) {
.app-featured__features:last-child {
margin-bottom: -8px
}
}
.app-featured__features li {
display: inline-flex;
align-items: center;
margin-right: 4px;
margin-bottom: 4px;
font-size: .875rem
}
:lang(ar-SA) .app-featured__features li {
margin-right: 0;
margin-left: 4px
}
@media (min-width: 70em) {
.app-featured__features li {
margin-right: 8px;
margin-bottom: 8px
}
:lang(ar-SA) .app-featured__features li {
margin-right: 0;
margin-left: 8px
}
}
.app-featured__icon {
margin-right: 2px;
color: #009e61
}
:lang(ar-SA) .app-featured__icon {
margin-right: 0;
margin-left: 2px
}
.app-header__logo {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px
}
@media (min-width: 64em) {
.app-header__logo {
width: 96px;
height: 96px
}
}
.app-header__body {
row-gap: 8px;
display: flex;
flex-direction: column
}
.app-header__name {
font-weight: 600;
font-size: 1.375rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
line-height: 1.2
}
@media (min-width: 64em) {
.app-header__name {
font-size: 1.75rem
}
}
@media (min-width: 80em) {
.app-header__name {
font-size: 2rem
}
}
.app-header__name span {
color: #3b3d40;
font-weight: 400;
font-size: .875rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
white-space: nowrap
}
.app-header__features {
display: flex;
flex-wrap: wrap;
align-items: center;
-moz-column-gap: 8px;
column-gap: 8px;
row-gap: 8px
}
@media (min-width: 80em) {
.app-header__features {
-moz-column-gap: 12px;
column-gap: 12px
}
}
.app-header__item {
display: inline-flex;
align-items: center;
font-size: .875rem
}
.app-header__item--double {
-moz-column-gap: 4px;
column-gap: 4px
}
.app-icon {
max-width: 100%;
height: auto;
border-radius: 8px;
aspect-ratio: 1 / 1
}
@supports not (aspect-ratio: 1) {
.app-icon::after {
float: left;
padding-top: 100%;
content: ""
}
}
.app-icon--full {
width: 100%
}
.app-info {
display: block
}
.app-info__name {
margin-bottom: 4px;
color: #141415;
font-weight: 600;
font-size: 1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
@media (min-width: 48em) {
.app-info--medium.app-info--prominent .app-info__name {
font-size: 1.125rem
}
}
.app-info__version {
display: block;
margin-bottom: 4px;
font-size: .8125rem
}
.app-info__details {
display: flex;
align-items: center;
margin-bottom: 4px;
font-size: .75rem
}
.app-info__details > li {
display: inline-flex
}
.app-info__details > li:first-child {
margin-right: 8px
}
.app-info__description {
font-size: .875rem;
overflow: hidden
}
@supports (-webkit-line-clamp: 2) {
.app-info__description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
.app-info[href]:hover {
cursor: pointer
}
.app-info[href]:hover .app-info__name {
text-decoration: underline
}
.app-info[href].app-info--x-small {
padding: 12px
}
.app-info[href].app-info--x-small .app-info__name {
margin-bottom: 0
}
.app-info[href].app-info--x-small:hover {
background-color: #f5f5f5;
cursor: pointer
}
.app-info[href].app-info--x-small:hover .app-info__name {
text-decoration: none
}
.app-info.app-info--x-small .app-info__icon {
width: 40px;
height: 40px
}
.app-info.app-info--small .app-info__icon {
width: 48px;
height: 48px
}
.app-info.app-info--medium .app-info__icon {
width: 80px;
height: 80px
}
.app-summary__headline {
margin-bottom: 4px;
font-weight: 600;
font-size: 1.125rem
}
.app-summary__lead {
font-size: 1rem;
line-height: 1.8
}
.app-summary__lead a {
color: #004cd9
}
.app-summary__lead a:hover {
text-decoration: underline
}
.article-clue {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 112px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px
}
.article-clue__media {
width: 64px;
height: 64px;
margin-right: 20px
}
.article-clue__title {
margin-bottom: 4px;
font-weight: 600;
font-size: 1.125rem
}
.article-clue__title-article {
font-weight: 400
}
.article-clue-spinner {
display: inline-flex;
justify-content: center;
width: 52px;
height: 52px;
margin: auto
}
.article-clue-spinner__animation {
position: relative;
display: inline-block;
align-self: center;
width: 44px;
height: 44px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 2px 1px 0 #006adc;
-webkit-animation: spin .7s linear infinite;
animation: spin .7s linear infinite
}
@-webkit-keyframes spin {
100% {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 2px 1px 0 #006adc;
transform: rotate(360deg)
}
}
@keyframes spin {
100% {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 2px 1px 0 #006adc;
transform: rotate(360deg)
}
}
.bottom-bar-slide {
position: fixed;
bottom: 0;
left: 0;
z-index: 81;
display: block;
width: 100%;
max-height: 108px;
overflow: visible;
background: #3b3d40;
box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);
transition: max-height 0.5s ease-in-out
}
.bottom-bar-slide.zero-height {
max-height: 0;
transition: max-height 0.5s ease-in-out
}
.bottom-bar-slide__content {
position: relative;
display: inline-table;
width: 100%;
height: 50px;
margin: 0 0 4px;
padding: 0;
text-align: center;
background-color: transparent;
border: 0;
visibility: visible
}
.bottom-bar-slide__button {
position: relative;
z-index: 1;
display: block;
height: 5px;
background-color: #3b3d40
}
.bottom-bar-slide__button svg {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 80px;
height: 23px;
transform: translate(-50%, 0);
filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.2));
will-change: transform
}
.bottom-bar-slide__arch {
fill: #3b3d40
}
.bottom-bar-slide__arrow {
transform: rotate(0deg);
transform-origin: 40px 11.5px;
transition: transform 0.5s ease-in-out;
will-change: transform;
fill: #fff
}
.bottom-bar-slide__arrow.rotate {
transform: rotate(180deg);
will-change: transform
}
@media (min-width: 48em) {
.breadcrumb-resp ol {
flex-wrap: nowrap
}
.breadcrumb-resp li {
display: inline-flex;
white-space: nowrap
}
.breadcrumb-resp li:last-child {
overflow: hidden;
text-overflow: ellipsis
}
}
.breadcrumb-resp--scroll {
margin-right: -16px;
margin-left: -16px;
overflow-x: scroll;
overflow-y: hidden;
transform: translateZ(0);
-webkit-overflow-scrolling: touch
}
.breadcrumb-resp--scroll::-webkit-scrollbar {
display: none
}
.breadcrumb-resp--scroll ol {
padding-left: 16px;
overflow: initial
}
.breadcrumb-resp--scroll li:last-child {
padding-right: 16px;
overflow: visible;
text-overflow: initial
}
.button-download-icon {
padding: 12px;
color: #fff;
font-size: 1.5rem;
line-height: 0;
background-color: #009e61;
border-radius: 8px
}
@media (min-width: 48em) {
.button-download-icon {
padding: 16px;
font-size: 3rem
}
}
.button-download-icon:hover {
background-color: #00805e
}
.button-dropdown-version {
position: relative;
display: inline-flex;
width: 100%;
font-size: .875rem
}
.button-dropdown-version__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
min-height: 40px;
padding: 8px 12px;
color: #3b3d40;
line-height: 1rem;
background-color: #fff;
border-radius: 8px;
cursor: pointer
}
.button-dropdown-version__button--small {
padding: 8px 12px
}
.button-dropdown-version__button--full {
width: 100%
}
.button-dropdown-version__button--outline {
border: 1px solid #e0e0e0
}
.button-dropdown-version__button--primary {
color: #fff;
font-weight: 600;
background-color: #3b3d40
}
.button-dropdown-version__button--primary:hover {
color: #fff;
background-color: #2f3033
}
.button-dropdown-version__button--secondary {
color: #fff;
font-weight: 600;
background-color: #009e61
}
.button-dropdown-version__button--secondary:hover {
color: #fff;
background-color: #008551
}
.button-dropdown-version__button--tertiary {
color: #fff;
font-weight: 600;
background-color: #eb8100
}
.button-dropdown-version__button--tertiary:hover {
color: #fff;
background-color: #d27300
}
.button-dropdown-version__icon-arrow {
margin-left: 8px;
font-size: .75rem;
transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1)
}
.button-dropdown-version__menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 101;
white-space: normal;
background-color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1)
}
@media screen and (min-width: 48em) {
.button-dropdown-version__menu {
position: absolute;
top: calc(100% + 1px);
right: auto;
bottom: auto;
left: 0;
z-index: 1;
min-width: 100%;
overflow: visible;
white-space: pre;
background-color: transparent
}
}
@media screen and (min-width: 48em) {
.button-dropdown-version--right .button-dropdown-version__menu {
right: 0;
left: auto
}
}
.button-dropdown-version__menu-header {
position: sticky;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 48px;
padding: 12px 16px;
background-color: #fff;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1)
}
@media screen and (min-width: 48em) {
.button-dropdown-version__menu-header {
display: none
}
}
.button-dropdown-version__menu-title {
color: #3b3d40;
font-weight: 600;
font-size: 1rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
line-height: 1.4
}
.button-dropdown-version__menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: -12px -16px;
color: #3b3d40;
background-color: transparent;
border: 0
}
.button-dropdown-version__menu-button:focus-visible {
outline-offset: -1px
}
.button-dropdown-version__menu-icon-close {
font-size: 1.5rem
}
.button-dropdown-version__content {
height: calc(100vh - 48px);
padding: 8px 0 160px;
overflow-y: auto;
background-color: #fff
}
@media screen and (min-width: 48em) {
.button-dropdown-version__content {
display: flex;
flex-direction: column;
height: auto;
max-height: 364px;
padding-bottom: 8px;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1)
}
}
.button-dropdown-version__item {
position: relative;
line-height: 1rem
}
.button-dropdown-version__item:not(:last-child)::after {
position: absolute;
right: 16px;
bottom: -1px;
left: 16px;
height: 1px;
background-color: #e0e0e0;
content: ""
}
@media screen and (min-width: 48em) {
.button-dropdown-version__item:not(:last-child)::after {
content: none
}
}
.button-dropdown-version__link {
display: flex;
align-items: center;
padding: 16px
}
@media screen and (min-width: 48em) {
.button-dropdown-version__link {
padding: 8px 12px
}
}
.button-dropdown-version__link:hover {
background-color: #eee
}
.button-dropdown-version__link:focus-visible {
outline-offset: -1px
}
.button-dropdown-version__icon-platform {
margin-right: 4px;
vertical-align: middle
}
.button-dropdown-version__check {
display: none
}
.button-dropdown-version__check:checked ~ .button-dropdown-version__menu {
visibility: visible;
opacity: 1
}
.button-dropdown-version__check:checked ~ .button-dropdown-version__button .button-dropdown-version__icon-arrow {
transform: rotate(180deg)
}
.button-more {
margin: auto;
text-align: center
}
@media (min-width: 30em) {
.button-more {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 160px;
max-width: 220px
}
}
.buttons-social {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
line-height: 1
}
.buttons-social__item {
position: relative
}
.buttons-social__item--hide {
display: none
}
.button-social {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #3b3d40;
background-color: #fff;
border: none;
border-radius: 50%;
box-shadow: inset 0 0 0 2px #3b3d40;
cursor: pointer;
transition: background-color 0.25s ease
}
.button-social:hover {
background-color: #3b3d40
}
.button-social:hover svg {
color: #fff
}
.button-social__tooltip {
position: absolute;
top: 52px;
left: calc(50% - 80px);
width: 160px;
padding: 4px;
font-size: .875rem;
text-align: center;
background-color: #fff;
border-radius: 8px;
opacity: 0
}
.button-social__tooltip::before {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
content: ""
}
.button-social__tooltip::after {
position: absolute;
bottom: 100%;
left: 50%;
margin-bottom: -1px;
margin-left: -8px;
content: ""
}
.button-social__tooltip--link {
color: #43a047;
border: 1px solid #43a047
}
.button-social__tooltip--link::after {
border-right: 8px solid transparent;
border-bottom: 9px solid #fff;
border-left: 8px solid transparent
}
.button-social__tooltip--link::before {
border-right: 10px solid transparent;
border-bottom: 10px solid #43a047;
border-left: 10px solid transparent
}
.button-social__tooltip--visible {
-webkit-animation-name: tooltip-fade-in-down;
animation-name: tooltip-fade-in-down;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
will-change: transform, opacity
}
@-webkit-keyframes tooltip-fade-in-down {
0% {
transform: translate3d(0, -10%, 0);
opacity: 0
}
25%, 75% {
transform: translate3d(0, 0, 0);
opacity: 1
}
100% {
transform: translate3d(0, -10%, 0);
opacity: 0
}
}
@keyframes tooltip-fade-in-down {
0% {
transform: translate3d(0, -10%, 0);
opacity: 0
}
25%, 75% {
transform: translate3d(0, 0, 0);
opacity: 1
}
100% {
transform: translate3d(0, -10%, 0);
opacity: 0
}
}
.card-app-cover {
position: relative;
width: 100%
}
.card-app-cover__image {
margin-bottom: 12px
}
.card-app-cover__image > img {
display: block;
transition: transform .25s ease
}
.card-app-cover:hover .card-app-cover__image > img {
transform: scale(1.1)
}
.card-app-cover__image--blur {
background: linear-gradient(95deg, #00a3e0 14%, #26d07c 85%) !important
}
.card-app-cover__image--blur > img {
filter: opacity(0.5) blur(8px)
}
.card-app-cover:hover h2, .card-app-cover:hover h3 {
text-decoration: underline
}
.card-app {
width: 100%
}
.card-app__link {
display: flex;
flex-direction: column
}
.card-app__link--interactive:hover .card-app__title {
text-decoration: underline
}
.card-app__icon {
position: relative;
margin-bottom: 8px;
padding: 8px;
line-height: 0;
border: 1px solid #e0e0e0;
border-radius: 8px
}
@media (min-width: 80em) {
.card-app__icon {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 8px
}
}
.card-app__icon--index {
overflow: hidden;
border-radius: 0 8px 8px 8px
}
@media (min-width: 80em) {
.card-app__icon--index {
border-radius: 0 8px 8px 8px
}
}
.card-app__icon--index::before {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 0 2px;
color: #fff;
background: linear-gradient(230deg, #00a3e0 14%, #26d07c 85%);
border-radius: 0 0 4px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
content: attr(data-order)
}
@media (min-width: 48em) {
.card-app__icon--index::before {
min-width: 32px;
min-height: 32px;
padding: 4px 12px
}
}
.card-app__img {
aspect-ratio: 1 / 1;
width: 100%;
-o-object-fit: cover;
object-fit: cover
}
@supports not (aspect-ratio: 1) {
.card-app__img::after {
float: left;
padding-top: 100%;
content: ""
}
}
.card-app__sponsored {
color: #141415;
font-weight: 400;
font-size: .75rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
align-items: center;
margin-bottom: 4px;
padding: 2px 0
}
@media (min-width: 48em) {
.card-app__sponsored {
padding: 4px 0 2px
}
}
.card-app__info {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
-moz-column-gap: 4px;
column-gap: 4px
}
@media (min-width: 80em) {
.card-app__info {
margin-bottom: 8px
}
}
.card-app__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 4px;
color: #141415;
font-weight: 600;
font-size: .875rem
}
@media (min-width: 48em) {
.card-app__title {
font-size: 1rem
}
}
.card-app__title--long {
overflow: hidden;
white-space: normal
}
@supports (-webkit-line-clamp: 2) {
.card-app__title--long {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
.card-app__summary {
overflow: hidden;
height: 2.7em;
font-size: .8125rem;
line-height: 1.35
}
@supports (-webkit-line-clamp: 2) {
.card-app__summary {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
@media (min-width: 48em) {
.card-app__summary {
font-size: .875rem
}
}
.card-article {
position: relative;
width: 100%
}
.card-article__image {
margin-bottom: 12px
}
.card-article__image > img {
display: block;
transition: transform .25s ease
}
.card-article:hover .card-article__image > img {
transform: scale(1.1)
}
@media (min-width: 64em) {
.card-article__body {
padding-right: 12px
}
}
.card-article__title {
color: #141415;
font-weight: 600;
font-size: 1rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
line-height: 1.4
}
@media (min-width: 64em) {
.card-article__title {
font-size: 1.125rem
}
.card-article__title--big {
font-size: 1.25rem
}
}
.card-article__title > span {
padding-right: 8px
}
.card-article:hover .card-article__title {
text-decoration: underline
}
.card-article__link {
position: relative;
display: block
}
.card-article__link::before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: ""
}
.card-article__link--label::after {
display: block;
margin-top: 12px;
content: attr(data-translated-text);
color: #141415;
font-weight: 400;
font-size: .75rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase
}
.card-article a:not(.card-article__link) {
position: relative;
z-index: 1
}
.card-square {
overflow: hidden;
color: #3b3d40;
border-radius: 8px
}
@media (min-width: 30em) {
.card-square--full-cover {
color: #fff
}
}
.card-square__link {
display: block
}
.card-square__link::after {
position: absolute;
top: 0;
left: 0;
z-index: 4;
width: 100%;
height: 100%;
content: ""
}
.card-square a:not(.card-square__link) {
position: relative;
z-index: 1
}
.card-square__content {
position: relative;
z-index: 2;
padding: 12px 4px 0 4px;
line-height: 0;
text-align: center;
background-color: #fff
}
@media (min-width: 30em) {
.card-square__content {
padding: 12px 4px;
font-size: .75rem
}
}
.card-square__content--full-cover {
padding: 0
}
@media (min-width: 30em) {
.card-square__content--full-cover {
padding: 0;
background-color: #141415
}
}
.card-square__icon {
display: inline-flex;
align-items: center;
width: 80px;
height: 80px;
margin-bottom: 12px;
text-align: center
}
.card-square__icon--full-cover {
width: 100%;
margin-bottom: 0
}
.card-square__icon--full-cover {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden
}
.card-square__icon--full-cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto
}
.card-square__title {
overflow: hidden;
height: 2.8em;
width: 100%;
margin-bottom: 4px;
font-weight: 600;
font-size: .875rem;
line-height: 1.4em;
text-align: center;
-webkit-hyphens: auto;
hyphens: auto
}
@supports (-webkit-line-clamp: 2) {
.card-square__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
@media (min-width: 30em) {
.card-square__title {
overflow: hidden;
height: 2.8em
}
@supports (-webkit-line-clamp: 2) {
.card-square__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
}
p.card-square__title {
display: none
}
@media (min-width: 30em) {
p.card-square__title {
display: block
}
}
.card-square__summary {
overflow: hidden;
height: 2.8em;
flex-basis: 100%;
margin-bottom: 8px;
font-size: .8125rem;
line-height: 1.4em;
text-align: center;
word-break: break-word
}
@supports (-webkit-line-clamp: 2) {
.card-square__summary {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
.card-square__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-self: flex-end;
justify-content: space-between;
height: 100%;
padding: 0 12px 12px;
background-color: #fff
}
.card-square__footer--full-cover {
padding: 12px
}
@media (min-width: 30em) {
.card-square__footer--full-cover {
background: #004cd9;
background: linear-gradient(135deg, #0087de 0%, #004cd9 50%, #26d07c 100%)
}
}
@media (min-width: 30em) {
.card-square__footer {
position: absolute;
z-index: 1;
padding: 12px
}
.card-square:hover .card-square__footer {
z-index: 3;
cursor: pointer
}
}
@media (min-width: 30em) {
.card-square__rating--full-cover use {
color: #fff
}
}
.card-square__version {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 60%;
font-size: .8125rem;
white-space: nowrap;
text-align: right;
text-transform: uppercase
}
@media (min-width: 30em) {
.card-square__version--full-cover {
color: #fff
}
}
.card-square__version--free, .card-square__version--try {
color: #009e61
}
.chip-set__item {
overflow: hidden
}
.chip-set--swipeable {
margin-right: -16px;
margin-left: -16px
}
@media (min-width: 30em) {
.chip-set--swipeable {
margin-right: 0;
margin-left: 0
}
}
.chip-set__title {
margin: 0 16px 12px
}
@media (min-width: 30em) {
.chip-set__title {
margin: 0 0 24px
}
}
.chip-set__list {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%
}
.chip-set--swipeable .chip-set__list {
flex-wrap: nowrap;
padding: 0 16px;
overflow-x: auto;
overflow-y: hidden;
transform: translateZ(0);
-webkit-overflow-scrolling: touch
}
.chip-set--swipeable .chip-set__list::-webkit-scrollbar {
display: none
}
@media (min-width: 30em) {
.chip-set--swipeable .chip-set__list {
flex-wrap: wrap;
margin: 0 -2px -8px;
padding-right: 0;
padding-left: 0;
overflow: visible;
transform: initial;
-webkit-overflow-scrolling: initial
}
.chip-set--swipeable .chip-set__list::-webkit-scrollbar {
display: initial
}
}
.extensions-list {
list-style-type: none
}
.extensions-list__item {
padding: 16px 0;
border-bottom: 1px solid #e0e0e0
}
.extension-item__lead {
padding-left: 0;
font-size: .875rem;
line-height: 1.5
}
.extension-item__button {
display: none
}
@media (min-width: 64em) {
.extension-item__button {
display: block;
min-width: 160px;
margin-left: auto
}
}
.filters-bar__group {
margin-inline: -16px;
padding: 4px 0;
overflow-x: scroll;
overflow-y: hidden;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
-webkit-overflow-scrolling: touch
}
@media (min-width: 48em) {
.filters-bar__group {
margin-inline: 0;
overflow: auto
}
}
.filters-bar__group::-webkit-scrollbar {
display: none
}
.filters-bar__list {
display: flex;
flex-wrap: nowrap;
-webkit-padding-start: 16px;
padding-inline-start: 16px;
white-space: nowrap
}
@media (min-width: 48em) {
.filters-bar__list {
padding: 0
}
}
.filters-bar__item {
display: inline-flex;
flex: 0 1 auto;
-webkit-padding-end: 12px;
padding-inline-end: 12px
}
.filters-bar__item--last {
margin-left: auto
}
@media (hover: hover) {
.chip-nav {
position: relative;
display: flex
}
}
.chip-nav__nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: auto;
margin: 0 -16px;
padding: 0 16px;
overflow: scroll hidden;
white-space: nowrap;
-moz-column-gap: 12px;
column-gap: 12px;
transform: translateZ(0);
-webkit-overflow-scrolling: touch
}
@media (min-width: 48em) {
.chip-nav__nav {
width: 100%;
margin: 0;
padding: 0
}
}
@media (hover: hover) {
.chip-nav__nav {
width: 100%;
margin: 0;
padding: 0;
overflow-x: visible
}
}
.chip-nav__nav::-webkit-scrollbar {
display: none
}
.chip-nav__control {
display: none
}
@media (hover: hover) {
.chip-nav__control {
position: absolute;
z-index: 1;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
width: 72px;
height: calc(100% + 2px);
background: linear-gradient(90deg, #fff 24px, transparent 100%);
pointer-events: none
}
:lang(ar-SA) .chip-nav__control {
background: linear-gradient(270deg, #fff 24px, transparent 100%)
}
.chip-nav__control--end {
right: 0;
left: auto;
justify-content: flex-end;
background: linear-gradient(270deg, #fff 24px, transparent 100%)
}
:lang(ar-SA) .chip-nav__control--end {
right: auto;
left: 0;
background: linear-gradient(90deg, #fff 24px, transparent 100%)
}
}
.chip-nav__btn {
z-index: 1;
width: 24px;
height: 24px;
padding: 0;
font-size: .75rem;
background: #fff;
border: 0;
border-radius: 100px;
cursor: pointer;
pointer-events: auto
}
.chip-nav__btn .chip-nav__icon {
padding-right: 2px;
font-size: 1.5rem;
border-radius: 100px
}
:lang(ar-SA) .chip-nav__btn .chip-nav__icon {
transform: rotate(180deg)
}
.chip-nav__btn--end .chip-nav__icon {
transform: rotate(180deg)
}
:lang(ar-SA) .chip-nav__btn--end .chip-nav__icon {
transform: rotate(0deg)
}
.chip-nav__btn:hover .chip-nav__icon {
background: #eee
}
.filter-dropdown {
position: static;
display: inline-block;
font-size: .875rem
}
.filter-dropdown__title {
display: none
}
@media (min-width: 48em) {
.filter-dropdown__title {
display: inline-block;
float: left;
padding: 4px 4px 4px 0;
text-transform: capitalize;
vertical-align: middle
}
:lang(ar-SA) .filter-dropdown__title {
float: right;
padding: 4px 0 4px 4px
}
}
.filter-dropdown__label {
display: flex;
align-items: center;
padding: 4px 0;
white-space: nowrap;
cursor: pointer
}
.filter-dropdown__label--selected {
font-weight: 600
}
.filter-dropdown__arrow {
margin-left: 4px;
transition: .2s ease-in-out
}
:lang(ar-SA) .filter-dropdown__arrow {
margin-right: 4px;
margin-left: 0
}
.filter-dropdown__menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 100%;
z-index: 115;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
padding: 12px;
white-space: nowrap;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
visibility: hidden;
opacity: 0;
transition: left .3s ease-in-out
}
@media (min-width: 48em) {
.filter-dropdown__menu {
position: absolute;
top: initial;
right: initial;
bottom: initial;
left: initial;
z-index: 100;
width: 500px;
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: left .3s ease-in-out
}
.filter-dropdown__menu--auto {
width: auto
}
}
.filter-dropdown__header {
display: flex;
justify-content: flex-end;
padding: 12px
}
@media (min-width: 48em) {
.filter-dropdown__header {
display: none
}
}
.filter-dropdown__close {
font-size: 1.375rem;
cursor: pointer
}
.filter-dropdown__list {
display: flex;
flex-wrap: wrap;
overflow-y: auto
}
.filter-dropdown__item {
flex: 1 1 100%;
max-width: 100%;
padding: 0 12px
}
.filter-dropdown__item:last-child a {
margin-bottom: 24px;
border-bottom: 0
}
@media (min-width: 48em) {
.filter-dropdown__item:last-child a {
margin-bottom: 0
}
}
@media (min-width: 48em) {
.filter-dropdown__item {
flex: 1 1 50%;
max-width: 236px;
padding: 0
}
}
.filter-dropdown__link {
display: block;
padding: 16px;
overflow: hidden;
font-size: 1rem;
text-overflow: ellipsis;
border-bottom: 1px solid #e0e0e0
}
@media (min-width: 48em) {
.filter-dropdown__link {
padding: 8px 12px;
font-size: .875rem;
border-bottom: none
}
}
.filter-dropdown__link:hover {
background-color: #f5f5f5
}
.filter-dropdown__link--selected {
font-weight: 600
}
.filter-dropdown__icon {
margin-right: 8px;
font-size: 1.5rem;
line-height: 0;
vertical-align: middle
}
:lang(ar-SA) .filter-dropdown__icon {
margin-right: 0;
margin-left: 8px
}
.filter-dropdown__check {
display: none
}
.filter-dropdown__check:checked ~ .filter-dropdown__label .filter-dropdown__arrow {
transform: rotate(180deg)
}
.filter-dropdown__check:checked ~ .filter-dropdown__menu {
left: 0;
visibility: visible;
opacity: 1
}
@media (min-width: 48em) {
.filter-dropdown__check:checked ~ .filter-dropdown__menu {
left: initial
}
}
.filter-dropdown__stop-scrolling {
overflow-y: hidden
}
@media (min-width: 48em) {
.filter-dropdown__stop-scrolling {
overflow-y: initial
}
}
.free-games__list {
margin-bottom: -24px
}
.free-games__list > li {
display: block;
margin-bottom: 24px
}
.card-game__cover {
position: relative;
height: 0;
padding-bottom: 136.5%;
overflow: hidden
}
.card-game__cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto
}
.card-game__cover img {
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.card-game__footer {
position: relative;
padding: 12px 8px 16px;
text-align: center
}
.card-game__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 12px;
font-weight: 600;
font-size: 1rem
}
.card-game__cta {
max-width: 75%;
margin: auto;
text-align: center
}
.grid-cards-app-fixed {
list-style-type: none
}
.grid-cards-app-fixed__item {
margin-bottom: 24px
}
.grid-cards-app-fixed__item--ads {
min-height: 255px
}
@media (min-width: 48em) {
.grid-cards-app-fixed__item--ads {
min-height: 225px
}
}
@media (min-width: 64em) {
.grid-cards-app-fixed__item--ads {
min-height: 245px
}
}
@media (min-width: 80em) {
.grid-cards-app-fixed__item--ads {
min-height: 230px
}
}
.grid-cards-app-fixed__item--slot.sam-slot--displayed + .grid-cards-app-fixed__item {
display: none !important
}
.grid-cards-app-fixed__placeholder {
display: block;
overflow: initial !important;
border: 1px solid #e0e0e0;
border-radius: 8px
}
.grid-cards-app-fixed__placeholder {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden
}
.grid-cards-app-fixed__placeholder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto
}
.grid-cards-app-fixed__placeholder::before, .grid-cards-app-fixed__placeholder::after {
position: absolute;
bottom: -24px;
width: 100%;
height: 14px;
background: #f5f5f5;
content: " "
}
.grid-cards-app-fixed__placeholder::after {
bottom: -96px;
height: 64px
}
.grid-info-apps > .row {
row-gap: 24px
}
.grid-info-apps__item--slot.sam-slot--displayed + .grid-info-apps__item {
display: none !important
}
@media (max-width: 48em) {
.grid-swipe {
--grid-swipe-gutter: 16px
}
}
.grid-swipe__list {
row-gap: 24px
}
@media (max-width: 48em) {
.grid-swipe__list--scroll {
display: flex;
flex-wrap: nowrap;
margin-right: calc(var(--grid-swipe-gutter) * -1);
margin-left: calc(var(--grid-swipe-gutter) * -1);
overflow: scroll hidden;
row-gap: initial
}
.grid-swipe__list--scroll::-webkit-scrollbar {
display: none
}
}
@media (max-width: 48em) {
.grid-swipe__item--scroll {
display: inline-flex;
padding-right: var(--grid-swipe-gutter);
padding-left: 0
}
.grid-swipe__item--scroll:first-child {
margin-left: var(--grid-swipe-gutter)
}
}
@media (max-width: 48em) and (min-width: 20em) {
.grid-swipe__item--scroll.col-xs-12 {
max-width: calc((90% / 12 * 12))
}
.grid-swipe__item--scroll.col-xs-6 {
max-width: calc((90% / 12 * 6))
}
.grid-swipe__item--scroll.col-xs-4 {
max-width: calc((90% / 12 * 4))
}
.grid-swipe__item--scroll.col-xs-3 {
max-width: calc((90% / 12 * 3))
}
.grid-swipe__item--scroll.col-xs-2 {
max-width: calc((90% / 12 * 2))
}
}
@media (max-width: 48em) and (min-width: 48em) {
.grid-swipe__item--scroll.col-md-12 {
max-width: calc((90% / 12 * 12))
}
.grid-swipe__item--scroll.col-md-6 {
max-width: calc((90% / 12 * 6))
}
.grid-swipe__item--scroll.col-md-4 {
max-width: calc((90% / 12 * 4))
}
.grid-swipe__item--scroll.col-md-3 {
max-width: calc((90% / 12 * 3))
}
.grid-swipe__item--scroll.col-md-2 {
max-width: calc((90% / 12 * 2))
}
}
@media (min-width: 64em) {
.help-and-info__list {
margin-bottom: -24px
}
}
@media (min-width: 64em) {
.help-and-info__item {
margin-bottom: 24px
}
}
.help-and-info-item {
padding: 16px;
border: 1px solid #e0e0e0
}
@media (min-width: 64em) {
.help-and-info-item {
padding: 0;
border: 0
}
}
.help-and-info-item__title {
margin-bottom: 8px;
font-weight: 600;
font-size: 1rem;
line-height: 1.6
}
.help-and-info-item__content {
font-size: .875rem;
line-height: 1.6
}
.help-and-info-item__content a {
color: #006adc
}
.help-and-info-item__content h4 {
margin-top: 12px;
font-weight: 600
}
.horizontal-rule {
width: 100%;
height: 0;
border: 0;
border-top: 1px solid #e0e0e0
}
.horizontal-rule--dark {
border-color: #bdbdbd
}
.image-cover {
overflow: hidden;
background: var(--cover-bg-placeholder);
border: 1px solid #e0e0e0;
border-radius: 8px
}
.image-cover > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transform: translate3d(0, 0, 1px)
}
.image-cover--1x1 {
aspect-ratio: 1 / 1
}
@supports not (aspect-ratio: 1) {
.image-cover--1x1::after {
float: left;
padding-top: 100%;
content: ""
}
}
.image-cover--16x9 {
aspect-ratio: 16 / 9
}
@supports not (aspect-ratio: 1.7777777778) {
.image-cover--16x9::after {
float: left;
padding-top: 56.25%;
content: ""
}
}
.license-type {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #009e61;
font-size: .8125rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif
}
@media (min-width: 48em) {
.license-type {
font-size: .875rem
}
}
.license-type--fix-small {
font-size: .8125rem
}
.license-type--fix-medium {
font-size: .875rem
}
.license-type--large {
font-size: .875rem
}
@media (min-width: 48em) {
.license-type--large {
font-size: 1rem
}
}
.license-type--not-free {
color: #71747a
}
.list-alternatives {
list-style-type: none;
border-top: 1px solid #e0e0e0
}
.list-alternatives__item {
padding: 12px 0 4px 0;
border-bottom: 1px solid #e0e0e0
}
@media (min-width: 64em) {
.list-alternatives__item {
padding: 16px 0
}
}
.list-alternatives__button {
display: none
}
@media (min-width: 64em) {
.list-alternatives__button {
display: block;
min-width: 160px;
margin-left: auto
}
}
.list-articles {
row-gap: 36px
}
.list-articles__item:empty {
display: none
}
.list-buttons-bonus-info {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between
}
.list-buttons-bonus-info > li {
flex: 1 1 100%
}
.list-category-apps {
width: 100%;
overflow: hidden;
border: 1px solid #e0e0e0;
border-radius: 8px
}
.list-category-apps__title {
display: block;
padding: 12px;
background: #eee
}
.list-category-apps__title:hover {
background: #f5f5f5
}
.list-category-apps__name {
font-weight: 600;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
overflow: hidden
}
@supports (-webkit-line-clamp: 1) {
.list-category-apps__name {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical
}
}
.list-category-apps__icon {
width: 32px;
height: 32px
}
.list-category-apps__icon .s-icon {
font-size: 1.75rem
}
.list-category-apps__app-item {
border-top: 1px solid #e0e0e0
}
.list-category-apps__footer {
text-align: right;
border-top: 1px solid #e0e0e0
}
:lang(ar-SA) .list-category-apps__footer {
text-align: left
}
.list-category-apps__link {
display: inline-block;
padding: 12px;
color: #006adc;
font-size: .875rem
}
.list-category-apps__link:hover {
text-decoration: underline
}
.list-old-versions-app__list {
margin-bottom: 16px;
list-style-type: none
}
.list-old-versions-app__item {
display: block;
padding: 16px 0;
border-top: 1px solid #e0e0e0
}
.list-old-versions-app__item--tab:first-child {
border-top: 0
}
.list-old-versions-app__footer {
width: auto;
margin: auto;
text-align: center
}
.old-version-app {
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: 12px;
column-gap: 12px
}
.old-version-app__version {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 4px;
font-weight: 600
}
.old-version-app__info {
display: flex;
align-items: center;
color: #71747a
}
.old-version-app__info--separator li::after {
display: inline-block;
margin: 0 8px;
color: #e0e0e0;
content: "|"
}
.old-version-app__info--separator li:last-of-type::after {
display: none
}
.old-version-app__item {
display: inline-flex;
align-items: center
}
.old-version-app__size {
color: #71747a;
font-size: .875rem
}
.old-version-app__data {
min-width: 0
}
.list-top-apps__list {
margin-bottom: 16px;
list-style-type: none
}
.list-top-apps__item {
padding: 12px 0;
border-bottom: 1px solid #e0e0e0
}
.list-top-apps__item:first-child {
border-top: 1px solid #e0e0e0
}
.list-top-apps__footer {
width: auto;
margin: auto;
text-align: center
}
@media (min-width: 30em) {
.list-top-apps__footer {
width: 160px
}
}
.list-top-articles__list {
margin-bottom: 16px;
list-style-type: none
}
.list-top-articles__item {
padding: 12px 0;
border-bottom: 1px solid #e0e0e0
}
.list-top-articles__item:first-child {
border-top: 1px solid #e0e0e0
}
.top-article {
list-style-type: none
}
.top-article__image {
width: 90px;
height: 90px;
overflow: hidden;
background: #eee;
border: 1px solid #e0e0e0;
border-radius: 8px
}
.top-article__image img {
width: auto;
max-width: none;
height: 90px;
margin-left: 50%;
transform: translate(-50%, 0)
}
.top-article__title {
overflow: hidden;
height: 2.6em;
height: auto;
margin-bottom: 4px;
line-height: 1.3
}
@supports (-webkit-line-clamp: 2) {
.top-article__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
.top-article__title:hover {
text-decoration: underline
}
.top-article__title::before {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
margin-bottom: 2px;
color: #71747a;
font-size: .8125rem;
content: attr(data-translated-text)
}
.top-article__cta {
color: #3b3d40;
font-size: .8125rem
}
.top-article__cta:hover {
text-decoration: underline
}
.list-users-comments__item > * {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #e0e0e0
}
@media (min-width: 64em) {
.list-users-comments__item > * {
padding-left: 16px;
border-bottom: 0
}
}
@media (min-width: 64em) {
.list-users-comments__item:nth-child(2n+1) > * {
padding-right: 16px;
padding-left: 0
}
}
.user-comment__media {
display: flex;
width: 100%;
margin-bottom: 12px
}
.user-comment__main {
width: 48px;
margin-right: 8px;
vertical-align: top
}
:lang(ar-SA) .user-comment__main {
margin-right: 0;
margin-left: 8px
}
.user-comment__aside {
flex: 1 1 0;
align-self: center;
width: 100%
}
.user-comment__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #eee;
border-radius: 50%
}
.user-comment__icon {
color: rgba(0, 0, 0, 0.3);
font-size: 2rem
}
.user-comment__name, .user-comment__date {
color: #71747a;
font-size: .875rem
}
.user-comment__body {
font-size: .875rem;
line-height: 1.6;
word-wrap: break-word;
word-break: break-word
}
.user-comment__link {
color: #006adc
}
.user-comment__link::before {
color: #3b3d40;
content: "..."
}
@media (min-width: 64em) {
.main-aside {
display: flex;
flex-wrap: nowrap;
-moz-column-gap: 24px;
column-gap: 24px
}
}
@media (min-width: 64em) {
.main-aside__main {
flex: 1;
min-width: 0
}
}
@media (min-width: 64em) {
.main-aside__aside {
flex: 0 0 300px;
max-width: 300px
}
}
.header-brand {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
line-height: 0;
background: #006adc
}
.header-brand__logo {
width: 86px;
height: 24px
}
.header-brand__close-button {
color: #fff;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer
}
.header-brand__close-button .header-brand__close, .header-brand__close-button svg {
width: 24px;
height: 24px;
pointer-events: none
}
@media (min-width: 48em) {
.header-brand {
padding: 8px 12px
}
.header-brand__logo {
width: 108px;
height: 30px
}
.header-brand__close-button .header-brand__close, .header-brand__close-button svg {
width: 32px;
height: 32px
}
}
.modal-security-status {
font-size: 1rem;
line-height: 1.8
}
.modal-security-status__content {
max-height: 60vh;
padding: 16px;
overflow-y: auto
}
@media screen and (min-width: 48em) {
.modal-security-status__content {
padding: 36px
}
}
.modal-security-status .modal-security-status__intro {
margin-bottom: 36px
}
.modal-security-status__title {
display: flex;
align-items: center;
font-weight: 600;
font-size: 1.125rem
}
.modal-security-status__icon {
margin-right: 4px;
font-size: 1.375rem
}
:lang(ar-SA) .modal-security-status__icon {
margin-right: 0;
margin-left: 4px
}
.modal-security-status__icon--clean {
color: #00805e
}
.modal-security-status__icon--warning {
color: #ffb901
}
.modal-security-status__icon--blocked {
color: #b71c1c
}
.modal-security-status__description {
margin-bottom: 48px
}
.modal-security-status p {
margin-bottom: 4px
}
.modal-security-status p:first-child {
margin-bottom: 24px
}
.modal-security-status h4 {
margin-bottom: 4px;
font-weight: 600
}
.modal-user-rating {
text-align: center
}
.modal-user-rating__content {
padding: 36px 24px
}
@media (min-width: 48em) {
.modal-user-rating__content {
padding: 48px 24px
}
}
.modal-user-rating__title {
margin-bottom: 24px;
font-weight: 600;
font-size: 1.375rem;
text-align: center
}
.modal-user-rating__title--small {
margin-bottom: 16px;
font-size: 1.125rem
}
.modal-user-rating__thanks {
margin-bottom: 24px;
font-weight: 600;
font-size: 1.375rem
}
.modal-user-rating__question {
margin-bottom: 24px;
font-size: 1.125rem
}
.modal-user-rating__selector {
margin-bottom: 36px
}
.selector-rating {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
width: 100%
}
.selector-rating__icon {
width: 36px;
height: 31px;
margin-right: 2px;
transition: all .3s;
pointer-events: none;
fill: #fff;
stroke: #ffb901
}
.selector-rating__icon--fill {
fill: #ffb901;
stroke: none
}
.selector-rating label {
cursor: pointer
}
.selector-rating label:active {
transform: translate3d(1px, 1px, 0)
}
.selector-rating input {
display: none
}
.selector-rating > input:checked ~ label .selector-rating__icon, .selector-rating:not(:checked) > label:hover .selector-rating__icon, .selector-rating:not(:checked) > label:hover ~ label .selector-rating__icon {
fill: #ffb901
}
.selector-rating > input:checked + label:hover .selector-rating__icon, .selector-rating > input:checked ~ label:hover .selector-rating__icon, .selector-rating > input:checked ~ label:hover ~ label .selector-rating__icon, .selector-rating > label:hover ~ input:checked ~ label .selector-rating__icon {
fill: #fa8900;
stroke: #fa8900
}
.other-languages__list {
margin: 0 -4px -12px
}
@media (min-width: 30em) {
.other-languages__list {
margin: 0 -12px -24px
}
}
.other-languages__other-language {
display: inline-block;
width: 100%;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 4px 12px
}
@media (min-width: 30em) {
.other-languages__other-language {
width: initial;
max-width: initial;
margin: 0 12px 4px
}
}
.other-languages__link {
color: #004cd9;
font-weight: 400
}
.other-languages__link:hover {
text-decoration: underline;
cursor: pointer
}
.other-platforms__anchor {
position: relative;
top: -64px;
visibility: hidden
}
@media (min-width: 60em) {
.other-platforms__anchor {
top: -104px
}
}
.other-platforms__list {
margin: 0 0 -12px
}
@media (min-width: 30em) {
.other-platforms__list {
margin: 0 -4px -12px
}
}
.other-platforms__other-platform {
display: inline-block;
width: 100%;
max-width: 312px;
margin: 0 0 12px
}
@media (min-width: 30em) {
.other-platforms__other-platform {
width: initial;
max-width: initial;
margin: 0 4px 12px
}
}
.other-platform-chip {
display: flex;
align-items: center;
overflow: hidden;
font-size: .875rem;
white-space: nowrap;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: background-color 0.1s ease
}
.other-platform-chip:hover {
color: #3b3d40;
background-color: #f5f5f5
}
.other-platform-chip__icon-wrapper {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 4px 8px;
color: #fff;
font-size: 1.25rem;
background: #141415
}
.other-platform-chip__text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 12px;
color: #3b3d40
}
.page-footer {
position: relative;
color: #fff;
background: linear-gradient(90deg, #000 0%, #126087 43%, #1987be 100%);
background-color: #198ac2;
content-visibility: auto;
contain-intrinsic-size: auto 1000px
}
.page-footer::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 80%;
height: 100%;
background-color: #26cf7a;
background-image: linear-gradient(0deg, #0d4529 0%, #26cf7a 100%);
transform: skew(350deg);
transform-origin: top left;
content: ""
}
@media (min-width: 30em) {
.page-footer::before {
width: 48%;
transform: skew(320deg)
}
}
.page-footer__content {
position: relative;
z-index: 10;
max-width: 1280px;
margin: 0 auto;
padding: 48px 24px
}
.page-footer__row {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.page-footer__col {
flex-basis: 0;
min-width: 100%;
margin-bottom: 24px
}
@media (min-width: 30em) {
.page-footer__col {
width: 100%;
min-width: 200px;
padding-right: 24px
}
}
.page-footer__col--large {
min-width: 100%;
margin-bottom: 32px
}
@media (min-width: 48em) {
.page-footer__col--large {
flex: 1;
min-width: 200px;
margin-bottom: 0
}
}
.page-footer__col--small {
min-width: 100%;
margin-bottom: 0;
padding-right: 0
}
@media (min-width: 48em) {
.page-footer__col--small {
align-self: center;
min-width: 200px
}
}
.page-footer__title {
margin-bottom: 12px;
font-weight: 600;
font-size: 1.25rem
}
.page-footer__list li {
margin-bottom: 8px
}
.page-footer__list--social {
display: inline-flex
}
@media (min-width: 30em) {
.page-footer__list--social {
margin-bottom: 12px
}
}
.page-footer__list--social li {
margin: 0 8px 0 0
}
.page-footer__list--horizontal {
margin-bottom: 32px
}
@media (min-width: 48em) {
.page-footer__list--horizontal {
margin-bottom: 0
}
}
.page-footer__list--horizontal li {
display: inline-block;
margin-right: 12px
}
.page-footer__link {
font-size: .875rem;
cursor: pointer
}
.page-footer__link:hover {
text-decoration: underline
}
.page-footer__link--current {
font-weight: 600;
cursor: default
}
.page-footer__link--current:hover {
text-decoration: none
}
.page-footer__icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: transparent;
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff;
transition: background-color 0.25s ease
}
.page-footer__icon:hover {
background-color: #fff
}
.page-footer__icon:hover svg {
color: #006adc
}
.page-footer__icon span {
display: none
}
.page-footer__copy {
font-size: .875rem
}
.page-footer__copy > span {
display: block
}
@media (min-width: 48em) {
.page-footer__copy > span {
display: inline
}
}
.page-header {
position: sticky;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 48px;
margin: auto;
background-color: #fff
}
@media (min-width: 64em) {
.page-header {
height: 80px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2)
}
}
.has-wallpaper .page-header {
max-width: 1030px;
margin: auto
}
.raiSkinDesktop .page-header {
max-width: 1200px;
margin: auto
}
.page-header--shadow {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2)
}
@media (min-width: 64em) {
.page-header--lite {
height: 64px
}
}
.page-header--lite .page-header__button--menu {
margin: 0
}
:lang(ar-SA) .page-header--lite .page-header__button--menu {
margin: 0
}
@media (min-width: 64em) {
.page-header--lite .page-header__button--menu {
width: 64px;
height: 64px
}
}
.page-header--lite .page-header__logo {
margin: 0 auto 0 calc(50% - 90px)
}
:lang(ar-SA) .page-header--lite .page-header__logo {
margin: 0 calc(50% - 90px) 0 auto
}
@media (min-width: 48em) {
.page-header--lite .page-header__logo {
margin: 0 8px
}
:lang(ar-SA) .page-header--lite .page-header__logo {
margin: 0 8px
}
}
@media (min-width: 64em) {
.page-header--lite .page-header__logo {
height: 64px
}
}
.page-header--lite .page-header__corporate {
width: 84px;
height: 24px
}
@media (min-width: 48em) {
.page-header--lite .page-header__corporate {
width: 113px;
height: 32px
}
}
@media (min-width: 64em) {
.page-header--lite .page-header__corporate {
width: 141px;
height: 40px
}
}
@media (min-width: 48em) {
.page-header--lite .page-header__featured {
display: flex;
margin-left: auto
}
:lang(ar-SA) .page-header--lite .page-header__featured {
margin-right: auto;
margin-left: 0
}
}
.page-header__layout {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: auto
}
.page-header__logo {
display: flex;
align-items: center;
width: auto;
height: 48px;
margin: 0 8px 0 0
}
:lang(ar-SA) .page-header__logo {
margin: 0 0 0 8px
}
.page-header__logo:focus-visible {
outline-offset: -1px
}
@media (min-width: 48em) {
.page-header__logo {
margin: 0 auto 0 8px
}
:lang(ar-SA) .page-header__logo {
margin: 0 8px 0 auto
}
}
@media (min-width: 64em) {
.page-header__logo {
width: auto;
height: 80px;
margin: 0 8px
}
}
.page-header__corporate {
position: relative;
width: 84px;
height: 24px
}
@media (min-width: 48em) {
.page-header__corporate {
width: 113px;
height: 32px
}
}
@media (min-width: 64em) {
.page-header__corporate {
width: 141px;
height: 40px
}
}
.page-header__corporate svg {
width: 84px;
height: 24px
}
:lang(ar-SA) .page-header__corporate svg {
position: absolute;
left: 0
}
@media (min-width: 48em) {
.page-header__corporate svg {
width: inherit;
height: inherit
}
}
.page-header__icon {
font-size: 1.25rem;
pointer-events: none
}
@media (min-width: 48em) {
.page-header__icon {
font-size: 2rem
}
}
.page-header__button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #3b3d40;
background-color: #fff;
border: 0
}
.page-header__button:focus-visible {
outline-offset: -1px
}
@media (min-width: 48em) {
.page-header__button {
transition: background-color 0.25s ease
}
.page-header__button:hover {
background-color: #f5f5f5;
cursor: pointer
}
}
@media (min-width: 64em) {
.page-header__button {
width: 80px;
height: 80px
}
}
.page-header__button--menu {
margin: 0 auto 0 0
}
:lang(ar-SA) .page-header__button--menu {
margin: 0 0 0 auto
}
@media (min-width: 48em) {
.page-header__button--menu {
margin: 0
}
:lang(ar-SA) .page-header__button--menu {
margin: 0
}
}
.page-header__button .s-icon:nth-child(1) {
width: auto;
opacity: 1;
transition: opacity .3s
}
.page-header__button .s-icon:nth-child(2) {
width: 0;
transform: rotate(-360deg);
transform-origin: 50% 50%;
opacity: 0;
transition: .3s
}
.page-header__button.is-header-selected .s-icon:nth-child(1) {
width: 0;
opacity: 0
}
.page-header__button.is-header-selected .s-icon-menu:nth-child(1) {
transform: rotate(-360deg)
}
.page-header__button.is-header-selected .s-icon:nth-child(2) {
width: auto;
transform: rotate(0deg);
opacity: 1
}
.page-header__button--overlay.is-header-selected {
margin-right: initial;
margin-left: auto;
color: #fff;
background-color: transparent
}
@media (min-width: 64em) {
.page-header__button--overlay.is-header-selected {
position: absolute;
left: 400px;
border: 0
}
:lang(ar-SA) .page-header__button--overlay.is-header-selected {
right: 400px;
left: auto
}
}
.page-header__button--search {
margin-left: auto
}
:lang(ar-SA) .page-header__button--search {
margin-right: auto;
margin-left: 0
}
@media (min-width: 48em) {
.page-header__button--search {
display: none
}
}
.page-header__search {
display: none;
width: 100%;
padding: 8px;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2)
}
@media (min-width: 48em) {
.page-header__search {
display: flex !important;
flex: 1;
align-items: center;
width: initial;
max-width: 60%;
height: initial;
margin: 0 4px;
padding: 0;
box-shadow: none
}
}
@media (min-width: 64em) {
.page-header__search {
max-width: 100%;
margin: 0 24px 0 112px
}
:lang(ar-SA) .page-header__search {
margin: 0 112px 0 24px
}
}
@media (min-width: 90em) {
.page-header__search {
margin: 0 48px 0 112px
}
:lang(ar-SA) .page-header__search {
margin: 0 112px 0 48px
}
}
.page-header__search.is-header-selected {
display: block
}
.page-header__dropdown-menu {
position: fixed;
top: 0;
z-index: 125;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
box-sizing: border-box;
width: 100%;
height: 100%;
max-height: 100%;
background-color: #fff;
box-shadow: 4px 0 4px rgba(0, 0, 0, 0.5);
transform: translateX(-100%);
opacity: 0;
transition-duration: .3s;
transition-property: transform
}
.has-wallpaper .page-header__dropdown-menu {
transition-duration: initial;
transition-property: initial
}
.raiSkinDesktop .page-header__dropdown-menu {
transition-duration: initial;
transition-property: initial
}
:lang(ar-SA) .page-header__dropdown-menu {
transform: translateX(100%)
}
.page-header__dropdown-menu.is-header-selected {
display: inherit !important;
transform: translateX(0);
opacity: 1
}
.has-wallpaper .page-header__dropdown-menu.is-header-selected {
position: absolute;
top: inherit;
right: inherit;
left: inherit;
height: 100vh
}
.raiSkinDesktop .page-header__dropdown-menu.is-header-selected {
position: absolute;
top: inherit;
right: inherit;
left: inherit;
height: 100vh
}
@media (min-width: 48em) {
.page-header__dropdown-menu {
left: 0;
width: 360px
}
:lang(ar-SA) .page-header__dropdown-menu {
right: 0;
left: auto
}
}
@media (min-width: 64em) {
.page-header__dropdown-menu {
left: 0;
width: 400px
}
:lang(ar-SA) .page-header__dropdown-menu {
right: 0;
left: auto
}
}
.page-header__featured {
display: none
}
@media (min-width: 64em) {
.page-header__featured {
display: flex;
margin-left: auto
}
}
.page-header__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 120;
width: 0;
height: 100%;
background-color: transparent;
visibility: hidden;
cursor: pointer;
opacity: 0;
pointer-events: none
}
.page-header__overlay--search {
position: relative
}
.page-header__overlay--search.is-header-selected {
height: 100vh
}
.page-header__overlay.is-header-selected {
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
visibility: visible;
opacity: 1;
pointer-events: auto
}
.has-wallpaper .page-header__overlay.is-header-selected {
position: absolute;
top: inherit;
right: inherit;
left: inherit;
height: 100vh
}
.raiSkinDesktop .page-header__overlay.is-header-selected {
position: absolute;
top: inherit;
right: inherit;
left: inherit;
height: 100vh
}
.menu-categories__list {
overflow-x: visible;
overflow-y: auto
}
.menu-categories__list--subcategories {
position: absolute;
top: 48px;
width: 100%;
height: 100vh;
padding-bottom: 160px;
background-color: #fff;
border-right: 1px solid #bdbdbd;
opacity: 1;
transition: .3s;
transition-property: transform, opacity
}
@media (min-width: 64em) {
.menu-categories__list--subcategories {
top: 0
}
}
.has-wallpaper .menu-categories__list--subcategories {
padding-bottom: 298px
}
.raiSkinDesktop .menu-categories__list--subcategories {
padding-bottom: 298px
}
.menu-categories__list.is-hidden-submenu {
transform: translateX(-100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
:lang(ar-SA) .menu-categories__list.is-hidden-submenu {
left: auto;
transform: translateX(100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
.has-wallpaper .menu-categories__list.is-hidden-submenu {
display: none
}
.raiSkinDesktop .menu-categories__list.is-hidden-submenu {
display: none
}
.menu-categories__icon {
font-size: 1.25rem
}
.menu-categories__icon--small {
font-size: .75rem
}
.menu-categories__link {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-height: 48px;
padding: 12px;
color: #3b3d40;
font-size: .875rem;
font-family: inherit;
text-align: left;
text-transform: capitalize;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
transition: background-color 0.25s ease
}
.menu-categories__link:hover {
background-color: #f5f5f5
}
.menu-categories__link--indented {
padding-left: 40px
}
.menu-categories__link span {
flex: 1
}
:lang(ar-SA) .menu-categories__link span {
text-align: right
}
@media (min-width: 48em) {
.menu-featured__list {
display: flex;
align-items: center;
height: 100%;
background-color: #fff
}
}
@media (min-width: 48em) {
.menu-featured__item {
height: 100%
}
}
@media (min-width: 48em) {
.menu-featured__link {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100%;
padding: 0 12px;
color: #3b3d40;
font-size: 1rem;
-moz-column-gap: 4px;
column-gap: 4px;
background-color: #fff;
transition: background-color 0.25s ease
}
.menu-featured__link:hover {
background-color: #f5f5f5
}
.menu-featured__link:focus-visible {
outline-offset: -1px
}
}
@media (min-width: 48em) {
.menu-featured__icon svg {
font-size: 1.5rem;
fill: #3b3d40
}
}
.menu-locales {
position: absolute;
top: 48px;
width: 100%;
height: 100vh;
padding-bottom: 160px;
overflow-x: visible;
overflow-y: auto;
background-color: #fff;
border-right: 1px solid #bdbdbd;
opacity: 1;
transition: .3s;
transition-property: transform, opacity
}
@media (min-width: 64em) {
.menu-locales {
top: 0
}
}
.has-wallpaper .menu-locales {
padding-bottom: 298px
}
.raiSkinDesktop .menu-locales {
padding-bottom: 298px
}
.menu-locales.is-hidden-submenu {
transform: translateX(-100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
:lang(ar-SA) .menu-locales.is-hidden-submenu {
left: auto;
transform: translateX(100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
.has-wallpaper .menu-locales.is-hidden-submenu {
display: none
}
.raiSkinDesktop .menu-locales.is-hidden-submenu {
display: none
}
.menu-locales__item {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-height: 48px;
padding: 12px;
color: #3b3d40;
font-size: .875rem;
text-align: left;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #e0e0e0
}
.menu-locales__icon {
font-size: 18px
}
.menu-locales__icon--small {
font-size: 12px
}
.menu-locales__link {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-height: 48px;
padding: 12px;
color: #3b3d40;
font-size: .875rem;
text-align: left;
text-transform: capitalize;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff;
border: solid #e0e0e0;
border-width: 0 0 1px;
cursor: pointer
}
.menu-locales__link:hover {
background-color: #f5f5f5
}
.menu-locales__link--title {
font-weight: 600
}
.menu-locales__link--selected {
color: #141415;
font-weight: 600
}
.menu-locales__link--indented {
padding-left: 36px
}
.menu-main {
height: 100vh;
background-color: #141415
}
@media (min-width: 64em) {
.menu-main {
background-color: #fff
}
}
.menu-main__list {
height: 100%;
padding-bottom: 160px;
overflow: visible;
overflow-y: auto;
border-top: 1px solid #e0e0e0
}
@media (min-width: 64em) {
.menu-main__list {
padding-bottom: 0;
border-top: 0
}
}
.has-wallpaper .menu-main__list {
padding-bottom: 298px
}
.raiSkinDesktop .menu-main__list {
padding-bottom: 298px
}
.menu-main__icon {
font-size: 1.25rem
}
.menu-main__icon--small {
font-size: .75rem
}
.menu-main__link {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-height: 48px;
padding: 12px;
color: #fff;
font-size: .875rem;
text-align: left;
background-color: #0087de;
border: solid #fff;
border-width: 0 0 1px;
cursor: pointer;
transition: background-color 0.25s ease
}
.menu-main__link:hover {
background-color: #006adc
}
.menu-main__link span {
flex: 1
}
:lang(ar-SA) .menu-main__link span {
text-align: right
}
.menu-main__link--featured {
font-weight: 600;
text-transform: uppercase
}
.menu-main__link--subcategories {
color: #3b3d40;
text-transform: capitalize;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff
}
.menu-main__link--subcategories:hover {
background-color: #f5f5f5
}
.menu-platforms {
position: absolute;
top: 48px;
width: 100%;
height: 100vh;
padding-bottom: 160px;
overflow-x: visible;
overflow-y: auto;
background-color: #fff;
border-right: 1px solid #bdbdbd;
opacity: 1;
transition: .3s;
transition-property: transform, opacity
}
@media (min-width: 64em) {
.menu-platforms {
top: 0
}
}
.has-wallpaper .menu-platforms {
padding-bottom: 298px
}
.raiSkinDesktop .menu-platforms {
padding-bottom: 298px
}
.menu-platforms.is-hidden-submenu {
transform: translateX(-100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
:lang(ar-SA) .menu-platforms.is-hidden-submenu {
left: auto;
transform: translateX(100%);
opacity: 0;
transition: .3s;
transition-property: transform, opacity
}
.has-wallpaper .menu-platforms.is-hidden-submenu {
display: none
}
.raiSkinDesktop .menu-platforms.is-hidden-submenu {
display: none
}
.menu-platforms__icon {
font-size: 1.25rem
}
.menu-platforms__icon--small {
font-size: .75rem
}
.menu-platforms__link {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-height: 48px;
padding: 12px;
color: #3b3d40;
font-size: .875rem;
text-align: left;
text-transform: capitalize;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff;
border: solid #e0e0e0;
border-width: 0 0 1px;
cursor: pointer
}
.menu-platforms__link:hover {
background-color: #f5f5f5
}
.menu-platforms__link--selected {
color: #141415;
font-weight: 600
}
.menu-platforms__link--indented {
padding-left: 36px
}
.page {
width: 100%
}
.has-wallpaper .page {
max-width: 1030px;
margin: 0 auto
}
.raiSkinDesktop .page {
max-width: 1030px;
margin: 0 auto
}
.page__row {
display: flex;
width: 100%
}
.page__container {
width: 100%;
margin: 0 auto;
padding: 0 16px;
background-color: #fff
}
@media only screen and (min-width: 20em) {
.page__container {
max-width: 1280px;
padding: 0 16px
}
}
@media only screen and (min-width: 48em) {
.page__container {
max-width: 1280px;
padding: 0 16px
}
}
@media only screen and (min-width: 64em) {
.page__container {
max-width: 1280px;
padding: 0 24px
}
}
@media only screen and (min-width: 80em) {
.page__container {
max-width: 1280px;
padding: 0 24px
}
}
@media only screen and (min-width: 90em) {
.page__container--large {
max-width: 1440px;
padding: 0 24px
}
}
@media only screen and (min-width: 120em) {
.page__container--extra-large {
max-width: 1920px;
padding: 0 24px
}
}
.page__container--slim {
max-width: 1030px
}
.page__container--full {
max-width: 100%;
padding: 0
}
.rating-info {
display: inline-flex;
font-size: .8125rem;
-moz-column-gap: 4px;
column-gap: 4px
}
.rating-info .rating-info__star {
position: relative;
top: 1px
}
@media (min-width: 48em) {
.rating-info {
font-size: .875rem
}
.rating-info .rating-info__star {
top: 0
}
}
@media (min-width: 48em) {
.rating-info--fix-small {
font-size: .8125rem
}
.rating-info--fix-small .rating-info__star {
top: 1px
}
}
.rating-info--fix-medium {
font-size: .875rem
}
.rating-info--fix-medium .rating-info__star {
top: 1px
}
.rating-info--large {
font-size: .875rem
}
.rating-info--large .rating-info__star {
top: 0
}
@media (min-width: 48em) {
.rating-info--large {
font-size: 1rem
}
.rating-info--large .rating-info__star {
top: 1px
}
}
.rating-star {
width: 12px;
height: 12px
}
@media (min-width: 48em) {
.rating-star {
width: 16px;
height: 16px
}
}
.rating-star--large {
width: 16px;
height: 16px
}
@media (min-width: 48em) {
.rating-star--fix-small {
width: 12px;
height: 12px
}
}
.rating-star--fix-medium {
width: 16px;
height: 16px
}
.rating-star__item {
color: #ffb901;
fill: currentcolor
}
.rating-star__item--unrated {
color: #bdbdbd
}
.s-breadcrumb__list {
display: flex;
flex-wrap: nowrap;
margin-bottom: 0;
overflow: auto;
color: #141415;
font-size: .875rem;
white-space: nowrap;
text-transform: capitalize;
list-style-type: none
}
@media (min-width: 30em) {
.s-breadcrumb__list {
flex-wrap: wrap;
margin-bottom: -4px;
overflow: initial;
white-space: normal
}
}
.s-breadcrumb__item {
display: inline-flex;
margin-bottom: 0;
color: #71747a
}
@media (min-width: 30em) {
.s-breadcrumb__item {
margin-bottom: 4px
}
}
.s-breadcrumb__item::after {
margin: 0 4px;
content: ">"
}
.s-breadcrumb__item:last-child::after {
display: none
}
.s-breadcrumb__item a {
color: #71747a
}
.s-breadcrumb__item a:hover {
text-decoration: underline
}
.s-breadcrumb__item:first-child a {
display: inline-flex;
align-items: center;
font-size: 1rem
}
.s-breadcrumb__item--last {
color: #141415;
text-decoration: none
}
.s-button-app {
position: relative;
display: inline-flex;
color: #3b3d40;
border-radius: 8px
}
.s-button-app__main {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
font-weight: 600;
line-height: 1.3
}
@media (min-width: 48em) {
.s-button-app__main {
justify-content: flex-start
}
}
.s-button-app__main span {
display: none
}
@media (min-width: 48em) {
.s-button-app__main span {
display: block;
margin-top: 2px;
font-weight: 400
}
}
.s-button-app__aside {
display: flex;
align-items: center
}
.s-button-app > div:empty {
display: none
}
.s-button-app--full {
width: 100%
}
.s-button-app--center .s-button-app__main {
justify-content: center;
text-align: center
}
.s-button-app--disabled {
cursor: not-allowed;
opacity: .5
}
.s-button-app--disabled[aria-disabled="true"] {
text-decoration: none;
pointer-events: none
}
@media (min-width: 48em) {
.s-button-app--small {
min-height: 40px
}
}
.s-button-app--small .s-button-app__main {
min-height: 40px;
padding: 8px 12px;
font-size: .875rem
}
.s-button-app--small .s-button-app__main span {
font-size: .875rem
}
.s-button-app--small .s-button-app__aside {
padding: 8px 12px
}
@media (min-width: 48em) {
.s-button-app--small .s-button-app__aside {
padding: 12px
}
}
.s-button-app--small .s-button-app__aside .s-icon {
font-size: 1.25rem
}
@media (min-width: 48em) {
.s-button-app--large {
min-height: 72px
}
}
.s-button-app--large .s-button-app__main {
min-height: 40px;
padding: 12px 16px;
font-size: 1.25rem
}
.s-button-app--large .s-button-app__main span {
font-size: .875rem
}
.s-button-app--large .s-button-app__aside {
padding: 12px 16px
}
@media (min-width: 48em) {
.s-button-app--large .s-button-app__aside {
padding: 16px
}
}
.s-button-app--large .s-button-app__aside .s-icon {
font-size: 1.5rem
}
.s-button-app--primary {
color: #fff;
background-color: #009e61
}
.s-button-app--primary:hover {
color: #fff;
background-color: #008551
}
.s-button-app--primary.s-button-app--outlined {
color: #009e61;
background-color: #fff;
box-shadow: inset 0 0 0 2px #009e61
}
.s-button-app--primary.s-button-app--outlined:hover {
color: #fff;
background-color: #008551;
box-shadow: inset 0 0 0 2px #009e61
}
.s-button-app--secondary {
color: #fff;
background-color: #fa8900
}
.s-button-app--secondary:hover {
color: #fff;
background-color: #e17b00
}
.s-button-app--secondary.s-button-app--outlined {
color: #fa8900;
background-color: #fff;
box-shadow: inset 0 0 0 2px #fa8900
}
.s-button-app--secondary.s-button-app--outlined:hover {
color: #fff;
background-color: #e17b00;
box-shadow: inset 0 0 0 2px #fa8900
}
.s-button-app--tertiary {
color: #fff;
background-color: #3b3d40
}
.s-button-app--tertiary:hover {
color: #fff;
background-color: #2f3033
}
.s-button-app--tertiary.s-button-app--outlined {
color: #3b3d40;
background-color: #fff;
box-shadow: inset 0 0 0 2px #3b3d40
}
.s-button-app--tertiary.s-button-app--outlined:hover {
color: #fff;
background-color: #2f3033;
box-shadow: inset 0 0 0 2px #3b3d40
}
.s-button-link {
display: inline-block;
padding: 0;
color: #006adc;
font-size: inherit;
font-family: inherit;
line-height: inherit;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
border: none
}
.s-button-link:hover {
color: #006adc;
text-decoration: underline;
background-color: rgba(0, 0, 0, 0);
border: none;
cursor: pointer
}
.s-button-link--small {
font-size: .75rem
}
.s-button {
display: inline-flex;
align-items: center;
padding: 8px 16px;
color: #3b3d40;
font-size: .875rem;
line-height: 1.35;
background-color: #eee;
border: 0;
border-radius: 8px;
box-shadow: none;
transition: background-color .1s ease, color .1s ease, box-shadow .1s ease
}
@media (hover: hover) {
.s-button:hover {
cursor: pointer
}
}
.s-button--text {
padding: 0;
color: #3b3d40;
-moz-column-gap: 4px;
column-gap: 4px;
background-color: transparent
}
@media (hover: hover) {
.s-button--text:hover {
text-decoration: underline
}
}
.s-button--text svg {
font-size: 1.25rem
}
.s-button--full {
justify-content: center;
width: 100%
}
.s-button--outlined {
min-height: 40px;
background-color: transparent;
box-shadow: inset 0 0 0 2px #3b3d40
}
.s-button:disabled, .s-button[disabled] {
cursor: not-allowed;
opacity: .5;
pointer-events: none
}
.s-button--primary {
min-height: 40px;
color: #fff;
background-color: #3b3d40;
box-shadow: inset 0 0 0 2px #3b3d40
}
@media (hover: hover) {
.s-button--primary:hover {
color: #fff;
background-color: #141415
}
}
.s-button--primary.s-button--outlined {
color: #3b3d40;
background-color: #fff
}
@media (hover: hover) {
.s-button--primary.s-button--outlined:hover {
color: #fff;
background-color: #3b3d40
}
}
.s-button--primary.s-button--text {
min-height: initial;
padding: 0;
color: #004cd9;
background-color: transparent;
box-shadow: none
}
@media (hover: hover) {
.s-button--primary.s-button--text:hover {
text-decoration: underline
}
}
.s-card {
position: relative;
display: flex;
flex-wrap: wrap;
max-width: 100%;
overflow: hidden;
border: 1px solid #e0e0e0;
border-radius: 8px
}
.s-card--interactive {
transition: transform 0.2s cubic-bezier(0.55, 0, 0.1, 1), box-shadow 0.2s cubic-bezier(0.55, 0, 0.1, 1)
}
.s-card--interactive:hover {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
transform: translateY(-2px)
}
.s-card__body {
flex: auto;
align-self: flex-start;
width: 100%
}
.s-card__footer {
flex: auto;
align-self: flex-end;
width: 100%
}
.s-chip {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 40px;
padding: 8px 12px;
color: #3b3d40;
font-weight: 400;
font-size: .875rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
white-space: nowrap;
-moz-column-gap: 8px;
column-gap: 8px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: background-color 0.25s ease
}
.s-chip:hover {
background-color: #f5f5f5;
cursor: pointer
}
.s-chip:active {
background-color: #eee
}
.s-chip:focus-visible {
outline-offset: -1px
}
.s-chip[type="button"] {
background-color: #f5f5f5
}
.s-chip__icon {
color: #000;
font-size: 1rem
}
.s-chip--selected {
color: #141415;
border: 2px solid #000;
pointer-events: none
}
.s-chip--reverse {
flex-direction: row-reverse
}
.s-chip--overflow {
display: block;
overflow: hidden;
text-overflow: ellipsis
}
.s-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px
}
.s-icon--small {
width: 24px;
height: 24px
}
.s-icon--medium {
width: 32px;
height: 32px
}
.s-icon--large {
width: 48px;
height: 48px
}
.s-icon__svg {
display: inline-block;
width: 1em;
max-width: 100%;
height: 1em;
max-height: 100%;
vertical-align: -.125em;
fill: currentcolor
}
.s-icon__use {
fill: currentcolor
}
.s-list-item__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%
}
.s-list-item__row + .s-list-item__row {
margin-top: 12px
}
.s-list-item__info {
padding-right: 2px;
overflow: hidden
}
@media (min-width: 64em) {
.s-list-item__info {
padding-right: 16px
}
}
.s-list-item__info, .s-list-item__description {
display: flex;
flex: 1;
flex-direction: column;
margin-bottom: 12px
}
@media (min-width: 64em) {
.s-list-item__info, .s-list-item__description {
margin-bottom: 0
}
}
@media (min-width: 64em) {
.s-list-item__description {
padding: 0 16px 0 96px
}
}
.s-list-item__action, .s-list-item__topics {
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-content: center
}
@media (min-width: 64em) {
.s-list-item__action, .s-list-item__topics {
flex-basis: 220px
}
}
.s-list-item__description--top, .s-list-item__topics--top {
justify-content: flex-start
}
.s-media {
display: flex;
-moz-column-gap: 16px;
column-gap: 16px
}
.s-media--small {
-moz-column-gap: 8px;
column-gap: 8px
}
.s-media__body {
flex: 1 1 0%;
min-width: 0
}
.s-media__image > * {
display: block;
max-width: none;
line-height: 0
}
.s-media--top {
align-items: flex-start
}
.s-media--middle {
align-items: center
}
.s-media--bottom {
align-items: flex-end
}
.s-message {
display: flex;
padding: 12px;
-moz-column-gap: 12px;
column-gap: 12px;
border-color: #e0e0e0;
border-style: solid;
border-width: 1px 1px 1px 4px;
border-radius: 8px
}
:lang(ar-SA) .s-message {
padding: 16px 12px 16px 24px;
border-width: 1px 4px 1px 1px
}
.s-message--info {
border-color: #0087de
}
.s-message--warning, .s-message--review {
border-color: #ffb901
}
.s-message--error {
border-color: #b71c1c
}
.s-message__icon {
display: flex;
align-items: flex-start;
font-size: 1.5rem
}
.s-message__icon--info {
color: #0087de
}
.s-message__icon--warning, .s-message__icon--review {
color: #ffb901
}
.s-message__icon--error {
color: #b71c1c
}
.s-message__body {
display: flex;
flex-direction: column;
align-items: baseline;
justify-content: center;
row-gap: 8px;
color: #3b3d40;
line-height: 1.5
}
.s-message__title {
color: #141415;
font-weight: 600;
font-size: 1rem;
line-height: 1.6
}
.s-message__content {
font-size: .75rem;
line-height: 1.3;
letter-spacing: .4px
}
.s-message__content a:not([class*="button"]) {
color: #006adc
}
.s-message__content a:not([class*="button"]):hover {
text-decoration: underline
}
@media (min-width: 64em) {
.s-message__content {
font-size: .875rem
}
}
.s-message--review .s-message__content, .s-message--review .s-message__body {
width: 100%
}
.s-modal__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 110;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8)
}
.s-modal__container {
position: fixed;
top: 50%;
left: 50%;
z-index: 115;
width: 90%;
background: #fff;
transform: translate(-50%, -50%)
}
@media (min-width: 36em) {
.s-modal__container--medium {
width: 530px
}
}
@media (min-width: 48em) {
.s-modal__container--large {
width: 630px
}
.s-modal__container--ads {
width: 700px
}
.s-modal__container--extralarge {
width: 730px
}
}
.s-modal__overlay + .s-modal__container {
-webkit-animation-name: s-modal-window-fade-in-animation;
animation-name: s-modal-window-fade-in-animation;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
will-change: transform, opacity
}
.s-modal__overlay.is-hidden + .s-modal__container {
-webkit-animation-name: s-modal-window-fade-out-animation;
animation-name: s-modal-window-fade-out-animation;
will-change: transform, opacity
}
@-webkit-keyframes s-modal-window-fade-in-animation {
0% {
transform: translate(-50%, -50%) scale3d(0, 0, 1);
opacity: 0
}
100% {
transform: translate(-50%, -50%) scale3d(1, 1, 1);
opacity: 1
}
}
@keyframes s-modal-window-fade-in-animation {
0% {
transform: translate(-50%, -50%) scale3d(0, 0, 1);
opacity: 0
}
100% {
transform: translate(-50%, -50%) scale3d(1, 1, 1);
opacity: 1
}
}
@-webkit-keyframes s-modal-window-fade-out-animation {
0% {
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale3d(0.5, 0.5, 1);
opacity: 0
}
}
@keyframes s-modal-window-fade-out-animation {
0% {
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale3d(0.5, 0.5, 1);
opacity: 0
}
}
.s-pagination {
display: flex;
flex-wrap: wrap;
margin-top: -16px
}
.s-pagination__list {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
margin-top: 16px;
margin-bottom: -16px
}
.s-pagination__number {
margin: 0 12px 16px 0
}
.s-pagination__link, .s-pagination__current, .s-pagination__button {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
padding: 12px;
color: #3b3d40;
font-weight: 400;
font-size: .875rem;
line-height: 1;
text-decoration: none;
background: rgba(0, 0, 0, 0)
}
.s-pagination__link, .s-pagination__button {
background: #fff;
border-radius: 8px;
box-shadow: inset 0 0 0 1px #e0e0e0;
transition: background-color .25s ease
}
.s-pagination__link:hover, .s-pagination__link:focus, .s-pagination__link:active, .s-pagination__button:hover, .s-pagination__button:focus, .s-pagination__button:active {
color: #141415;
background-color: #f5f5f5
}
.s-pagination__current {
color: #3b3d40;
background: #fff;
border-radius: 8px;
box-shadow: inset 0 0 0 2px #3b3d40;
cursor: default;
pointer-events: none
}
.s-pagination__navigation {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-items: center;
margin: 16px auto -16px
}
.s-pagination__start, .s-pagination__end {
display: flex;
flex: 1 0 auto;
margin-bottom: 16px;
text-align: center
}
.s-pagination__start {
margin-right: 16px
}
.s-pagination__start > a {
margin-right: 16px;
padding: 12px 16px
}
.s-pagination__start > a:last-child {
margin-right: 0
}
.s-pagination__end > a {
margin-left: 16px;
padding: 12px 16px
}
.s-pagination__end > a:first-child {
margin-left: 0
}
.s-tabs {
display: flex;
flex-wrap: wrap;
width: 100%
}
.s-tabs__label {
width: auto;
margin: 0 0 -1px;
padding: 12px 16px;
color: #3b3d40;
font-weight: 400;
font-size: .875rem;
line-height: 1.429;
text-align: center;
background-color: rgba(0, 0, 0, 0);
border-bottom: 2px solid rgba(0, 0, 0, 0);
cursor: pointer;
transition: background-color 0.25s ease
}
.s-tabs__label:hover {
background-color: #f5f5f5
}
.s-tabs__input {
display: none
}
.s-tabs__input:checked + .s-tabs__label {
z-index: 1;
color: #141415;
border-bottom-color: #141415
}
.s-tabs__content {
display: none;
order: 99;
padding-top: 20px;
border-top: 1px solid #e0e0e0
}
@media (min-width: 48em) {
.s-tabs__content {
padding-top: 24px
}
}
.s-tabs__input:checked + .s-tabs__label + .s-tabs__content {
display: block;
width: 100%
}
.sam-slot {
display: none
}
.sam-slot__title {
display: none
}
.sam-slot__wrapper {
text-align: center
}
.sam-slot__wrapper .cnx-main-container + iframe {
display: none
}
.sam-slot__wrapper .cnx-image-placeholder {
margin: 0
}
.sam-slot--empty.sam-slot--animated {
min-height: 0;
margin: 0 !important;
padding: 0 !important;
background-color: transparent;
transition: min-height 2.5s ease-in-out
}
.sam-slot--displayed {
display: block
}
.sam-slot--displayed.sam-slot--require-label .sam-slot__title {
position: relative;
display: block;
width: 100%;
height: 21px;
margin: 0;
padding: 4px 2px 2px;
color: #71747a;
font-weight: 400;
font-size: .75rem;
line-height: 1.35;
text-align: right;
background-color: #fff
}
@media (min-width: 48em) {
.sam-slot--displayed.sam-slot--require-label .sam-slot__title {
height: 15px;
padding: 0 2px;
background-color: transparent
}
}
.sam-slot--displayed.sam-slot--animated {
min-height: 65px;
background-color: transparent;
transition: min-height 2.5s ease-in-out
}
.sam-slot--sticky {
position: sticky;
top: 48px
}
.sam-slot--sticky::after {
display: table;
clear: both;
content: ""
}
@media (min-width: 48em) {
.sam-slot--sticky {
top: 92px
}
}
.sam-slot--top-notification {
display: block;
height: 49px;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #e0e0e0;
box-shadow: inset 0 -2px 4px 0 rgba(0, 0, 0, 0.1)
}
.has-wallpaper .sam-slot--top-notification {
max-width: 1030px;
margin: auto
}
.raiSkinDesktop .sam-slot--top-notification {
max-width: 1030px;
margin: auto
}
.sam-slot--top-notification.sam-slot--mobile {
height: 65px
}
.sam-slot--in-read {
display: block;
min-height: 175px;
background-color: rgba(0, 0, 0, 0.05)
}
.sam-slot--in-read .sam-slot__content {
display: block;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content
}
.sam-slot--in-read-video {
display: block;
text-align: center
}
.sam-slot--in-read-video .sam-slot__content {
display: block !important;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
min-height: 180px;
background-color: rgba(0, 0, 0, 0.05)
}
@media (min-width: 30em) {
.sam-slot--in-read-video .sam-slot__content {
min-height: 340px
}
}
.sam-slot--in-read-video .sam-slot__content div:first-of-type {
height: 0
}
.sam-slot--in-read-video.sam-slot--large .sam-slot__content {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
min-height: 210px
}
@media (min-width: 30em) {
.sam-slot--in-read-video.sam-slot--large .sam-slot__content {
min-height: 370px
}
}
.sam-slot--in-read-video.sam-slot--large .sam-slot__content div:first-of-type {
height: 0
}
.sam-slot--contextual-list {
width: 100%;
min-height: 82px
}
.sam-slot--contextual-list .sam-slot__content iframe {
min-height: 82px
}
.sam-slot--contextual-grid {
display: block;
flex: 0 auto;
min-height: 250px
}
.sam-slot--contextual-grid.sam-slot--empty {
min-height: 1px !important;
padding: 0;
transition: min-height 1s ease-in-out
}
.sam-slot--contextual-grid.sam-slot--sticky {
position: sticky;
top: 12px
}
@media (min-width: 48em) {
.sam-slot--contextual-grid.sam-slot--sticky {
top: 92px
}
}
.sam-slot--mpu {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
min-height: 621px;
margin-right: auto;
margin-left: auto;
padding: 0;
background-color: rgba(0, 0, 0, 0.05)
}
@media (min-width: 48em) {
.sam-slot--mpu {
width: auto;
background-color: transparent
}
}
.sam-slot--mpu .sam-slot__content {
display: table;
min-width: 300px;
margin: 0 auto
}
.sam-slot--mpu-small {
min-height: 321px
}
.sam-slot--mpu-small .sam-slot__content {
height: 300px
}
.sam-slot--mpu-xs {
min-height: 271px
}
.sam-slot--mpu-xs .sam-slot__content {
height: 250px
}
.sam-slot--leaderboard {
display: flex;
justify-content: center;
min-height: 271px;
margin: 0 auto
}
.sam-slot--leaderboard .sam-slot__content {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 970px;
height: 250px;
overflow: hidden
}
@media (min-width: 64em) {
.sam-slot--leaderboard, .sam-slot--leaderboard .sam-slot__content {
min-width: 970px
}
}
.sam-slot--leaderboard-small {
min-height: 111px
}
.sam-slot--leaderboard-small .sam-slot__content {
height: 90px
}
.sam-slot--games-leaderboard {
display: block
}
@media (min-width: 80em) {
.sam-slot--games-leaderboard {
display: none
}
}
@media (min-width: 90em) {
.sam-slot--games-leaderboard {
display: block
}
}
.sam-slot--slim-leaderboard {
justify-content: center;
min-height: 271px;
margin: 0 auto
}
.sam-slot--slim-leaderboard .sam-slot__content {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 250px;
overflow: hidden
}
.sam-slot--card .sam-slot__wrapper {
min-width: 86px;
min-height: 190px
}
@media (min-width: 80em) {
.sam-slot--card .sam-slot__wrapper {
min-height: 230px
}
}
.sam-slot--card .sam-slot__content {
min-width: 86px;
height: 100%
}
@media (min-width: 80em) {
.sam-slot--card .sam-slot__content {
min-height: 230px
}
}
.sam-slot--card .sam-slot__content iframe {
min-height: 190px
}
@media (min-width: 80em) {
.sam-slot--card .sam-slot__content iframe {
min-height: 230px
}
}
.security-status {
display: flex;
align-items: center;
color: #71747a;
font-size: .875rem;
text-decoration: none
}
.security-status:hover {
text-decoration: underline;
cursor: pointer
}
.security-status__icon {
font-size: 1rem
}
.security-status__text {
margin-left: 2px
}
.security-status--clean .security-status__icon {
color: #009e61
}
.security-status--warning .security-status__icon {
color: #ffb901
}
.security-status--blocked .security-status__icon {
color: #b71c1c
}
@media (min-width: 64em) {
.show-more-height__content {
position: relative;
max-height: 162px;
overflow: hidden
}
.show-more-height__content::before {
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 24px;
background: #fff;
background: linear-gradient(0deg, #fff 30%, transparent 100%);
content: ""
}
.show-more-height__content--expanded {
max-height: none
}
.show-more-height--medium .show-more-height__content {
max-height: 182px
}
.show-more-height--medium .show-more-height__content--expanded {
max-height: none
}
.show-more-height--large .show-more-height__content {
max-height: 384px
}
.show-more-height--large .show-more-height__content--expanded {
max-height: none
}
.show-more-height--xlarge .show-more-height__content {
max-height: 1160px
}
.show-more-height--xlarge .show-more-height__content--expanded {
max-height: none
}
}
.show-more-height__button {
display: none
}
@media (min-width: 64em) {
.show-more-height__button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow: hidden
}
}
.show-more {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 182px;
height: 24px;
padding: 4px 12px;
color: #3b3d40;
font-weight: 600;
font-size: .875rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
white-space: nowrap;
-moz-column-gap: 12px;
column-gap: 12px;
background-color: transparent;
border: none;
transition: color 0.25s ease;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
.show-more:hover {
color: #71747a;
cursor: pointer
}
.show-more::before, .show-more::after {
position: absolute;
top: 11px;
width: 100vw;
height: 1px;
background-color: #e0e0e0;
content: ""
}
.show-more::before {
right: 100%
}
.show-more::after {
left: 100%
}
.show-more__text-more {
display: block
}
.show-more__text-more.is-expanded {
display: none
}
.show-more__text-less {
display: none
}
.show-more__text-less.is-expanded {
display: block
}
.show-more__icon {
font-size: .875rem;
transition: .2s ease-in-out
}
.show-more__icon.is-expanded {
transform: rotate(180deg)
}
.site-search {
position: relative;
display: flex;
flex: 1;
flex-wrap: wrap
}
.site-search__autocomplete {
position: absolute;
top: 40px;
right: 0;
left: 0;
z-index: 125;
margin: 0 -8px;
padding: 8px 16px;
background: #fff
}
@media (min-width: 48em) {
.site-search__autocomplete {
top: 32px;
right: initial;
left: initial;
z-index: initial;
width: 100%;
margin: 0;
padding: 16px 8px 8px;
border-color: #e0e0e0;
border-style: solid;
border-width: 0 1px 1px;
border-radius: 0 0 8px 8px
}
}
@media (min-width: 64em) {
.site-search__autocomplete {
top: 40px
}
}
.site-search__autocomplete--medium {
top: 40px;
z-index: 2;
margin: 0;
padding: 16px 8px 8px;
border-color: #e0e0e0;
border-style: solid;
border-width: 0 1px 1px;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2)
}
@media (min-width: 64em) {
.site-search__autocomplete--medium {
top: 56px
}
}
.site-search__link {
display: inline-block;
width: 100%;
padding: 8px;
color: #3b3d40;
font-size: .875rem;
border: 1px solid #fff
}
@media (min-width: 48em) {
.site-search__link {
font-size: 1rem
}
}
.site-search__link:focus {
border: 1px solid #26d07c;
outline: 0
}
.site-search__link:focus-visible {
outline-offset: -1px
}
.site-search__link:hover {
background-color: #88d6f4
}
.site-search__link span {
font-size: .75rem
}
.site-search__link--highlight {
background-color: #cceefb
}
.site-search__query {
z-index: 1;
flex: 1;
width: 100%;
padding: 0 16px;
font-family: "Inter", "Arial-Fallback", arial, sans-serif;
border: 1px solid #bdbdbd;
border-right: 0;
-webkit-appearance: none
}
:lang(ar-SA) .site-search__query {
border-right: 1px solid #bdbdbd;
border-left: 0
}
.site-search__query:focus {
border: 1px solid #26d07c;
border-right: 0;
outline: 0
}
:lang(ar-SA) .site-search__query:focus {
border-right: 1px solid #26d07c;
border-left: 0
}
.site-search__query:focus-visible {
outline-offset: -1px
}
.site-search__query:focus ~ button {
border-color: #26d07c
}
.site-search__query::-webkit-search-cancel-button {
width: 12px;
height: 12px;
background: linear-gradient(45deg, transparent 0%, transparent 44%, #71747a 45%, #71747a 56%, transparent 57%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 44%, #71747a 45%, #71747a 56%, transparent 57%, transparent 100%);
background-size: contain;
opacity: 0;
-webkit-appearance: none;
appearance: none;
pointer-events: none
}
.site-search__query:focus::-webkit-search-cancel-button {
opacity: 1;
pointer-events: all
}
.site-search__query--small {
z-index: 3;
height: 40px;
font-size: .875rem;
border-radius: 8px 0 0 8px
}
:lang(ar-SA) .site-search__query--small {
border-radius: 0 8px 8px 0
}
@media (min-width: 48em) {
.site-search__query--small {
height: 40px;
font-size: 1rem
}
}
@media (min-width: 64em) {
.site-search__query--small {
height: 48px
}
}
.site-search__query--medium {
z-index: 3;
height: 48px;
font-size: .875rem;
border-radius: 8px 0 0 8px
}
:lang(ar-SA) .site-search__query--medium {
border-radius: 0 8px 8px 0
}
@media (min-width: 48em) {
.site-search__query--medium {
height: 48px;
font-size: 1rem
}
}
@media (min-width: 64em) {
.site-search__query--medium {
height: 64px
}
}
.site-search__button {
z-index: 1;
margin: 0;
padding: 0;
color: #fff;
background: linear-gradient(95deg, #00a3e0 14%, #26d07c 85%);
border: 0;
cursor: pointer;
-webkit-appearance: none
}
.site-search__button:hover {
background: linear-gradient(230deg, #00a3e0 14%, #26d07c 85%)
}
.site-search__button:focus-visible {
outline-offset: -1px
}
.site-search__button--small {
z-index: 3;
width: 40px;
height: 40px;
border-radius: 0 8px 8px 0
}
:lang(ar-SA) .site-search__button--small {
border-radius: 8px 0 0 8px
}
@media (min-width: 48em) {
.site-search__button--small {
width: 40px;
height: 40px
}
}
@media (min-width: 64em) {
.site-search__button--small {
width: 48px;
height: 48px
}
}
.site-search__button--medium {
z-index: 3;
width: 48px;
height: 48px;
border-radius: 0 8px 8px 0
}
:lang(ar-SA) .site-search__button--medium {
border-radius: 8px 0 0 8px
}
@media (min-width: 48em) {
.site-search__button--medium {
width: 48px;
height: 48px
}
}
@media (min-width: 64em) {
.site-search__button--medium {
width: 64px;
height: 64px
}
}
.site-search__button--white {
color: #3b3d40;
background: #fff;
border: 1px solid #bdbdbd;
border-left: 0
}
:lang(ar-SA) .site-search__button--white {
border-right: 0;
border-left: 1px solid #bdbdbd
}
.site-search__button--white:focus, .site-search__button--white:focus ~ input {
border-color: #26d07c
}
.site-search__button--white:hover {
background: #fafafa
}
.site-search__icon {
font-size: 1.25rem;
cursor: pointer
}
@media (min-width: 48em) {
.site-search__icon {
font-size: 2rem
}
}
.slide-in {
position: fixed;
bottom: 80px;
left: 0;
z-index: 105;
box-sizing: content-box;
width: 430px;
padding-right: 24px;
overflow: hidden;
color: #e0e0e0;
font-size: 1rem;
background-color: #4d4d4d;
transform: translate3d(-454px, 0, 0);
transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1)
}
.slide-in.slide {
transform: translate3d(0, 0, 0);
transition-delay: 1.5s
}
.slide-in__content {
max-width: 430px;
min-height: 120px
}
.slide-in--right {
right: 0;
left: auto;
transform: translate3d(454px, 0, 0)
}
.slide-in__close {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
color: #e0e0e0;
font-size: 1.75rem;
line-height: 0;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer
}
.spinner-wait {
display: inline-flex;
justify-content: center;
width: 32px;
height: 32px;
margin: auto
}
.spinner-wait__animation {
position: relative;
display: inline-block;
width: 26px;
height: 26px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 2px 1px 0 #fff;
-webkit-animation: spin .7s linear infinite;
animation: spin .7s linear infinite;
will-change: transform;
align-self: center
}
@keyframes spin {
100% {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 2px 1px 0 #fff;
transform: rotate(360deg)
}
}
.title-page {
color: #141415;
font-weight: 600;
font-size: 1.375rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif
}
.title-page > * {
display: block;
font-weight: 400;
font-size: 1.125rem;
word-break: break-word
}
.title-section {
color: #141415;
font-weight: 600;
font-size: 1.125rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
line-height: 1.4
}
.title-section > span, .title-section > small {
display: block;
color: #71747a;
font-weight: 400;
font-size: .875rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif
}
.title-section--one-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.title-section--one-line > span, .title-section--one-line > small {
display: inline;
color: #3b3d40;
font-weight: 600;
font-size: .875rem;
font-family: "Inter", "Arial-Fallback", arial, sans-serif
}
@media (min-width: 64em) {
.top-downloads-enhanced {
padding: 24px;
border: 1px solid #e0e0e0;
border-radius: 8px
}
}
.top-downloads-enhanced__item {
display: block;
margin-bottom: 24px
}
@media (min-width: 64em) {
.top-downloads-enhanced__item {
margin-bottom: 12px
}
}
.top-downloads-enhanced__item:last-child {
margin-bottom: 0
}
.top-downloads-enhanced__link {
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: 16px;
column-gap: 16px
}
@media (min-width: 64em) {
.top-downloads-enhanced__link {
padding: 12px;
-moz-column-gap: 24px;
column-gap: 24px;
border-radius: 8px;
transition: transform 0.2s cubic-bezier(0.55, 0, 0.1, 1)
}
.top-downloads-enhanced__link::before {
margin-left: 16px;
font-weight: 600;
font-size: 1.25rem;
font-family: "Montserrat", "Arial-fallback", arial, sans-serif;
content: attr(data-order)
}
.top-downloads-enhanced__link:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: scale(100.25%)
}
}
.top-downloads-enhanced__icon {
width: 40px;
height: 40px
}
@media (min-width: 48em) {
.top-downloads-enhanced__icon {
width: 48px;
height: 48px
}
}
.top-downloads-enhanced__name {
overflow: hidden;
width: 60%;
font-weight: 600;
font-size: .875rem
}
@supports (-webkit-line-clamp: 2) {
.top-downloads-enhanced__name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
@media (min-width: 64em) {
.top-downloads-enhanced__name {
width: 25%;
font-size: 1rem
}
}
.top-downloads-enhanced__license {
display: none
}
@media (min-width: 64em) {
.top-downloads-enhanced__license {
display: block;
width: 10%
}
}
.top-downloads-enhanced__size {
display: none
}
@media (min-width: 64em) {
.top-downloads-enhanced__size {
display: block;
width: 10%
}
}
.top-downloads-enhanced__rating {
width: 20%
}
@media (min-width: 64em) {
.top-downloads-enhanced__rating {
width: 10%
}
}
.top-downloads-enhanced__downloads {
display: none
}
@media (min-width: 64em) {
.top-downloads-enhanced__downloads {
display: block;
width: 20%
}
}
.trending-bar {
display: flex;
align-items: center;
height: 40px;
margin-right: -16px;
margin-left: -16px;
font-family: "Inter", "Arial-Fallback", arial, sans-serif
}
@media (min-width: 48em) {
.trending-bar {
height: 48px
}
}
@media (min-width: 64em) {
.trending-bar {
margin-right: 0;
margin-left: 0
}
}
.trending-bar--active {
background: #f5f5f5
}
.trending-bar__headline {
display: inline-flex;
align-items: center;
min-height: 40px;
margin: 0;
padding: 8px 0
}
@media (min-width: 48em) {
.trending-bar__headline {
min-height: 48px;
padding: 8px 0
}
}
.trending-bar__title {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: .875rem;
line-height: 1;
text-transform: uppercase;
background: linear-gradient(230deg, #00a3e0 14%, #26d07c 85%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
@media (min-width: 48em) {
.trending-bar__title {
font-size: 1rem
}
}
.trending-bar__icon {
width: 24px;
height: 24px;
margin: 4px 4px 4px 12px;
-webkit-animation: blink 2s linear infinite;
animation: blink 2s linear infinite;
will-change: opacity, scale
}
@media (min-width: 48em) {
.trending-bar__icon {
margin: 4px
}
}
.trending-bar__content {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: center;
min-height: 40px;
padding: 8px 8px 8px 0;
overflow: scroll hidden;
-moz-column-gap: 16px;
column-gap: 16px
}
.trending-bar__content::-webkit-scrollbar {
display: none
}
@media (min-width: 48em) {
.trending-bar__content {
min-height: 48px;
padding: 12px 12px 8px 0;
-moz-column-gap: 24px;
column-gap: 24px
}
.trending-bar__content::-webkit-scrollbar {
display: block;
height: 4px
}
.trending-bar__content::-webkit-scrollbar-track {
background: #f5f5f5
}
.trending-bar__content::-webkit-scrollbar-thumb {
height: 4px;
background: linear-gradient(95deg, #00a3e0 14%, #26d07c 85%)
}
}
.trending-bar__list {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: baseline;
-moz-column-gap: 16px;
column-gap: 16px
}
@media (min-width: 48em) {
.trending-bar__list {
-moz-column-gap: 24px;
column-gap: 24px
}
}
.trending-bar__topic {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 24px;
font-size: .875rem;
line-height: 1;
white-space: nowrap;
text-decoration: none
}
.trending-bar__topic:hover {
text-decoration: underline
}
@-webkit-keyframes blink {
0% {
opacity: 1;
scale: 100%
}
25% {
opacity: .25;
scale: 90%
}
50% {
opacity: 1;
scale: 100%
}
}
@keyframes blink {
0% {
opacity: 1;
scale: 100%
}
25% {
opacity: .25;
scale: 90%
}
50% {
opacity: 1;
scale: 100%
}
}
.view-switcher {
display: flex;
justify-content: flex-end;
margin-right: -16px;
margin-left: -16px;
padding: 4px 24px;
overflow-x: scroll;
overflow-y: hidden;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
-webkit-overflow-scrolling: touch
}
@media (min-width: 48em) {
.view-switcher {
margin-right: 0;
margin-left: 0;
overflow: auto
}
}
.view-switcher::-webkit-scrollbar {
display: none
}
.view-switcher__item {
display: inline-flex;
font-size: 1.5rem
}
.votes-info {
display: inline-flex;
align-items: center;
color: #3b3d40;
font-size: .875rem;
-moz-column-gap: 2px;
column-gap: 2px
}
.votes-info .s-icon {
font-size: 1rem
}