/*
Theme Name: Israel Premier Tech 2022
Author: 9W
Author URI: https://9wdigital.com/
Description: Custom theme for IPT team
Version: 1.0
Text Domain: ipt2022
Domain Path: /languages
*/
/* barlow-semi-condensed-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 400;
src: url('../woff2/barlow-semi-condensed-v15-latin-regular.woff2')
format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: italic;
font-weight: 400;
src: url('../woff2/barlow-semi-condensed-v15-latin-italic.woff2')
format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 500;
src: url('../woff2/barlow-semi-condensed-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 600;
src: url('../woff2/barlow-semi-condensed-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: italic;
font-weight: 600;
src: url('../woff2/barlow-semi-condensed-v15-latin-600italic.woff2')
format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 700;
src: url('../woff2/barlow-semi-condensed-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-semi-condensed-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Barlow Semi Condensed';
font-style: normal;
font-weight: 800;
src: url('../woff2/barlow-semi-condensed-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
--THEME-COLOR-BG: #fff;
--THEME-COLOR-LIGHTGREY: #e6e6e6;
--BORDER-COLOR-LIGHTGREY: #dddddd;
--REGULAR-CONTAINER-W: 1400px;
--WIDEST-CONTAINER-W: calc(100% - 12% + 30px);
--WIDER-CONTAINER-W: calc(100% - 22% + 30px);
--THEME-COLOR-DARKEST: #000f1e;
--THEME-COLOR-DARKER: #00194c; /* officiel */
--THEME-COLOR-DARK: #33364a; /* rgb(33,36,4A) */
--THEME-COLOR-DARKBLUE: #001f5f; /* rgb(33,36,4A) */
/* --THEME-COLOR-BLUE: #374e8d; rgb(37, 4E, 8D); */
--THEME-COLOR-BLUE: #002e62; /* rgb(37, 4E, 8D); */
--THEME-COLOR-LIGHTBLUE: #4b65ac; /* rgb(4B, 65, AC); */
--THEME-COLOR-LIGHTERBLUE: #5f7cbc; /* rgb(5F, 7C, BC); */
--REGULAR-CONTAINER-W: calc(100vw - (2 * clamp(125px, 12.5%, 185px)) + 2px);
--THEME-COLOR-BLUE1: #a5cbec;
--THEME-COLOR-BLUE2: #91c1e3;
--THEME-COLOR-BLUE3: #7baadb;
--THEME-COLOR-BLUE4: #538cca;
--THEME-COLOR-BLUE5: #3367b1;
--THEME-COLOR-BLUE6: #4069a5;
--THEME-COLOR-BLUE7: #507dbf;
--THEME-COLOR-BLUE8: #3b66b0;
--THEME-COLOR-BLUE9: #274c90;
--THEME-COLOR-BLUE10: #394d80;
--THEME-COLOR-BLUE11: #2f3349;
--SECTION-PB: calc(50px + 5vw);
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
width: 100%;
height: 100%;
}
body {
width: 100%;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 400;
font-size: 1.25rem;
color: #111;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* button, input, optgroup, select, textarea {font-family: Helvetica,Arial,sans-serif;} */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
text-transform: uppercase;
line-height: 1.1;
font-family: 'Barlow Semi Condensed', sans-serif;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
margin-top: revert;
}
h1 {
font-size: calc(1.5rem + 2.25vw);
}
h1.page-title {
font-size: calc(2rem + 2.125vw);
margin-bottom: 2rem;
}
header h1 .sub-note {
position: absolute;
font-size: 1rem;
font-weight: 500;
text-transform: none;
}
header h1:has(.sub-note) {
padding-bottom: 1rem;
position: relative;
}
.rider h1.page-title {
font-size: calc(2rem + 2.75vw);
}
h2 {
font-size: 1.75em;
}
h2.section-title {
margin-bottom: 3rem;
font-size: calc(1.75em + 1vw);
}
h2.row-title {
margin-bottom: 1rem;
font-size: calc(2rem + 1.125vw);
}
.h4,
h4 {
font-size: 1.25rem;
}
.h5,
h5 {
font-size: 1.05rem;
}
.form-text {
font-size: 0.75em;
color: #444;
}
.sup-title {
margin-bottom: 0.5rem;
text-transform: uppercase;
font-size: 0.85em;
font-weight: 600;
letter-spacing: 1px;
}
b,
strong {
font-weight: 600;
}
.fs-7 {
font-size: 0.95rem !important;
}
.frm_style_formidable-style.with_frm_style .frm_submit button {
font-weight: 700 !important;
text-transform: uppercase;
}
@media (min-width: 768px) {
.sticky-md-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
}
.sticky-offset {
top: 150px;
}
header.page-header {
/* margin: auto auto calc(75px + 4vw) 0; */
margin: auto auto calc(60px + 1.5vw) 0;
}
header.page-header-w-intro:not(.w-100) {
width: 60vw;
max-width: 75ch;
}
header.page-header-w-nav {
margin-bottom: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
header.page-header-w-nav h1.page-title {
margin-bottom: calc(1rem + 1.5vw);
}
header.page-header-w-intro {
margin-bottom: calc(50px + 1.5vw);
}
.page-nav,
ul.categories-nav {
font-weight: 600;
font-size: 1.5rem;
display: flex;
gap: 0 10px;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
ul.categories-nav {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 0;
}
.page-nav a,
ul.categories-nav li a {
padding: 0.25rem 0.75rem;
border: 2px solid white;
display: flex;
align-items: center;
}
.page-nav a:hover,
ul.categories-nav li.current-cat a,
ul.categories-nav li a:hover {
border-color: #333;
}
body.archive ul.categories-nav li.current-cat a {
display: none;
}
@media (min-width: 768px) {
.page-nav,
ul.categories-nav {
/* font-size: 1.125rem; */
display: flex;
flex-direction: row;
align-items: flex-end;
align-self: stretch;
gap: 0 10px;
flex-wrap: wrap;
justify-content: flex-end;
margin-left: auto;
}
header.page-header {
margin-left: auto;
}
header.page-header-w-nav {
text-align: start;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
}
header.page-header-w-nav h1.page-title {
margin-bottom: 0;
margin-right: 2rem;
}
}
@media (min-width: 1200px) {
header.page-header-w-nav h1.page-title {
white-space: nowrap;
}
}
.page-header-intro p {
font-size: calc(1.35rem + 0.25vw);
}
.post-content p {
font-size: 1.05em;
max-width: 70ch;
}
a {
text-decoration: none;
color: #333;
transition: all 0.2s ease-in-out;
}
a.collapse-link {
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sbi_lightbox a {
border-bottom: none;
transition: none;
}
.hero-content .categories a {
color: #ddd;
}
a:active,
a:focus {
outline: none;
}
a:hover,
a:focus {
text-decoration: none;
color: #000;
}
a.inversed {
color: #eee;
}
a.inversed:hover,
a.inversed:focus {
color: #fff;
}
.event-lineup a:hover,
.event-lineup a:focus {
border-bottom: none;
}
.event-lineup a .lineup-name {
border-bottom: 1px solid transparent;
}
.event-lineup a:hover .lineup-name,
.event-lineup a:focus .lineup-name {
border-bottom-color: currentColor;
}
.home .event-lineup a .lineup-name {
width: min-content;
}
.hero-content .categories a:hover,
.hero-content .categories a:focus {
color: #fff;
}
.more-info {
font-weight: 600;
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: flex-end;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
}
.more-info-wrapper {
text-align: right;
margin-bottom: 3rem;
margin-top: calc(1rem + 1vw);
}
div:not(.post-content) > ul {
list-style: none;
padding: 0;
}
.lead,
.lead p {
font-size: 1.125em;
font-weight: 400;
}
p {
max-width: 60ch;
}
.place-center {
display: grid;
place-content: center;
}
@media (min-width: 992px) {
.place-lg-center {
display: grid;
place-content: center;
}
}
.btn {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 0;
border-width: 2px;
padding: calc(0.125rem + 1vw) calc(1.1rem + 1.75vw);
font-size: calc(1rem + 0.25vw);
}
.btn.btn-sm {
border-radius: 0;
border-width: 2px;
padding: 0.4rem 1.125rem;
font-size: 1rem;
}
.btn-outline-light {
background: rgba(0, 0, 0, 0.2);
}
.input-group
> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
.valid-feedback
):not(.invalid-tooltip):not(.invalid-feedback) {
margin-left: -2px;
}
.form-control::-webkit-input-placeholder {
color: inherit;
font-size: 1.125rem;
}
.form-control::-moz-placeholder {
color: inherit;
font-size: 1.125rem;
}
.form-control:-ms-input-placeholder {
color: inherit;
font-size: 1.125rem;
}
.form-control::-ms-input-placeholder {
color: inherit;
font-size: 1.125rem;
}
.form-control::placeholder {
color: inherit;
font-size: 1.125rem;
}
.columns-2 {
-moz-column-gap: 4em;
column-gap: 4em;
-moz-columns: 2 320px;
columns: 2 320px;
}
.columns-2-sm {
-moz-column-gap: 2em;
column-gap: 2em;
-moz-columns: 2 120px;
columns: 2 120px;
}
.columns-auto-175 {
-moz-column-gap: 1.5em;
column-gap: 1.5em;
-moz-columns: auto 175px;
columns: auto 175px;
}
iframe {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
/* Images */
.post-content img {
max-width: 100%;
height: auto;
}
.post-content .container-youtube {
margin-bottom: 1.5rem;
}
.post-content p + img {
margin-top: 1rem;
}
.post-content img + p {
margin-top: 1.5rem;
}
.greyscale-img {
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
filter: grayscale(1);
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.rider:hover .greyscale-img,
.greyscale-img:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0%);
filter: grayscale(0);
-webkit-backface-visibility: hidden;
}
.greyscale-img.lazy-loaded {
opacity: 0.5 !important;
}
.greyscale-img:hover.lazy-loaded {
opacity: 1 !important;
}
.alignnone {
margin-bottom: 1.75rem;
}
@media (min-width: 900px) {
.alignleft {
float: left;
margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
float: right;
margin: 0.375em 0 1.75em 1.75em;
}
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.75em;
}
.wp-caption {
margin-bottom: 1.75em;
max-width: 100%;
}
.wp-caption img[class*='wp-image-'] {
display: block;
margin: 0;
}
.wp-caption .wp-caption-text {
font-size: 0.85em;
line-height: 1.6153846154;
padding-top: 0.5384615385em;
margin: 0;
}
/* Galleries */
/**
* 12.2 - Galleries
*/
.single-post .gallery {
max-width: 100%;
margin: 1.75em auto 1.75em;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.single-post .gallery-item {
display: inline-block;
margin: 0;
max-width: calc(50% - 0.5rem);
padding: 0;
text-align: center;
vertical-align: top;
width: 100%;
position: relative;
aspect-ratio: 1;
--bs-aspect-ratio: 100%;
}
.single-post .gallery-item::before {
display: block;
padding-top: var(--bs-aspect-ratio);
content: '';
}
@media (min-width: 992px) {
.gallery-columns-4 .gallery-item {
max-width: calc(25% - 0.75rem);
}
}
.gallery-icon img {
margin: 0 auto;
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.gallery-caption {
color: #686868;
display: block;
font-size: 13px;
font-size: 0.8125rem;
font-style: italic;
line-height: 1.6153846154;
padding-top: 0.5384615385em;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
/* BS Blockquotes */
figure.blockquote {
margin: 2rem 0;
}
blockquote.blockquote {
padding: 0 0 0 2.25rem;
quotes: '\201C''\201D';
position: relative;
}
blockquote.blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 1;
left: 0px;
position: absolute;
top: -10px;
}
blockquote.blockquote p {
display: inline;
}
.blockquote-footer {
font-size: 1rem;
margin-top: 1rem;
padding-left: 2.25rem;
}
/* Pullquotes */
blockquote.pullquote {
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: 1rem;
font-size: 1.125em;
border-left: 2px solid #333;
padding-left: 1.25rem;
font-style: italic;
}
.pullquote-footer {
font-size: 0.9em;
font-weight: 500;
opacity: 0.75;
}
blockquote.pullquote p:last-child {
margin-bottom: 0;
}
@media (min-width: 650px) {
blockquote.pullquote {
max-width: 80%;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
}
}
@media (min-width: 992px) {
blockquote.pullquote {
float: right;
max-width: 33vw;
width: 500px;
margin-left: 2rem;
}
}
@media (min-width: 1850px) {
blockquote.pullquote {
margin-right: 2vw;
}
}
/* Structure */
@media (min-width: 1600px) {
.col-xxxl-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-xxxl-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-xxxl-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-xxxl-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
}
body > main {
/* overflow-x: hidden; */
overflow-x: clip;
/* padding-right: 10px; */
/* padding-left: 10px; */
position: relative;
flex-grow: 1;
}
@media (min-width: 992px) {
body > main {
padding-right: 0;
padding-left: 0;
}
}
body main > *:first-child {
padding-top: calc(2rem + 4.5vw);
}
.page-template-page-racing-for-change main > section.section-gap:first-child,
body main > section.w-hero:first-child {
padding-top: 0;
background-color: transparent;
}
/* body main > section.w-hero:first-child {
padding-top: 0;
} */
body main > .section-gap.section-gap-deep:first-child {
padding-top: calc(2.25rem + 6.5vw);
}
section {
padding-top: 0px;
padding-bottom: var(--SECTION-PB);
background-color: #ffffff;
color: #222;
position: relative;
display: flex;
flex-direction: column;
}
section:last-of-type {
padding-bottom: 0rem;
}
section:last-child {
padding-bottom: var(--SECTION-PB);
}
.homepage section:last-child {
padding-bottom: 0;
}
section.lined {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 200px;
margin-top: 75px;
}
.lined:before,
.lined:after {
content: '';
position: absolute;
left: 185px;
right: auto;
top: 0rem;
bottom: 0;
border-right: 2px solid #000;
}
section.lined:after {
left: auto;
right: 185px;
}
section.checkered-info .topic-body p {
font-size: clamp(1.35rem, 2vw, 1.5rem);
}
section.checkered-info .topic-body p:last-child {
margin-bottom: 0;
}
.topic {
align-items: center;
}
.topic-body {
padding-top: 2rem;
padding-bottom: calc(3rem + 2vw);
}
.topic-image {
aspect-ratio: 1;
}
.topic-image img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
@media (min-width: 992px) {
.topic-body {
padding-left: calc(2rem + 1vw);
padding-right: calc(2rem + 1vw);
}
.topic:nth-child(odd) .topic-body {
padding-left: calc(1rem + 0vw);
}
.topic:nth-child(even) .topic-body {
padding-right: calc(1rem + 0vw);
}
}
@media (min-width: 992px) {
body:not(.racing-for-change) .topic:nth-child(odd) .topic-image {
order: 6;
}
}
@media (min-width: 768px) {
body.racing-for-change .topic.topic:nth-child(odd) .topic-body {
padding-right: calc(1rem + 1vw);
}
body.racing-for-change .topic.topic:nth-child(even) .topic-body {
padding-left: calc(1rem + 1vw);
}
body.racing-for-change .topic.topic:nth-child(odd) .topic-image {
order: 6;
}
}
@media (min-width: 1400px) {
.topic-body {
padding: 2rem calc(2rem + 3vw);
}
}
section .topic.row .btn-wrapper {
margin: 2rem 0 0;
}
@media (min-width: 992px) {
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: var(--REGULAR-CONTAINER-W);
}
}
.container-wider,
.container-widest {
width: 100%;
max-width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
.container-esp,
.container-esp-ext {
width: 100%;
max-width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
}
.container-esp-ext {
padding-right: 0;
}
@media (min-width: 992px) {
.container-esp {
width: 95vw;
}
.container-esp-ext {
width: 97.5vw;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.container-esp {
width: var(--REGULAR-CONTAINER-W);
}
.container-esp-ext {
width: calc(
var(--REGULAR-CONTAINER-W) + (clamp(125px, 12.5%, 185px)) + 2px
);
margin: 0 0 0 auto;
}
}
@media (max-width: 1499px) {
.site-footer .container-esp {
width: 95vw;
}
}
@media (min-width: 1400px) {
.container-xl,
.container-xxl {
max-width: var(--REGULAR-CONTAINER-W);
}
.container-widest {
max-width: var(--WIDEST-CONTAINER-W);
}
.container-wider {
max-width: var(--WIDER-CONTAINER-W);
}
}
@media (min-width: 1920px) {
.container-esp {
max-width: 1650px;
}
}
.scrollcontainer {
margin: 0 auto;
--background-color: var(--THEME-COLOR-BG);
--shadow-color: rgba(34, 34, 34, 0.5);
--shadow-size: 0.6em;
--transparent: rgba(
255,
255,
255,
0
); /* We can't use "transparent" directly, because Safari would interpret the color as "transparent black" (see https://css-tricks.com/thing-know-gradients-transparent-black/). Using this workaround, it works fine. */
}
.scrollcontainer--horizontal {
overflow-y: scroll;
background: linear-gradient(
to right,
var(--background-color),
var(--background-color),
var(--transparent) calc(var(--shadow-size) * 2)
),
radial-gradient(
farthest-side at 0 50%,
var(--shadow-color),
var(--transparent)
),
linear-gradient(
to left,
var(--background-color),
var(--background-color),
var(--transparent) calc(var(--shadow-size) * 2)
),
radial-gradient(
farthest-side at 100% 50%,
var(--shadow-color),
var(--transparent)
)
100%;
background-color: var(--background-color);
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
background-size: 100% 100%, var(--shadow-size) 100%, 100% 100%,
var(--shadow-size) 100%;
height: 100%;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
}
.scrollcontainer--horizontal .nav-pills .nav-link {
white-space: nowrap;
}
/* Backgrounds */
.grey-bg {
background: #eeeeee !important;
}
.dark-blue-bg {
background: var(--THEME-COLOR-DARK);
color: white;
}
/* Header */
.top-bar {
overflow-y: hidden;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
z-index: 1;
padding: 0;
position: relative;
border-bottom: 1px solid #aaa;
background: #f6f6f6;
}
.top-bar-menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding-bottom: 0;
margin: 0;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
min-width: 100vw;
justify-content: flex-start;
}
@media (min-width: 768px) {
.top-bar-menu {
min-width: 0;
justify-content: flex-end;
}
}
.top-bar-menu .nav-item:first-child {
border-left: 1px solid #aaa;
}
/* .top-bar-menu .nav-item:not(:nth-last-child(2)) {
border-right: 1px solid #aaa;
} */
.top-bar-menu .nav-item a {
padding: 0.5rem 1rem;
text-align: center;
color: #333;
}
@media (min-width: 768px) {
.top-bar-menu .nav-item a {
padding: 0.5rem 1.8rem;
}
}
.top-bar-menu .nav-item a:hover {
color: #eee;
background: #111;
}
.top-bar .top-bar-menu > li ~ li {
border-left: 1px solid #aaa;
}
.top-bar .social-menu {
display: flex;
flex-grow: 1;
column-gap: 0.5rem;
flex-wrap: nowrap;
align-items: center;
align-self: stretch;
justify-content: space-evenly;
padding: 0 0.75rem;
}
@media (min-width: 768px) {
.top-bar .social-menu {
flex-grow: unset;
justify-content: space-end;
column-gap: 1.5rem;
padding-inline: 1.8rem;
}
.top-bar-menu .nav-item:last-child {
width: calc(clamp(125px, 12.5vw, 185px) + var(--bs-gutter-x, 0.75rem));
}
}
@media (min-width: 1200px) {
.top-bar .social-menu {
justify-content: space-end;
column-gap: 1rem;
}
}
.top-bar .social-menu a {
opacity: 0.75;
}
.modal.menu-modal .modal-body .header-menu {
width: auto;
justify-content: flex-start;
margin-top: 5rem;
margin-left: 10vw;
}
.modal.menu-modal .modal-body {
background: var(--THEME-COLOR-BLUE5);
}
.modal.menu-modal .navbar-nav > li.menu-item:not(:last-child) {
margin-bottom: calc(1.5rem + 1vh);
}
/* .modal.menu-modal .navbar-nav > li.menu-item-has-children.dropdown {
margin-bottom: 1rem;
} */
.modal.menu-modal .modal-body .header-menu.navbar-nav a.nav-link,
.modal.menu-modal .modal-body .dropdown-item {
color: white;
}
.modal.menu-modal .modal-body .dropdown-menu {
background: transparent;
font-size: 1em;
position: static !important;
transform: none !important;
}
body header.navbar {
font-weight: 500;
width: 100%;
padding: 0 2rem 0 1rem;
/* background-color: white; <-- remove for before pseudo element b */
justify-content: space-between;
}
body header.navbar .navbar-toggler {
background-color: rgba(255, 255, 255, 0.75);
color: currentColor;
text-transform: uppercase;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 1.1rem;
padding: 0;
margin-right: 0;
border: 0;
}
body header.navbar .navbar-toggler svg {
width: 25px;
}
header.navbar {
background-color: white;
/* background-image: url(images/01c-55.jpg); */
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
}
.header-brand,
.header-end {
flex: 0 0 calc(clamp(125px, 12.5%, 185px) + var(--bs-gutter-x, 0.75rem));
padding: 0.75rem;
display: flex;
place-content: center;
aspect-ratio: 1.5;
background-color: white;
}
.header-menu {
display: flex;
justify-content: center;
text-transform: uppercase;
flex-wrap: nowrap;
margin-bottom: 0.5rem;
margin-right: auto;
margin-left: auto;
}
.header-menu.navbar-nav a.nav-link {
padding: 0.25rem 0;
color: #000;
font-size: 2rem;
letter-spacing: 1px;
line-height: 1;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.dropdown-menu {
/* display: block; */
background: #eee;
border: none;
font-size: 1.125em;
}
.dropdown-menu > li.current-menu-item a,
.dropdown-menu > li.current_page_item a,
.dropdown-item:focus,
.dropdown-item:hover {
color: white;
background-color: #000;
}
.dropdown-item > span {
padding: 0 10px;
}
.dropdown-item {
padding: 0.25rem 0.5rem;
clear: both;
font-weight: 500;
color: #212529;
}
.dropdown-toggle span::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: '';
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.dropdown-toggle::after {
content: none;
}
.header-menu.navbar-nav a.nav-link::before,
.header-menu.navbar-nav a.nav-link::after {
position: relative;
width: 100%;
height: 1px;
top: 100%;
left: 0;
pointer-events: none;
background: currentColor;
}
@media (min-width: 768px) {
body header.navbar {
padding: 0;
border-bottom: 1px solid #aaa;
margin-bottom: -1px;
}
.header-brand {
border-right: 1px solid #aaa;
overflow: hidden;
}
}
@media (min-width: 1200px) {
body header.navbar.navbar-expand-xl .navbar-toggler {
display: none;
}
.header-menu {
align-items: center;
}
.header-menu.navbar-nav > li.menu-item {
padding: 0 1.25rem;
min-width: 105px;
}
header .header-menu.navbar-nav a.nav-link {
font-size: 1.1rem;
}
.dropdown-menu {
background: white;
border: none;
border-radius: 0;
left: 1rem;
display: none;
font-size: 1rem;
}
.dropdown-menu[data-bs-popper] {
/* left: 0; */
/* Align horizontally */
left: 1rem;
}
.dropdown > .dropdown-menu {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
height: 0;
margin-top: 0;
border-top: 0;
}
.dropdown:hover > .dropdown-menu,
.dropdown.show > .dropdown-menu.show {
visibility: visible;
opacity: 1;
height: auto;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
}
@media (min-width: 1500px) {
.header-menu.navbar-nav > li.menu-item {
padding: 0 2rem;
}
}
.header-brand img {
max-width: 100%;
height: auto;
margin: auto;
width: auto;
max-height: 100%;
}
.header-end {
text-align: center;
border-left: 1px solid #aaa;
place-content: center;
padding: 0;
}
.header-end .wrapper {
position: relative;
display: grid;
place-content: center;
margin: auto;
}
.header-end .wrapper svg {
width: 32px;
height: 32px;
margin: auto;
}
.header-end h5 {
font-weight: 600;
margin-top: 0.25rem;
margin-bottom: 0;
font-size: calc(0.75rem + 0.5vw);
}
.header-end span.badge {
top: 0;
left: 100%;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50rem;
font-size: 11px;
font-weight: 800;
}
@media (min-width: 1200px) {
.header-end .wrapper svg {
width: 36px;
height: 36px;
}
.header-end span.badge {
font-size: 13px;
}
}
.header-menu.navbar-nav a.nav-link {
cursor: pointer;
position: relative;
}
.header-menu.navbar-nav a.nav-link::before,
.header-menu.navbar-nav a.nav-link::after {
position: absolute;
width: 100%;
height: 1px;
top: 100%;
left: 0;
pointer-events: none;
background: currentColor;
}
.header-menu.navbar-nav a.nav-link::before {
content: '';
/* show by default */
}
/* Helike */
.rtl.single-post
.header-menu.navbar-nav
li.menu-item-latest
a.nav-link:hover::before,
.header-menu.navbar-nav a.nav-link:hover span {
-webkit-animation: glitchText 0.4s linear;
animation: glitchText 0.4s linear;
}
@-webkit-keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
@keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.header-menu.navbar-nav a.nav-link::before {
height: 2px;
opacity: 0;
}
.rtl.single-post .header-menu.navbar-nav li.menu-item-1583 a.nav-link::before,
.header-menu.navbar-nav li.current-menu-item a.nav-link::before,
.header-menu.navbar-nav li.current_page_item a.nav-link::before,
.header-menu.navbar-nav li.current_page_parent a.nav-link::before,
.header-menu.navbar-nav a.nav-link:hover::before {
opacity: 1;
-webkit-animation: glitchLine 0.4s steps(2, start) forwards;
animation: glitchLine 0.4s steps(2, start) forwards;
}
@-webkit-keyframes glitchLine {
0% {
transform: scale3d(1, 1, 1);
}
10% {
transform: translate3d(10px, 0, 0);
}
20% {
transform: translate3d(0, 4px, 0);
}
30% {
transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);
transform-origin: 100% 0%;
}
40% {
transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);
}
50% {
transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);
}
60% {
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);
}
70% {
transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);
}
80% {
transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);
transform-origin: 100% 0%;
}
90% {
transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);
transform-origin: 0% 50%;
}
100% {
opacity: 1;
}
}
@keyframes glitchLine {
0% {
transform: scale3d(1, 1, 1);
}
10% {
transform: translate3d(10px, 0, 0);
}
20% {
transform: translate3d(0, 4px, 0);
}
30% {
transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);
transform-origin: 100% 0%;
}
40% {
transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);
}
50% {
transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);
}
60% {
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);
}
70% {
transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);
}
80% {
transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);
transform-origin: 100% 0%;
}
90% {
transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);
transform-origin: 0% 50%;
}
100% {
opacity: 1;
}
}
.header-menu.navbar-nav
li.current_page_parent.menu-item-latest
a.nav-link::before,
.rtl.single-post
.header-menu.navbar-nav
li.menu-item-latest
a.nav-link::before {
opacity: 0;
content: '';
visibility: hidden;
}
.rtl.single-post
.header-menu.navbar-nav
li.menu-item-latest
a.nav-link:hover::before {
visibility: visible;
}
.overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(
38deg,
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.921) 6.8%,
hsla(0, 0%, 0%, 0.838) 13.2%,
hsla(0, 0%, 0%, 0.751) 19.4%,
hsla(0, 0%, 0%, 0.663) 25.4%,
hsla(0, 0%, 0%, 0.574) 31.3%,
hsla(0, 0%, 0%, 0.487) 37.1%,
hsla(0, 0%, 0%, 0.402) 42.9%,
hsla(0, 0%, 0%, 0.322) 48.9%,
hsla(0, 0%, 0%, 0.247) 55%,
hsla(0, 0%, 0%, 0.179) 61.4%,
hsla(0, 0%, 0%, 0.12) 68.1%,
hsla(0, 0%, 0%, 0.071) 75.3%,
hsla(0, 0%, 0%, 0.034) 82.9%,
hsla(0, 0%, 0%, 0.01) 91.1%,
hsla(0, 0%, 0%, 0) 100%
);
}
.teammb .overlay {
background: linear-gradient(
26deg,
hsla(0, 0%, 0%, 0.79) 0%,
hsla(0, 0%, 0%, 0.712) 0%,
hsla(0, 0%, 0%, 0.635) 0.2%,
hsla(0, 0%, 0%, 0.559) 0.8%,
hsla(0, 0%, 0%, 0.485) 1.9%,
hsla(0, 0%, 0%, 0.413) 3.7%,
hsla(0, 0%, 0%, 0.345) 6.4%,
hsla(0, 0%, 0%, 0.28) 10.2%,
hsla(0, 0%, 0%, 0.221) 15.2%,
hsla(0, 0%, 0%, 0.167) 21.6%,
hsla(0, 0%, 0%, 0.119) 29.6%,
hsla(0, 0%, 0%, 0.078) 39.4%,
hsla(0, 0%, 0%, 0.045) 51.2%,
hsla(0, 0%, 0%, 0.02) 65.1%,
hsla(0, 0%, 0%, 0.005) 81.3%,
hsla(0, 0%, 0%, 0) 100%
);
}
/* Hero */
#news .posts {
display: grid;
gap: 1.5rem;
grid-auto-flow: row;
-ms-grid-columns: 1fr;
margin-bottom: calc(2rem + 2vw);
}
#hero {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: calc(2% + 2vw);
display: flex;
position: relative;
color: white;
overflow: hidden;
background-blend-mode: lighten;
background-color: var(--THEME-COLOR-BLUE11);
grid-column: 1 / 2;
aspect-ratio: 1;
min-height: 530px;
}
@media (min-width: 576px) {
#hero {
aspect-ratio: 3 / 2;
grid-column: 1 / span 2;
}
#news .posts {
gap: 2rem;
-ms-grid-columns: repeat(2, minmax(10px, 1fr));
grid-template-columns: repeat(2, minmax(10px, 1fr));
}
}
@media (min-width: 992px) {
#news .posts {
gap: 2rem;
-ms-grid-columns: repeat(3, minmax(10px, 1fr));
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
#hero {
padding: 5%;
grid-column: 1 / span 3;
}
}
@media (min-width: 1650px) {
#hero {
aspect-ratio: 1552 / 808;
}
}
.hero-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
}
.hero-content {
width: 100%;
z-index: 0;
font-weight: 500;
font-size: 1.5rem;
margin-top: auto;
}
.hero-content p {
font-size: 1em;
max-width: 575px;
border-bottom: 1px solid currentColor;
}
.hero-content h1 {
text-shadow: 1px 1px 1px #666;
max-width: 90%;
width: 750px;
position: relative;
margin-right: 2rem;
}
.hero-content a.readmore {
font-weight: 700;
margin-top: 1rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: flex;
align-items: center;
white-space: nowrap;
padding: 5px 16px;
font-size: 0.9rem;
}
.hero-content a.readmore.btn:hover {
background-color: #ffffff;
}
@media (min-width: 500px) {
.hero-content a.readmore {
padding: calc(0.125rem + 1vw) calc(1.1rem + 1.75vw);
font-size: 1.25rem;
}
}
/* Footer */
.site-footer {
/* background: var(--THEME-COLOR-DARKER); */
/* background-image: url(https://israel-premier-tech.local/wp-content/themes/ipt2022/images/Gradient_01.svg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover; */
background: #275ba2;
color: rgba(255, 255, 255, 0.75);
padding-bottom: 85px;
padding-top: 2rem;
font-size: 0.85em;
font-weight: 500;
z-index: 10;
}
footer a,
footer a.nav-link {
color: inherit;
}
footer a:hover,
footer a:focus,
footer a.nav-link:hover {
color: #fff;
}
.site-footer > .container {
padding-top: 2rem;
}
footer li.list-group-item {
background-color: transparent;
color: currentColor;
}
footer #menu-footer-menu {
margin-bottom: 0.5rem;
}
footer #menu-footer-menu li {
display: inline-block;
text-transform: uppercase;
}
footer #menu-footer-menu li:last-child .nav-link {
padding-right: 0;
}
footer #menu-footer-menu li.current-menu-item a.nav-link,
footer #menu-footer-menu li.current_page_item a.nav-link:hover,
footer #menu-footer-menu li a.nav-link:hover {
color: white;
}
#ninew {
opacity: 0.75;
}
.footer-legal .notices a:hover,
a#ninew:hover {
opacity: 1;
color: white !important;
}
/* Back to top */
#scrollToTopBtn {
border: none;
cursor: pointer;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: transparent;
width: 62px;
height: 62px;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
color: var(--THEME-COLOR-BLUE4);
border-radius: 12px 12px 0 0;
}
#scrollToTopBtn:hover {
color: var(--THEME-COLOR-BLUE1);
background-color: var(--THEME-COLOR-BLUE10);
}
#scrollToTopBtn svg {
transition: all 0.25s ease-out;
}
#scrollToTopBtn:hover svg {
transform: translateY(-0.5rem);
}
/* News */
h1.section-title {
font-size: clamp(2.75rem, 4.25vw, 4.5rem);
line-height: 1;
}
ul.categories {
text-transform: uppercase;
font-size: 1em;
letter-spacing: 0.5px;
font-weight: 600;
}
ul.categories li {
opacity: 0.5;
}
ul.categories li:first-child {
opacity: 1;
}
.card {
border-radius: 0;
border-color: transparent;
}
.card-img-wrapper {
position: relative;
}
.card-img-wrapper::after {
position: absolute;
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 60%,
rgba(0, 0, 0, 0.25) 100%
)
no-repeat center center scroll;
}
.card-img-wrapper.no-img::after {
background: none;
}
.card .card-img-top {
position: absolute;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 0;
}
.card .card-body {
display: flex;
flex-direction: column;
padding-bottom: 0;
}
.card h3 {
font-size: 1.25rem;
}
.card p.card-text {
display: none;
}
.posts .card {
background-color: transparent;
height: 100%;
border: none;
}
.posts .card-img-wrapper {
background: #f2f2f2;
aspect-ratio: 3 / 2;
}
.posts h2 {
text-transform: uppercase;
font-size: calc(1.35rem + 0.5vw);
}
.card-img-wrapper:not(.no-img) img:after {
position: absolute;
content: '';
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.post-meta {
font-weight: 600;
opacity: 0.75;
z-index: 2;
}
.post-date {
text-transform: uppercase;
font-size: 0.8em;
white-space: nowrap;
}
.post-cat-list {
margin-bottom: 0;
font-size: 0.8em;
font-weight: 500;
}
.post-date + .post-cat-list {
padding-left: 0.5rem;
margin: 0 0 0 0.5rem;
position: relative;
}
.post-date + .post-cat-list:before {
content: '';
border-left: 1px solid #333;
left: 0;
top: -1px;
bottom: -1px;
position: absolute;
}
/* Calendar */
.event {
margin: 0 auto;
gap: 1rem;
/* background-color: var(--THEME-COLOR-BLUE11); */
background-repeat: no-repeat;
background-image: url(../svg/gradient_01.svg);
background-size: cover;
background-position: 0px 40%;
color: #eee;
padding: 2rem 1rem 50px;
position: relative;
overflow: hidden;
align-items: center;
}
.event-map {
font-size: 10rem;
line-height: 1;
color: rgba(255, 255, 255, 0.125);
margin-left: auto;
}
.event h2,
.home .event h3 {
font-size: calc(2rem + 1vw);
}
.home .event h3 {
display: flex;
gap: 1rem;
align-items: baseline;
flex-wrap: wrap;
}
.home .event-info {
position: relative;
display: flex;
flex-grow: 1;
flex-wrap: wrap;
align-items: stretch;
gap: 2rem;
}
@media (min-width: 768px) {
.home .event-info {
flex-wrap: nowrap;
}
.event-map {
margin-left: 0;
}
}
.event-meta {
white-space: nowrap;
font-size: 1.25rem;
font-weight: 500;
vertical-align: super;
}
@media (min-width: 600px) {
.event-meta {
display: inline;
}
}
.event-lineup {
opacity: 0.75;
font-weight: 500;
line-height: 1.4;
min-height: 1px;
}
.event-header + .event-lineup {
margin-top: 0.5rem;
}
.event-lineup > div + div {
margin-top: 0.5rem;
}
.event-lineup > div {
margin-bottom: 0.125rem;
}
.event-lineup span {
font-weight: 700;
text-transform: uppercase;
margin-right: 0.5rem;
}
.event-lineup ul {
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 0 5px;
}
.season-timeline .event-lineup ul {
display: block;
gap: unset;
margin-block: auto;
}
.event-lineup li {
font-size: calc(1rem + 0.125vw);
line-height: 1.1;
margin-bottom: 0.5rem;
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.season-timeline .event-lineup li {
justify-content: center;
line-height: 1.25;
}
@media (min-width: 400px) {
.season-timeline .event-lineup li {
justify-content: start;
}
}
.event-lineup li a {
color: #fff;
border: none;
}
.event-lineup li span {
font-weight: 400;
text-transform: none;
margin-right: 0;
font-size: 0.9em;
}
.event-link {
margin: 0rem auto 0 0;
position: relative;
max-width: 90%;
}
.event-link .btn {
padding: 1rem calc(1rem + 1vw);
display: flex;
align-items: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: auto 0;
}
.event-link .btn svg {
flex-shrink: 0;
}
/* Homepage calendar */
#calendar h2.section-title {
margin-bottom: 1.125rem;
font-size: calc(1.5em + 1vw);
}
#calendar .event:before {
position: absolute;
width: 580px;
transform: rotate(-40deg);
right: 0;
}
#calendar .event {
align-items: normal;
padding: 2.25rem 0 1.25rem 2vw;
}
.home .event-link {
margin-top: auto;
}
.home .event-lineup {
opacity: 1;
margin-inline: auto;
margin-block: auto;
padding-bottom: 1rem;
width: 100%;
}
@media (min-width: 992px) {
.home .event-lineup {
margin-inline: auto 0;
width: min-content;
}
}
.home .event-lineup ul {
margin-bottom: 0;
align-items: stretch;
gap: 0.75rem 0;
flex-wrap: nowrap;
}
.home .event .swiper-button-next,
.home .event .swiper-button-prev {
margin: 0;
top: auto;
bottom: 0;
width: 2.5rem;
height: 2.5rem;
left: auto;
right: 2.5rem;
}
.home .event .swiper-button-next {
right: 0;
}
.home .event .swiper-button-next:after,
.home .event .swiper-button-prev:after {
font-size: 1rem;
}
.home .event-lineup li {
margin: 0;
flex-basis: 75px;
}
.home .event-lineup li::after {
content: none;
}
.home .event-lineup li a {
align-items: center;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.home .event-lineup li a:focus,
.home .event-lineup li a:hover {
border-bottom: none;
}
.home .event-lineup li img {
width: 75px;
height: 75px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 100vw;
}
.home .event-lineup li small {
white-space: nowrap;
}
.starting-bib {
font-size: 0.85em;
font-weight: 700;
line-height: 1.15;
background: rgb(255 255 255 / 95%);
border-radius: 1px;
color: #000;
padding: 0 4px;
min-width: 30px;
text-align: center;
position: relative;
}
.home .event-lineup .starting-bib {
position: absolute;
right: 0;
top: 55px;
margin-left: 0;
font-size: 0.95em;
}
@media (min-width: 1400px) {
.home .event-lineup li {
flex-basis: 100px;
}
.home .event-lineup li img {
width: 100px;
height: 100px;
}
.home .event-lineup .starting-bib {
right: -2%;
top: 75px;
}
}
#calendar .event + .event {
margin-top: calc(1rem + 1vw);
}
#calendar .event + h2 {
margin-top: calc(1rem + 2vw);
}
#calendar .event + h2 + .event {
margin-bottom: calc(1rem + 1vw);
}
.home .event .event-link a,
.home .event .event-link a,
.home .event .event-link a {
padding: 0.75rem calc(1rem + 0.5vw);
font-weight: 700;
}
.home .giro.event .event-link a,
.home .giro-ditalia.event .event-link a,
.home .tour-of-italy.event .event-link a {
color: #fff !important;
border-color: #f17c8f !important;
background: #f17c8f;
}
.home .le-tour-de-france .event-link a,
.home .le-tour.event .event-link a,
.home .tour-de-france.event .event-link a {
color: #111 !important;
border-color: #f2dd54 !important;
background: #f2dd54;
}
.home .tour-of-spain.event .event-link a,
.home .la-vuelta-a-espana.event .event-link a,
.home .vuelta-ciclista-a-espana.event .event-link a,
.home .la-vuelta-ciclista-a-espana.event .event-link a,
.home .vuelta.event .event-link a,
.home .vuelta-espana.event .event-link a,
.home .vuelta-a-espana.event .event-link a {
color: #fff !important;
border-color: #e41b13 !important;
background: #e41b13;
}
@media (min-width: 992px) {
.event {
justify-content: stretch;
padding: 1rem calc(3rem + 2vw) 1.5rem 1rem;
min-height: 200px;
}
.event-map {
font-size: 8rem;
text-align: center;
}
}
@media (min-width: 1500px) {
.event-map {
font-size: 12rem;
}
}
/* Youtube videos strip */
#videos {
margin: 0 0 3rem;
padding: 0;
display: block;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
.video-grid .swiper-slide + .swiper-slide:before {
width: 34px;
content: '';
position: absolute;
top: 82px;
right: 100%;
border-bottom: 2px solid #333;
}
.video-grid .swiper-slide a {
display: block;
width: 100%;
height: 100%;
}
.video-grid .swiper-slide {
width: 300px;
max-width: 85vw;
}
.video-slide-wrapper {
position: relative;
background-color: white;
}
.video-slide-wrapper svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-grid img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
aspect-ratio: 1.8;
}
.video-grid h4 {
margin-top: 1rem;
}
.video-grid h4 + div {
font-weight: 500;
font-size: 1rem;
}
.duration {
font-family: monospace;
font-size: 1rem;
position: absolute;
bottom: 10px;
font-weight: 700;
right: 10px;
color: white;
background: rgba(0, 0, 0, 0.65);
padding: 0px 4px;
}
/* Season */
.season-timeline .swiper.events-swiper {
margin-bottom: 3rem;
}
.conti .season-timeline .swiper.events-swiper {
margin-bottom: 0;
}
.season-timeline .swiper .event {
width: 350px;
max-width: 90vw;
height: auto;
min-height: 350px;
font-weight: 500;
font-size: 1.125rem;
position: relative;
padding: 0;
background-color: var(--THEME-COLOR-BLUE9);
background: none;
margin: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.season-timeline .swiper .slide-event-inner {
background-repeat: no-repeat;
background-image: url(../svg/gradient_01.svg);
background-size: cover;
background-position: 0px 40%;
color: #eee;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.season-timeline .swiper .event-body {
width: 100%;
padding: calc(1.5rem + 0.5vw) 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 0.125rem;
flex-grow: 1;
position: relative;
overflow: hidden;
}
.season-timeline .swiper .event-body:last-child {
/* padding-bottom: 0.75rem; */
}
.season-timeline .swiper .event-body .badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0;
}
.season-timeline .swiper ul.event-result {
margin-bottom: 0;
margin-top: auto;
}
.season-timeline .swiper .event.has-lineup:not(.today-event):not(.past-event) {
width: 500px;
}
.season-timeline
.swiper
.past-event
+ .event.has-lineup:not(.today-event):not(.past-event),
.season-timeline .swiper .event.today-event.has-lineup {
/* width: 768px; */
min-height: 450px;
}
.season-timeline
.swiper
.past-event
+ .event.has-lineup:not(.today-event):not(.past-event)
.event-lineup
li,
.season-timeline .swiper .event.today-event.has-lineup .event-lineup li {
font-size: calc(0.85rem + 0.25vw);
}
.season-timeline
.swiper
.past-event
+ .event.has-lineup:not(.today-event):not(.past-event)
h2,
.season-timeline .swiper .event.today-event.has-lineup h2 {
font-size: calc(1.5rem + 1vw);
}
.season-timeline
.swiper
.past-event
+ .event:not(.today-event):not(.past-event):not(.has-lineup),
.season-timeline .swiper .event.today-event.has-lineup {
/* width: 450px; */
min-height: 350px;
}
@media (min-width: 1200px) {
.season-timeline
.swiper
.past-event
+ .event:not(.today-event):not(.past-event):not(.has-lineup),
.season-timeline .swiper .event.today-event.has-lineup {
/* min-width: 450px; */
/* min-height: 450px; */
/* padding: 2rem 2rem 1rem; */
}
.season-timeline
.swiper
.past-event
+ .event.has-lineup:not(.today-event):not(.past-event)
i.mg,
.season-timeline .swiper .event.today-event.has-lineup i.mg {
font-size: 21rem;
}
}
.season-timeline .event.camp-event {
/* border-radius: 60px; */
background: var(--THEME-COLOR-BLUE);
}
.season-timeline .event.past-event {
transition: opacity 0.3s ease-out;
}
.season-timeline .event.past-event,
.season-timeline .event.today-event {
width: 450px;
}
.season-timeline .event.past-event:hover {
opacity: 1;
}
.season-timeline .event i.mg {
font-size: 13rem;
color: rgba(255, 255, 255, 0.125);
position: absolute;
bottom: 0;
place-content: center;
right: 1rem;
margin: 0;
width: 1em;
}
.season-timeline .swiper .event.today-event .event-lineup ul {
display: block;
flex-direction: column;
}
.season-timeline .swiper .event.today-event .event-lineup li {
font-size: calc(1rem + 0.25vw);
}
.swiper-slide.giro h6,
.swiper-slide.giro-ditalia h6,
.swiper-slide.tour-of-italy h6,
.swiper-slide.le-tour-de-france h6,
.swiper-slide.le-tour h6,
.swiper-slide.tour-de-france h6,
.swiper-slide.tour-of-spain h6,
.swiper-slide.vuelta-a-espana h6,
.swiper-slide.vuelta-ciclista-a-espana h6,
.swiper-slide.la-vuelta-a-espana h6,
.swiper-slide.la-vuelta-ciclista-a-espana h6,
.swiper-slide.vuelta h6,
.swiper-slide.vuelta-espana h6,
.swiper-slide.vuelta-a-espana h6 {
color: #fff !important;
font-weight: 600 !important;
padding: 6px 2px;
}
.swiper-slide.le-tour-de-france h6,
.swiper-slide.le-tour h6,
.swiper-slide.tour-de-france h6 {
color: #111 !important;
background: #f2dd54;
}
.le-tour-de-france i.mg,
.tour-de-france i.mg,
.le-tour i.mg {
color: #f2dd54 !important;
opacity: 0.65;
font-weight: 500 !important;
padding: 5px 0;
}
.swiper-slide.giro h6,
.swiper-slide.giro-ditalia h6,
.swiper-slide.tour-of-italy h6 {
color: #fff !important;
background: #f17c8f;
}
.tour-of-italy i.mg,
.giro i.mg,
.giro-ditalia i.mg,
.giro-d-italia i.mg {
color: #f17c8f !important;
opacity: 0.65;
font-weight: 500 !important;
padding: 5px 0;
}
.swiper-slide.tour-of-spain h6,
.swiper-slide.vuelta-a-espana h6,
.swiper-slide.vuelta-ciclista-a-espana h6,
.swiper-slide.la-vuelta-a-espana h6,
.swiper-slide.la-vuelta-ciclista-a-espana h6,
.swiper-slide.vuelta h6,
.swiper-slide.vuelta-espana h6,
.swiper-slide.vuelta-a-espana h6 {
color: #fff !important;
background: #e41b13;
}
.tour-of-spain i.mg,
.vuelta-a-espana i.mg,
.vuelta-ciclista-a-espana i.mg,
.la-vuelta-ciclista-a-espana i.mg,
.la-vuelta-a-espana i.mg,
.vuelta i.mg,
.vuelta-espana i.mg,
.vuelta-a-espana i.mg {
color: #e41b13 !important;
opacity: 0.65;
font-weight: 500 !important;
padding: 5px 0;
}
.event > .badge {
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
border-radius: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.season-timeline .event h2 {
font-size: calc(1.65rem + 0.25vw);
z-index: 1;
position: relative;
margin: 0 0 0.25rem;
line-height: 1;
}
.season-timeline .today-event h2 {
font-size: calc(2.125rem + 0.25vw);
}
.event .event-logo {
width: 75px;
height: 75px;
}
.season-timeline .event .event-meta {
font-size: 1.125rem;
margin-left: 0;
font-weight: 600px;
}
.season-timeline .event .event-lineup {
opacity: 1;
z-index: 1;
max-width: 100%;
display: flex;
margin-top: calc(0.5rem + 0.5vw);
}
.season-timeline .event .event-lineup h5 {
margin: 0 0 0.25rem;
}
.season-timeline .past-event .event-lineup {
opacity: 0.75;
}
.season-event-results li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
/* flex-wrap: wrap; */
gap: 0.25rem 0.5rem;
color: #fff;
border: none;
font-size: 1em;
line-height: 1.2;
padding: 1rem 0.5rem;
width: 100%;
background: rgba(0, 0, 0, 0.3);
}
.season-event-results li + li {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.single-race-event .season-event-results li,
.season-event-results li:first-child:last-child {
justify-content: center;
}
.season-event-results li:has(img) {
padding-block: 0.5rem;
}
.stage:nth-child(even) {
background: rgba(0, 0, 0, 0.5);
}
.season-event-results li a {
display: flex;
align-items: center;
}
.season-event-results li a.report-link svg.bi-file-earmark-richtext {
width: calc(18px + 0.25vw);
}
.resultnrider {
justify-content: flex-start;
display: flex;
align-items: center;
flex-grow: 1;
gap: 0.5rem;
margin-inline: auto;
width: 100%;
}
.resultnrider > div.d-xl-flex:first-child {
min-width: 60px;
}
.resultnrider:first-child:last-child {
justify-content: center;
}
ul.season-event-results {
display: flex;
flex-direction: column;
padding-block: calc(0.5rem + 0.25vw);
margin-block: auto;
}
.stage a.season-event-result-rider {
display: flex;
gap: 0.5rem;
align-items: center;
margin-left: 0;
color: inherit;
font-weight: 600;
}
.stage a.season-event-result-rider:hover {
text-decoration: underline;
}
.stage + .stage {
margin-top: 0;
}
.result-row-result {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.125rem 0.5rem;
}
.stage h4 {
color: white;
font-size: 1rem;
font-weight: 700;
margin: 0;
white-space: nowrap;
}
.stage h3 {
color: rgba(255, 255, 255, 1);
font-size: 1rem;
margin-right: 1rem;
white-space: nowrap;
}
.season-event-result-name {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 0.3px;
font-weight: 700;
text-align: center;
}
.season-event-result-rider {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.5rem;
font-size: 0.95em;
}
.season-event-result-rider img {
width: 35px;
height: 35px;
aspect-ratio: 1;
border-radius: 100vw;
object-fit: cover;
}
@media (min-width: 500px) {
.result-row-result {
flex-direction: row;
justify-content: flex-start;
}
.resultnrider {
width: auto;
}
.season-event-results li {
padding-inline: 1.5rem 1rem;
}
.season-event-results li a.report-link {
min-width: 40px;
}
.season-event-results li:not(:has(a.report-link)) {
/* padding-right: calc(40px + 1rem + 1.5rem); */
}
.multi-race-event .stage {
flex-wrap: nowrap;
}
div ul.season-event-results:has(li:not(:first-child)) {
padding-left: 0;
}
.season-event-result-rider {
text-align: start;
}
}
@media (min-width: 992px) {
.season-event-results li {
flex-wrap: nowrap;
}
.season-event-result-rider img {
width: 45px;
height: 45px;
}
}
.stage:has(h4) .season-event-result-rider:has(img) {
/* width: min-content; */
}
.season-event-link {
display: flex;
justify-content: flex-end;
align-self: stretch;
margin-top: auto;
}
.season-event-link a {
/* color: #ddd; */
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
line-height: 1.25;
white-space: nowrap;
text-transform: uppercase;
width: 100%;
font-size: 0.95rem;
z-index: 1;
gap: 3px;
}
.season-event-report-link {
display: flex;
justify-content: flex-end;
align-items: center;
}
.season-event-report-link a {
white-space: nowrap;
text-transform: uppercase;
text-align: right;
padding: 0.75rem 0;
justify-content: end;
font-size: 1.1rem;
font-weight: 700;
color: #000;
}
.season-event-link a:hover {
color: #fff;
}
.single-race-event .season-event-link a:hover {
color: #000;
}
a.hover-slide svg,
.season-event-link a svg {
transition: all 0.25s ease;
flex-shrink: 0;
}
a.hover-slide:hover svg,
.season-event-link a:hover svg {
transform: translateX(0.25rem);
}
.season-timeline .events-nav .swiper-button-next:not(.swiper-button-disabled),
.season-timeline .events-nav .swiper-button-prev:not(.swiper-button-disabled) {
height: 3rem;
}
.events-nav {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
@media (min-width: 992px) {
.events-nav {
justify-content: flex-end;
gap: 1rem;
}
}
.events-nav .swiper-button-next,
.events-nav .swiper-button-prev {
position: relative;
background-color: white;
width: 116px;
margin: 0;
left: auto;
right: auto;
opacity: 0.75;
z-index: 0;
}
.events-nav .swiper-button-next:after,
.events-nav .swiper-button-prev:after {
color: #333;
display: flex;
align-items: center;
justify-content: center;
width: 116px;
height: 48px;
content: url('data:image/svg+xml;charset=UTF-8,');
}
.events-nav .swiper-button-prev:after {
content: url('data:image/svg+xml;charset=UTF-8,');
}
.swiper.months-swiper {
padding-top: 20px;
margin-bottom: 50px;
}
.swiper.months-swiper,
.months-swiper .swiper-wrapper {
overflow: visible;
}
.months-swiper .swiper-slide {
width: 1.125rem;
text-align: center;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
padding-top: 1rem;
}
.months-swiper .swiper-slide:hover {
cursor: pointer;
}
.swiper-month-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: 0.5;
cursor: pointer;
background-color: var(--THEME-COLOR-DARKEST);
margin: auto;
}
.months-swiper .swiper-slide h6 {
font-size: 0.95rem;
letter-spacing: -0.2px;
font-weight: 400;
text-transform: lowercase;
white-space: nowrap;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
margin: 0 6px 0 8px;
transition: all 0.2s ease;
}
.months-swiper .swiper-slide h6 svg {
margin-left: -0.75rem;
}
.months-swiper .swiper-slide h6 svg:first-child {
margin-top: 0.25rem;
}
.months-swiper .swiper-slide:hover h6,
.months-swiper .swiper-slide.swiper-slide-thumb-active h6 {
font-weight: 600;
}
.months-swiper .swiper-slide.today-event .swiper-month-bullet,
.months-swiper .swiper-slide .swiper-month-bullet:hover,
.months-swiper .swiper-slide.swiper-slide-thumb-active .swiper-month-bullet {
opacity: 1;
}
.months-swiper .swiper-slide.swiper-slide-thumb-active .swiper-month-bullet {
background-color: var(--THEME-COLOR-DARKEST);
box-shadow: 0px 0px 0px 3px var(--THEME-COLOR-DARKEST) !important;
}
.months-swiper .swiper-slide.first-of-month-slide {
margin-left: 10px;
}
.months-swiper .swiper-slide.past-event .swiper-month-bullet {
background-color: var(--THEME-COLOR-BLUE3);
}
.months-swiper .swiper-slide.first-of-month-slide:before {
content: '';
position: absolute;
left: -1px;
top: 0;
height: 1.5rem;
border-left: 1px solid #aaa;
padding-left: 20px;
}
.months-swiper .swiper-slide.first-of-month-slide:after {
content: attr(data-title);
top: 25%;
font-size: 1.05rem;
text-transform: uppercase;
font-weight: 600;
position: absolute;
left: -5px;
top: -1.5rem;
letter-spacing: 1px;
}
.months-swiper .swiper-slide:empty {
width: 0;
}
/* Results */
.stats {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 1rem 2rem;
flex-grow: 1;
padding: 3rem 0;
margin-bottom: 3rem;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
text-align: center;
}
.stat {
width: calc(175px + 3vw);
max-width: 100%;
}
.stat-value {
font-weight: 800;
font-size: calc(3.5rem + 2vw);
line-height: 1;
}
.stat-name {
font-weight: 800;
font-size: 1.5rem;
line-height: 1.25;
letter-spacing: 0.3px;
text-transform: uppercase;
width: min-content;
margin: auto;
}
.stat-races {
margin-top: 0.75rem;
font-size: 1.1rem;
}
.stat ul {
margin-top: 1rem;
}
.stat li {
font-size: 0.85em;
padding: 0.25rem 0;
line-height: 1.25;
}
.stat li div {
font-weight: 600;
}
/* featured rider */
#feat-rider {
background-image: linear-gradient(180deg, #f4f4f4, hsla(0, 0%, 95.7%, 0));
}
.feat-rider {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(10, 1fr);
}
.feat-rider #warped {
width: 210px;
height: 206px;
left: calc(50% - 105px);
top: -120px;
transform: rotate(-15deg) scale(0.8);
}
.feat-rider h2 {
grid-column: 2 / -1;
grid-row: 2 / span 1;
font-size: calc(2.75rem + 1vw);
line-height: 1;
}
.feat-rider-list {
grid-column: 2 / -1;
grid-row: 3 / 6;
background: rgba(255, 255, 255, 0.85);
z-index: 0;
padding: 1rem 1rem 0.75rem 1rem;
font-weight: 400;
font-size: 1em;
}
.feat-rider-list p {
margin-bottom: 0.125rem;
}
.feat-rider-img {
grid-column: 1 / -1;
grid-row: 5 / -1;
}
.feat-rider-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 768px) {
.feat-rider h2 {
grid-column: 3 / -1;
}
.feat-rider-list {
grid-column: 3 / -1;
}
.feat-rider-img {
grid-column: 1 / 12;
}
}
@media (min-width: 992px) {
.feat-rider #warped {
left: 3%;
transform: rotate(-15deg) scale(1);
}
.feat-rider h2 {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
}
.feat-rider-list {
grid-column: 2 / span 3;
grid-row: 5 / -1;
background: none;
}
.feat-rider-list p {
margin-bottom: 0.75rem;
}
.feat-rider-img {
grid-column: 5 / -1;
grid-row: 2 / -1;
}
}
@media (min-width: 1200px) {
.feat-rider {
grid-template-rows: repeat(12, 1fr);
}
.feat-rider #warped {
left: calc(4% + 35px);
top: 30px;
transform: rotate(-15deg) scale(1.125);
}
.feat-rider h2 {
grid-column: 1 / span 3;
grid-row: 5 / span 3;
font-size: calc(2.75rem + 1vw);
margin: 0;
}
.feat-rider-list {
grid-column: 1 / span 3;
grid-row: 8 / -1;
padding: 1rem 1rem 0.5rem 0;
}
.feat-rider-img {
grid-column: 4 / -1;
grid-row: 3 / -1;
}
}
@media (min-width: 1500px) {
.feat-rider {
gap: 0 2rem;
}
.feat-rider #warped {
left: calc(4% + 35px);
top: 150px;
transform: rotate(-15deg) scale(1.125);
}
.feat-rider h2 {
grid-column: 1 / 4;
grid-row: 7 / span 2;
margin: auto 0 1.5rem;
}
.feat-rider-list {
grid-column: 1 / 4;
grid-row: 9 / -1;
font-size: 1.1em;
}
}
.gradient-item {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
180deg,
transparent,
rgba(0, 0, 0, 0.04) 65%,
#000
);
}
/* Roster */
.logo-badge {
max-width: 75%;
width: 240px;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-content: center;
border: 0px solid #eee;
transform: rotate(-45deg);
z-index: 1;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
.logo-badge img {
max-width: 90%;
margin: auto;
transform: rotate(45deg);
}
.roster {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 6rem;
}
.roster.secondary-roster {
/* grid-template-columns: repeat(2, 1fr); */
}
@media (min-width: 400px) {
.roster {
display: grid;
grid-template-columns: repeat(2, minmax(calc(200px - 1rem), 1fr));
}
}
@media (min-width: 576px) {
.roster,
.roster.secondary-roster {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.roster {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 825px) {
.roster.secondary-roster {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 992px) {
.roster {
grid-template-columns: repeat(4, 1fr);
}
.roster.secondary-roster {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1200px) {
.roster {
grid-template-columns: repeat(3, 1fr);
}
.roster.secondary-roster {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1440px) {
.roster {
grid-template-columns: repeat(4, 1fr);
}
.roster.secondary-roster {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1750px) {
.roster {
grid-template-columns: repeat(5, 1fr);
}
.roster.secondary-roster {
grid-template-columns: repeat(6, 1fr);
}
}
.teammb,
.teammb::after {
position: relative;
aspect-ratio: 2 / 2.5;
background-color: var(--THEME-COLOR-DARKEST);
}
.teammb {
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
position: relative;
will-change: transform;
width: 240px;
max-width: 100%;
}
@media (min-width: 400px) {
.teammb {
width: 100%;
}
}
.teammb img.rider-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top center;
object-position: top center;
position: absolute;
transition: all 0.2s ease-out;
}
.teammb.staff.has-longtext:hover img.rider-img,
.roster:not(.secondary-roster):not(.israeli-roster)
.teammb.rider:hover
img.rider-img {
transform: scale(1.05125);
}
.teammb-name {
color: white;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: calc(1.5rem + 0.25vw);
line-height: 0.8;
font-weight: 800;
text-transform: uppercase;
padding-right: 2.75rem;
display: block;
margin-bottom: 4px;
}
a.teammb-name:hover {
color: white;
}
.card-staffmb-info .teammb-name {
/* font-size: calc(1.5rem + .125vw); */
}
.teammb-card-specialty {
text-transform: uppercase;
font-size: 1.25rem;
color: white;
position: relative;
left: 0;
line-height: 1.125;
font-weight: 600;
margin-bottom: 0.125rem;
}
.rider-spec span,
.teammb-card-specialty span {
text-transform: lowercase;
font-size: 0.9em;
}
.secondary-roster .teammb-card-specialty,
.card-staffmb-info .teammb-card-specialty {
font-size: calc(0.8rem + 0.125vw);
}
.secondary-roster .teammb-name {
/* font-size: calc(1.5rem + .125vw); */
}
.join_leave span + span:before {
content: ' - ';
}
.rider-country {
text-transform: uppercase;
font-size: 0.7em;
margin-left: 1rem;
font-weight: 500;
}
.teammb p {
font-size: 1.25rem;
margin: 0;
font-weight: 500;
}
.teammb-name svg {
position: absolute;
right: 0;
bottom: 0rem;
}
/* Staff */
.department-row {
margin-bottom: 2rem;
}
.department-row .swiper {
width: 100%;
height: calc((215px * 1.3333));
padding-left: 75px;
display: flex;
padding-bottom: 0rem;
}
.department-row .swiper-slide {
width: 225px;
}
.swiper-pagination-fraction {
font-weight: 700;
font-size: 1.25rem;
}
.teammb.staff {
background: #f2f2f2;
/* width: 215px;
max-width: 90%; */
color: white;
}
.department-row-header {
background: #fff;
border-left: 3px solid #333;
max-width: 90%;
padding-bottom: 2rem;
margin-right: 0 !important;
width: 75px;
position: absolute;
left: 0;
height: 100%;
z-index: 999;
}
.department-row-header > div:first-child {
color: black;
line-height: 1;
padding: 0 5px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 1.25em;
letter-spacing: 0.3px;
transform: rotate(180deg);
height: calc(100% - 94px);
width: 100%;
display: grid;
align-content: center;
top: 0;
left: 0;
position: absolute;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: right;
}
.department-row-header .events-nav {
bottom: 10px;
position: absolute;
top: auto;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 0.5rem;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.department-row-header .events-nav .swiper-button-next,
.department-row-header .events-nav .swiper-button-prev {
width: 100%;
padding: 0;
height: auto;
border: none;
background-color: transparent;
}
.department-row-header .events-nav .swiper-button-next:after,
.department-row-header .events-nav .swiper-button-prev:after {
width: 100%;
height: 28px;
content: 'next';
font-size: 1.25rem;
}
.department-row-header .events-nav .swiper-button-prev:after {
content: 'prev';
}
.teammb.missing {
background: #0f1116;
/* background-image: url('images/vectors_ISRAEL PREMIER TECH_2-09.svg'); */
background-size: 200%;
background-position: 30% center;
background-repeat: no-repeat;
}
.teammb-card-nationality {
z-index: 1;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
color: white;
position: absolute;
right: 20px;
top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.teammb-card-nationality .flag-icon {
width: 1.33333333em;
}
.card-rider-info,
.card-staffmb-info {
z-index: 2;
margin: 0 0 0 4px;
max-width: calc(100% - 8px);
}
.card-rider-info .joined_left {
text-transform: none;
position: absolute;
top: 0.75rem;
left: 0.75rem;
line-height: 1.2;
font-size: 0.95rem;
font-weight: 600;
color: white;
}
.card-rider-info .joined_left div + div {
margin-top: 0.75rem;
}
.teammb.staff a.card-modal-btn {
z-index: 1;
background-color: var(--THEME-COLOR-DARKEST);
color: white;
margin-top: auto;
width: 3.5rem;
height: 2.75rem;
margin-top: auto;
display: grid;
align-items: center;
flex-shrink: 0;
text-align: left;
padding-left: 0.75rem;
}
/* Swiper Nav */
.swiper-button-next,
.swiper-button-prev {
background-color: var(--THEME-COLOR-DARK);
left: 0;
right: auto;
width: 3rem;
height: 3rem;
top: calc(50% - 1.5rem);
bottom: 0;
opacity: 0.75;
}
.swiper:hover .swiper-button-next:not(.swiper-button-disabled),
.swiper:hover .swiper-button-prev:not(.swiper-button-disabled) {
opacity: 1;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.25;
}
.swiper-button-next {
left: auto;
right: 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
color: white;
font-size: 1.125rem;
}
.swiper-pagination-bullet {
opacity: 0.3;
}
.swiper-pagination-bullet-active {
opacity: 1;
background-color: var(--THEME-COLOR-DARKEST);
}
.swiper-pagination-fraction {
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 2px;
font-size: 1.6rem;
font-family: 'Saira Condensed', sans-serif;
bottom: -20px;
color: rgba(0, 0, 0, 0.35);
}
span.swiper-pagination-current {
font-size: 2.25em;
font-weight: 600;
color: var(--THEME-COLOR-DARK);
}
/* Gear */
section#gear {
padding-bottom: calc(2rem + 1vw);
}
#gear .container-esp .container-bg-wrapper,
#shop .container-esp .container-bg-wrapper {
position: relative;
color: white;
padding: 3% 5%;
aspect-ratio: 1;
display: flex;
}
#gear img,
#shop img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
/* Gear & Shop pano */
#gear .container-esp .container-bg-wrapper,
#shop .container-esp .container-bg-wrapper {
aspect-ratio: 1.5;
}
@media (min-width: 576px) {
#gear .container-esp .container-bg-wrapper,
#shop .container-esp .container-bg-wrapper {
aspect-ratio: 1528 / 550;
}
}
@media (min-width: 1650px) {
#gear .container-esp .container-bg-wrapper,
#shop .container-esp .container-bg-wrapper {
min-height: 450px;
}
}
/* Quote */
#quote figure {
text-align: center;
text-transform: uppercase;
position: relative;
padding-block: 3rem;
}
#quote figure:before {
content: '';
position: absolute;
left: 5rem;
top: 1rem;
width: 40%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(197, 48, 48,0)'/%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(67, 65, 144,1)'/%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(213, 63, 140,0)'/%3E%3Ccircle cx='-20' cy='20' r='2' fill='rgba(213, 63, 140,0)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
z-index: 0;
}
#quote figure:before {
left: 0;
top: 0;
width: 100%;
height: 100%;
/* background-image: url('images/vectors_ISRAEL PREMIER TECH_2-09-hr.svg'); */
background-size: cover;
opacity: 0.45;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
#quote blockquote.blockquote {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.15;
text-align: center;
padding: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: auto;
}
#quote blockquote.blockquote p {
font-size: 3.5rem;
font-size: clamp(3.5rem, -0.69672131147541rem + 8.743169398907105vw, 7.5rem);
letter-spacing: -2px;
line-height: 0.9;
display: block;
margin-bottom: 1.75rem;
}
.text-gradient {
background: linear-gradient(
to right,
darkblue,
darkorchid
); /* create bg gradient */
color: transparent; /* hide text fill */
background-clip: text; /* use text as clipping mask for bg */
}
.clipped {
background-image: url(../svg/gradient_01.svg);
background-size: 100%;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: repeat;
background-position: center;
}
#quote blockquote.blockquote::before {
color: #999;
content: open-quote;
font-size: 2em;
left: calc(50% - 22px);
top: -60px;
}
#quote figure .blockquote-footer {
z-index: 1;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: black;
color: white;
margin: 1rem auto 0;
font-weight: 600;
padding: 1px 10px;
letter-spacing: 1px;
font-size: 1.25rem;
}
@media (min-width: 768px) {
#quote blockquote.blockquote::before {
left: -4rem;
top: -3rem;
}
#quote figure {
padding-inline: 3rem;
}
}
.layered-card {
position: relative;
}
.layered-card::before {
background: rgba(0, 0, 0, 0.3);
content: '';
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
/* Social section */
section#social {
overflow: hidden;
padding-bottom: 0;
background: #f4f4f4;
}
#social > div {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
#social ul a {
padding: 0.5rem 1.5rem;
display: inline-block;
}
#social .btn,
#social .form-control {
padding: 0.375rem 0.75rem;
font-size: 1rem;
}
#social .input-group .btn,
#social .input-group .btn:focus {
z-index: 0;
}
.input-group:not(.has-validation)
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-radius: 0;
}
/* Social Footer */
ul.social-footer {
margin-bottom: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
ul.social-footer li a {
padding: 0.75rem 1.125rem;
display: block;
}
@media (min-width: 992px) {
ul.social-footer li:last-child a {
padding-right: 0;
}
}
@media (min-width: 2000px) {
#social > div {
width: var(--REGULAR-CONTAINER-W);
margin-inline: auto;
}
}
/* Instagram */
#instagram {
padding-bottom: 3rem;
}
/* Partners section */
#partners {
z-index: 2;
padding-bottom: 7rem;
background-color: var(--THEME-COLOR-DARKER);
background-image: url(../svg/gradient_01.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
inset: 0;
overflow: hidden;
}
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.gradient-bg {
opacity: 0.75;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
/* --size: 1650px; */
--size: 65vw;
--speed: 50s;
--easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
width: var(--size);
width: 90vw;
height: 90vh;
-webkit-filter: blur(calc(var(--size) / 12));
filter: blur(calc(var(--size) / 12));
background-color: hsla(0, 100%, 50%, 1);
background-image: radial-gradient(
at 96% 71%,
hsla(227, 100%, 13%, 1) 0px,
transparent 50%
),
radial-gradient(at 59% 38%, hsla(210, 100%, 100%, 1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(240, 100%, 63%, 1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343, 100%, 47%, 1) 0px, transparent 50%);
-webkit-animation: rotate var(--speed) var(--easing) alternate infinite;
animation: rotate var(--speed) var(--easing) alternate infinite;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
@media (min-width: 1200px) {
.gradient-bg {
width: 90vw;
height: 60vh;
}
}
#partners .wrapper {
/* background: var(--THEME-COLOR-DARKER); */
color: rgba(255, 255, 255, 0.75);
position: relative;
padding-top: 3rem;
}
#partners .wrapper:last-of-type {
}
#partners .wrapper header {
text-align: center;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-gap: 20px;
opacity: 0.25;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.75em;
font-weight: 600;
margin-bottom: 1rem;
}
#partners .wrapper.title-partners header {
display: none;
}
@supports (display: grid) {
#partners .wrapper header:before,
#partners .wrapper header:after {
content: '';
align-self: center;
border-top: 1px dashed rgba(255, 255, 255, 0.5);
}
}
.top-left {
position: absolute;
transform-origin: top left;
left: 0;
top: 0;
transform: rotate(-90deg) translateX(-100%);
}
#partners .wrapper:not(.title-partners):not(:last-child):before {
width: 200px;
height: 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.21);
position: absolute;
left: 0;
right: 0;
bottom: 1.25rem;
margin: auto;
}
ul.partners {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 1rem;
position: relative;
width: 100%;
}
@media (max-width: 1499px) {
ul.partners {
width: 95vw;
margin: auto;
}
}
@media (min-width: 2000px) {
ul.partners {
max-width: var(--REGULAR-CONTAINER-W, 105rem);
}
}
ul.partners:last-child {
margin: 0 auto;
}
ul.partners li {
display: grid;
place-content: center;
text-align: center;
flex-basis: calc(100% / 2);
min-width: 0;
line-height: 1.2;
padding: 20px;
}
#partners .wrapper:first-child ul.partners li {
padding: 20px;
}
#partners .wrapper:nth-child(2) ul.partners li {
flex-basis: calc(100% / 3);
}
#partners .wrapper:nth-child(3) ul.partners li {
flex-basis: calc(100% / 4);
}
@media (min-width: 450px) {
ul.partners li {
flex-basis: calc(100% / 3);
padding: 20px 40px;
}
#partners .wrapper:nth-child(2) ul.partners li {
flex-basis: calc(100% / 4);
padding: 20px;
}
#partners .wrapper:nth-child(3) ul.partners li {
flex-basis: calc(100% / 5);
padding: 20px;
}
}
@media (min-width: 768px) {
ul.partners li {
flex-basis: calc(100% / 4);
padding: 20px 40px;
}
#partners .wrapper:nth-child(2) ul.partners li {
flex-basis: calc(100% / 5);
}
#partners .wrapper:nth-child(3) ul.partners li {
flex-basis: calc(100% / 6);
}
}
@media (min-width: 1200px) {
#partners .wrapper ul.partners {
justify-content: start;
}
#partners .wrapper:first-of-type:not(:last-of-type) ul.partners,
#partners .wrapper:first-of-type:nth-last-of-type(2) ul.partners {
justify-content: space-evenly;
}
ul.partners li {
flex-basis: calc(100% / 5);
}
#partners .wrapper:nth-child(2) ul.partners li {
flex-basis: calc(100% / 6);
}
#partners .wrapper:nth-child(3) ul.partners li {
flex-basis: calc(100% / 7);
}
}
@media (min-width: 1500px) {
ul.partners li {
flex-basis: calc(100% / 6);
}
#partners .wrapper:nth-child(2) ul.partners li {
flex-basis: calc(100% / 7);
padding: 20px 40px;
}
#partners .wrapper:nth-child(3) ul.partners li {
flex-basis: calc(100% / 8);
padding: 20px 40px;
}
}
ul.partners li > * {
justify-content: center;
align-items: center;
margin: auto;
color: currentColor;
max-width: 210px;
}
ul.partners li > a:hover {
color: #fff;
}
.wrapper:not(.title-partners) ul.partners li > * {
opacity: 0.8;
}
.wrapper:not(.title-partners) ul.partners li > *:hover {
opacity: 1;
}
ul.partners li > * img {
max-width: 100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.wrapper:not(.title-partners) ul.partners li > * img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
max-height: 75px;
}
.wrapper:nth-child(2) ul.partners li img {
max-height: 65px;
}
.wrapper:nth-child(3) ul.partners li img {
max-height: 45px;
}
.partner-label {
font-size: 0.9rem;
margin-top: 1.5rem;
}
#warped {
position: absolute;
display: block;
width: 210px;
height: 206px;
left: 460px;
top: 0px;
transform: rotate(-15deg) scale(1.52);
opacity: 0.5;
}
#warped > span[class^='w']:nth-of-type(n + 0) {
display: block;
position: absolute;
transform-origin: 50% 100%;
}
#warped span {
font-family: 'Barlow Semi Condensed';
font-size: 23px;
font-weight: 800;
font-style: normal;
line-height: 0.55;
white-space: pre;
overflow: visible;
padding: 0px;
}
#warped .w0 {
transform: rotate(4.13rad);
width: 11px;
height: 12px;
left: 36.8px;
top: 134.16px;
}
#warped .w1 {
transform: rotate(4.4rad);
width: 12px;
height: 12px;
left: 27.52px;
top: 115.71px;
}
#warped .w2 {
transform: rotate(4.69rad);
width: 14px;
height: 12px;
left: 23px;
top: 94.07px;
}
#warped .w3 {
transform: rotate(4.99rad);
width: 12px;
height: 12px;
left: 26.89px;
top: 72.34px;
}
#warped .w4 {
transform: rotate(5.27rad);
width: 13px;
height: 12px;
left: 35.18px;
top: 52.8px;
}
#warped .w5 {
transform: rotate(5.57rad);
width: 13px;
height: 12px;
left: 49.5px;
top: 36.21px;
}
#warped .w6 {
transform: rotate(5.85rad);
width: 12px;
height: 12px;
left: 68.06px;
top: 24.67px;
}
#warped .w7 {
transform: rotate(6.14rad);
width: 13px;
height: 12px;
left: 88.14px;
top: 18.71px;
}
#warped .w8 {
transform: rotate(6.38rad);
width: 5px;
height: 12px;
left: 110.09px;
top: 18.38px;
}
#warped .w9 {
transform: rotate(6.62rad);
width: 13px;
height: 12px;
left: 123.61px;
top: 22.33px;
}
#warped .w10 {
transform: rotate(6.87rad);
width: 6px;
height: 12px;
left: 143.61px;
top: 30.6px;
}
#warped .w11 {
transform: rotate(7.11rad);
width: 13px;
height: 12px;
left: 154.08px;
top: 42.65px;
}
#warped .w12 {
transform: rotate(7.4rad);
width: 12px;
height: 12px;
left: 166.55px;
top: 60.42px;
}
#warped .w13 {
transform: rotate(7.69rad);
width: 13px;
height: 12px;
left: 172.51px;
top: 80.85px;
}
/* Team pic */
#team {
min-height: 55vh;
height: 740px;
overflow: hidden;
background-size: cover;
background-position: center 90%;
background-repeat: no-repeat;
margin-bottom: 145px;
padding-bottom: 0;
}
#team img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: bottom;
object-position: bottom;
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#team::before {
content: '';
height: 35%;
left: 0;
position: absolute;
right: 0;
top: 0;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
z-index: 1;
}
/* Mini About Us */
#aboutus .d-grid {
display: grid;
grid-template-columns: 5% repeat(10, 1fr) 5%;
grid-template-rows: 50px repeat(2, auto) 65px;
gap: 1rem 0.5rem;
}
#aboutus .d-grid::before {
content: '';
border-left: 10px solid var(--THEME-COLOR-BLUE9);
border-top: 10px solid var(--THEME-COLOR-BLUE7);
grid-column: 1 / 5;
grid-row: 1;
}
#aboutus .d-grid::after {
content: '';
border-right: 10px solid var(--THEME-COLOR-BLUE9);
border-bottom: 10px solid var(--THEME-COLOR-BLUE7);
grid-column: 8 / 13;
grid-row: 4;
}
#aboutus h1 {
grid-column: 2 / -1;
grid-row: 2;
margin-bottom: 0;
}
#aboutus .lead {
font-size: 1.25rem;
grid-column: 2 / 12;
grid-row: 3;
}
#aboutus .lead p:last-child {
margin: 0;
}
#aboutus .d-grid a {
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
grid-column: 6 / -1;
grid-row: 4;
padding: 0 2rem 1.25rem;
position: relative;
text-align: right;
align-self: flex-end;
white-space: nowrap;
}
@media (min-width: 768px) {
#aboutus .d-grid {
grid-template-columns: 75px repeat(10, 1fr) 75px;
grid-template-rows: 50px repeat(2, auto) 50px;
gap: 1rem;
}
#aboutus .d-grid::before {
grid-column: 1 / 4;
}
#aboutus .d-grid::after {
grid-column: 10 / -1;
}
#aboutus h1 {
grid-column: 2 / span 8;
}
#aboutus .lead {
font-size: 1.5rem;
grid-column: 2 / 12;
}
#aboutus .d-grid a {
grid-column: 10 / -1;
grid-row: 4;
}
}
@media (min-width: 992px) {
#aboutus .d-grid::before {
grid-column: 1 / 4;
}
#aboutus .d-grid::after {
grid-column: 10 / -1;
}
#aboutus h1 {
grid-column: 2 / span 8;
}
#aboutus .lead {
font-size: 1.5rem;
grid-column: 3 / 12;
}
#aboutus .d-grid a {
grid-column: 10 / -1;
grid-row: 4;
}
}
@media (min-width: 1200px) {
#aboutus h1 {
grid-column: 2 / span 9;
}
}
@media (min-width: 1500px) {
#aboutus .d-grid {
grid-template-columns: 100px repeat(10, 1fr) 100px;
grid-template-rows: 65px repeat(2, auto) 75px;
gap: 1rem;
}
#aboutus .d-grid::before {
grid-column: 1 / 3;
}
#aboutus .d-grid::after {
grid-column: 11 / -1;
}
#aboutus .lead {
font-size: 1.5rem;
grid-column: 3 / span 9;
}
#aboutus .d-grid a {
grid-column: 11 / -1;
grid-row: 4;
}
}
.left-header-laser,
.rider-profile-header {
text-align: left;
font-size: 1.5rem;
margin-bottom: 0.75rem;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
@supports (display: grid) {
.left-header-laser:after,
.rider-profile-header:after {
content: '';
align-self: center;
border-top: 2px solid #555;
}
}
/* Single Rider Page Nav */
.rider-nav {
margin: 0 0 calc(2rem + 2.5vw);
display: block;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
width: 100vw;
/* margin-left: 50%;
transform: translateX(-50%); */
z-index: 0;
position: relative;
overflow: hidden;
}
@media (min-width: 992px) {
.rider-nav {
border-top: none;
}
}
.rider-nav a {
font-weight: 500;
font-size: 0.85em;
letter-spacing: 1px;
text-transform: uppercase;
color: #333;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
transition: 0.3s all ease;
}
.rider-nav a.current-rider,
.rider-nav a:hover {
color: #fff;
background-color: var(--THEME-COLOR-DARKEST);
}
/* Single Rider */
section#rider:not(:last-child) {
padding-bottom: 0;
}
@media (max-width: 1199px) {
body.single-rider #main {
padding-inline: 2rem !important;
}
}
.prev-rider,
.next-rider {
position: fixed;
left: 0;
top: 65vh;
font-size: calc(1rem + 0.5vw);
font-weight: 700;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index: 1;
display: flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 6px 0;
border-radius: 0 4px 4px 0;
}
.next-rider {
right: 0;
left: auto;
transform: rotate(0deg);
border-radius: 4px 0 0px 4px;
}
@media (min-width: 1200px) {
.prev-rider {
left: calc(0.125rem + 1vw);
}
.next-rider {
right: calc(0.125rem + 1vw);
left: auto;
}
}
.rider-main {
margin-bottom: calc(1rem + 0.5vw);
}
.rider-header {
text-align: center;
margin-bottom: calc(1.25rem + 1.5vw);
}
.rider-pic,
.rider-info-bloc {
margin-bottom: calc(2rem + 0.5vw);
}
.rider-ds-descr p {
font-size: 1.35em;
line-height: 1.4;
font-style: italic;
margin-bottom: 0;
}
.rider-ds-name {
text-align: right;
margin-right: 2rem;
font-size: 1.1em;
margin-top: 0.5rem;
}
.rider-spot-him {
border: 2px solid #555;
padding: 1rem;
}
.rider-pic img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
width: 100%;
height: auto;
}
ul.social-rider {
color: white;
display: flex;
flex-wrap: wrap;
z-index: 1;
margin: 0.75rem 0;
}
ul.social-rider-maincol {
}
ul.social-rider a {
padding: 0 1rem;
display: inline-block;
}
ul.social-rider li {
margin-bottom: 0;
}
ul.social-rider a svg {
width: 24px;
height: 24px;
}
.rider-nationality {
text-transform: uppercase;
font-weight: 500;
}
.rider-spec {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 1.25em;
}
a.name-audio {
position: relative;
/* bottom: -6px; */
}
.rider-info ul {
-moz-columns: 2;
columns: 2;
padding: 0;
margin: 0;
}
.rider-info > ul li {
margin-bottom: 0.75rem;
line-height: 1.2;
}
.rider-info > ul li:last-child {
margin-bottom: 0;
}
.rider-bio p {
max-width: none;
}
.rider-performance .rider-career-stats,
.rider-performance .rider-results {
margin-bottom: 0.75rem;
}
.rider-performance ul.rider-career-stats {
padding: 0;
margin: 0 0 1rem;
list-style-type: none;
}
ul.rider-career-stats li {
display: inline;
}
ul.rider-career-stats li::after {
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
display: inline-block;
width: 16px;
height: 16px;
margin: 0 0 0 3px;
content: '';
}
ul.rider-career-stats li:last-of-type::after {
content: '';
background: none;
margin: 0;
}
.rider-performance p {
margin: 0;
}
@media (min-width: 992px) {
.rider-spec {
text-align: right;
}
}
.rider-performance .pcs {
margin-top: 0.75rem;
}
.pcs a {
font: 13px tahoma, verdana, arial;
display: flex;
align-items: center;
}
.pcs ul {
opacity: 0.75;
list-style: none;
display: flex;
align-items: center;
padding: 0.25rem;
margin: 0;
transform: scale(0.9);
}
.pcs a:hover ul {
opacity: 1;
}
.pcs .r {
background: linear-gradient(0deg, #e32424 0%, #f03c3c 100%);
color: #f19090;
color: #fff;
}
.pcs .z {
background: linear-gradient(0deg, #3b4b62 0%, #587297 100%);
color: #88b4f3;
color: #272f3d;
color: #fff;
}
.pcs li {
float: left;
width: 20px;
height: 20px;
border-radius: 1px;
margin-right: 2px;
line-height: 20px;
text-align: center;
font-size: 12px;
}
/* Name audio file */
audio#nyan {
display: none;
}
#nyan-btn.btn {
cursor: pointer;
padding: 0.2rem;
background: var(--THEME-COLOR-BLUE4);
border-radius: 4px;
border-width: 0;
color: #fff;
text-transform: none;
font-size: 1rem;
transition: box-shadow 0.25s ease;
line-height: 1;
transform: scale(0.75);
width: 33px;
height: 33px;
}
#nyan-btn.btn:after {
content: url(../svg/volume-up-fill.svg);
}
#nyan-btn.btn.playing:after {
content: url(../svg/pause-fill.svg);
}
/* Posts: smaller grid */
.small-grid.posts {
display: grid;
grid-auto-flow: row;
margin-bottom: calc(2rem + 2vw);
gap: 1rem;
-ms-grid-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.small-grid.posts {
gap: 1.25rem;
-ms-grid-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
}
}
/* Related news */
#relatednews .posts h2 {
font-size: calc(1rem + 0.5vw);
}
#relatednews .card .card-img-top {
height: auto;
-o-object-position: center;
object-position: center;
aspect-ratio: 3 / 2;
}
/* Nav */
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* Tabs & Nav Pills */
.nav-pills {
margin-bottom: 1rem;
}
.tab-content .nav-pills {
border-bottom-color: transparent;
}
.nav-pills .nav-link {
opacity: 0.5;
}
.nav-pills .nav-link > * {
position: relative;
color: #000;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav-pills .nav-link.active > *:after {
width: 100%;
content: '';
position: absolute;
bottom: -1rem;
left: 0;
border-bottom: 2px solid currentColor;
}
.tab-pane .nav-pills .nav-link > * {
position: relative;
font-size: 1.25rem;
}
.tab-pane .nav-pills .nav-link.active > *:after {
bottom: -0.5rem;
}
.nav-pills .nav-link h2 span {
font-size: 0.75em;
}
.nav-pills .nav-link.active {
color: inherit;
background-color: transparent;
opacity: 1;
}
/* Single post */
.single-post .pdf-version {
margin: 4rem 0 3rem;
padding: 1.5rem 1rem;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.single-post #hero {
min-height: 41vh;
}
.hero-content .categories {
display: flex;
gap: 1rem;
}
.hero-content ul.post-categories {
list-style-type: none;
font-size: 0.7em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
padding-left: 0;
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 0.25rem;
}
.single aside {
font-weight: 500;
margin-top: 4rem;
text-align: center;
}
.single aside .widget:not(:last-child) {
margin-bottom: calc(2rem + 1.75vw);
}
.single aside h4 {
font-weight: 500;
opacity: 0.75;
letter-spacing: 1px;
font-size: 1.125rem;
}
aside .share-post {
text-align: center;
}
aside .share-post li a {
padding: 0.5rem 1rem;
display: inline-block;
}
aside .share-post li a.twitter:hover {
color: #55acee;
}
aside .share-post li a.linkedin:hover {
color: #0077b5;
}
aside .share-post li a.facebook:hover {
color: #3b5998;
}
aside .related-riders ul,
aside .related-riders li + li {
margin-top: 1rem;
}
.rider-placeholder {
background-color: #eee;
width: 100px;
height: 100px;
}
aside .related-riders li {
gap: 0.25rem;
align-items: center;
text-align: center;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
}
aside .related-riders li a {
font-size: 0.85em;
font-weight: 500;
}
aside .related-riders li .rider-placeholder,
aside .related-riders li img {
margin-bottom: 0.5rem;
border-radius: 100vw;
}
.post-main {
padding: 1.5rem 0;
}
@media (min-width: 992px) {
.post-main {
padding: 4% 5%;
}
}
/* Comment form */
form#commentform {
max-width: 65ch;
}
/*
Default style for WP-PageNavi plugin
*/
.wp-pagenavi {
margin: 4rem 0;
clear: both;
display: flex;
place-content: center;
font-size: 1.1em;
}
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
padding: 3px 5px;
margin: 2px;
min-width: 25px;
text-align: center;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
background-color: #000;
color: white;
}
.wp-pagenavi span {
font-weight: 500;
}
/* Video embed */
/*Hero Below Image/Vidéo*/
.hero-video:before {
background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hero-video {
position: relative;
overflow: hidden;
background-color: var(--THEME-COLOR-DARKEST);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #eee;
padding-bottom: 56.6%;
}
.responsive-embed {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
/* Modals */
a.card-modal-btn:hover {
cursor: pointer;
}
a svg.spin,
.modal-header .btn-close,
a.card-modal-btn svg {
transition: transform 0.5s ease-out;
}
a:hover svg.spin,
.modal-header .btn-close:hover,
a.card-modal-btn:hover svg {
transform: rotate(230deg);
}
a.card-modal-btn:hover {
background: black;
}
a.card-modal-btn:hover svg {
color: white;
}
.modal .modal-header {
border-bottom: none;
font-weight: 800;
}
.modal .btn-close {
background-size: 40px;
width: 40px;
height: 40px;
opacity: 0.75;
}
.modal .btn-close:hover {
opacity: 1;
}
.modal-body {
background: linear-gradient(0deg, #eee 0, #eee 60%, #fff 0, #fff);
display: grid;
padding-bottom: calc(3rem + 2vw);
}
.modal-body.full-grey {
background: #eee;
}
.page-template-page-our-gear .modal table {
--bs-body-bg: transparent;
}
.page-template-page-our-gear .modal .swiper-slide {
align-content: center;
}
.modal-body .modal-title {
font-size: clamp(2.063rem, 1rem + 3.4vw, 4.188rem);
line-height: 1;
margin-bottom: 2rem;
}
.modal-body .modal-title small {
font-size: 0.5em;
text-transform: capitalize;
}
.modal_featured_image-wrapper {
max-width: calc(1200px + var(--bs-gutter-x));
}
.modal .modal_featured_image {
margin: auto;
width: fit-content;
max-width: 100%;
/* height: auto; */
}
.modal .swiper {
width: 100%;
height: 100%;
padding: 40px 4vw;
align-content: center;
}
.modal .swiper .swiper-button-next,
.modal .swiper .swiper-button-prev {
background-color: transparent;
width: auto;
height: auto;
top: calc(50% - 1.5rem);
bottom: auto;
}
.modal .modal-body .swiper .swiper-button-next:after,
.modal .modal-body .swiper .swiper-button-prev:after {
color: black;
font-size: 4rem;
}
/*Modal videos*/
@-webkit-keyframes modal-video {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modal-video {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes modal-video-inner {
from {
transform: translate(0, 100px);
}
to {
transform: translate(0, 0);
}
}
@keyframes modal-video-inner {
from {
transform: translate(0, 100px);
}
to {
transform: translate(0, 0);
}
}
.modal-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000000;
cursor: pointer;
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-name: modal-video;
animation-name: modal-video;
transition: opacity 0.3s ease-out;
}
.modal-video-close {
opacity: 0;
}
.modal-video-close .modal-video-movie-wrap {
transform: translate(0, 100px);
}
.modal-video-body {
max-width: 940px;
width: 100%;
height: 100%;
margin: 0 auto;
display: table;
}
.modal-video-inner {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.modal-video-movie-wrap {
width: 100%;
height: 0;
position: relative;
padding-bottom: 56.25%;
background-color: #333;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-name: modal-video-inner;
animation-name: modal-video-inner;
transform: translate(0, 0);
transition: transform 0.3s ease-out;
}
.modal-video-movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-video-close-btn {
position: absolute;
z-index: 2;
top: -35px;
right: -35px;
display: inline-block;
width: 35px;
height: 35px;
overflow: hidden;
border: none;
background: transparent;
}
.modal-video-close-btn:before {
transform: rotate(45deg);
}
.modal-video-close-btn:after {
transform: rotate(-45deg);
}
.modal-video-close-btn:before,
.modal-video-close-btn:after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #fff;
border-radius: 5px;
margin-top: -6px;
}
.modal-video {
background-color: rgba(0, 0, 0, 0.8);
}
/*Play button*/
/*.hero-video i {color: #eee;}*/
/*By Arnold Longqueue https://codepen.io/alongequeue */
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.stroke-solid {
stroke-dashoffset: 0;
stroke-dasharray: 300;
stroke-width: 4px;
transition: stroke-dashoffset 1s ease, opacity 1s ease;
}
.icon {
transform: scale(0.8);
transform-origin: 50% 50%;
transition: transform 200ms ease-out;
}
#play {
cursor: pointer;
z-index: 9999;
}
#play:hover .stroke-solid {
opacity: 1;
stroke-dashoffset: 300;
}
#play:hover .icon {
transform: scale(0.9);
}
/* Racing For Change Page */
.racing-for-change #hero {
height: 70vh;
}
/* Our Story Page */
#timeline {
background: white;
position: relative;
z-index: 2;
}
.timeline {
z-index: 1;
position: relative;
}
.timeline .swiper-wrapper {
padding-bottom: 3rem;
}
.timeline .swiper-slide {
width: 950px;
max-width: 85vw;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto repeat(5, 1fr);
}
.timeline .swiper-slide:before {
content: '';
background: var(--THEME-COLOR-DARKER);
grid-column: 1 / -1;
grid-row: 2/-1;
transition: 0.33s all ease;
transition-delay: 0.25s;
}
.timeline .swiper-slide-active:before {
transform: translate(-10px, 10px);
}
.timeline .swiper-slide h3 {
grid-column: 1 / -1;
grid-row: 1 / 2;
font-size: calc(3rem + 0.5vw);
letter-spacing: -1px;
margin: 0;
background: white;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 0rem 2rem 0.5rem 0rem;
}
.timeline-slide-info {
z-index: 2;
position: relative;
grid-column: 1 / -1;
grid-row: 5 / -1;
background: white;
padding: 1rem;
text-align: right;
border-right: 1px solid var(--THEME-COLOR-DARKEST);
border-bottom: 1px solid var(--THEME-COLOR-DARKEST);
}
.timeline .swiper-slide > img {
position: absolute;
width: 100%;
-o-object-position: top;
object-position: top;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
grid-column: 1 / -1;
grid-row: 2 / 5;
height: 100%;
}
.timeline-slide-info h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.timeline-slide-info p {
font-size: 1.125em;
}
.timeline-slide-info p:last-child {
margin: 0;
}
@media (min-width: 992px) {
.timeline .swiper-slide {
grid-template-rows: repeat(7, 1fr);
}
.timeline-slide-info {
grid-column: 1 / 5;
grid-row: 2 / -1;
background: rgba(255, 255, 255, 0.85);
padding: 3rem 2rem;
border-right: none;
border-bottom: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.timeline .swiper-slide > img {
grid-row: 2 / -1;
-o-object-position: center;
object-position: center;
}
}
@media (min-width: 1500px) {
.timeline .swiper-slide {
grid-template-rows: repeat(8, 1fr);
}
.timeline-slide-info {
grid-column: 1 / 5;
grid-row: 2 / -1;
padding: 3rem 2rem;
}
.timeline .swiper-slide > img {
grid-row: 2 / -1;
}
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
background-color: white;
width: 116px;
top: auto;
bottom: 0;
opacity: 0.75;
}
.timeline .swiper-button-next:after,
.timeline .swiper-button-prev:after {
color: #333;
display: flex;
align-items: center;
justify-content: center;
width: 116px;
height: 48px;
content: url('data:image/svg+xml;charset=UTF-8,');
}
.timeline .swiper-button-prev:after {
content: url('data:image/svg+xml;charset=UTF-8,');
}
/* Our Gear Page */
.gear-grid {
width: 100%;
/* border-left: 2px solid #333;
border-bottom: 2px solid #333; */
margin: auto auto 15rem;
}
.gear-grid-item {
height: 350px;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
border: 2px solid #333;
/* border-top: 2px solid #333;
border-right: 2px solid #333; */
overflow: hidden;
margin-bottom: var(--bs-gutter-x);
}
.gear-grid-item .swiper-pagination {
text-align: left;
padding: 0.25rem 1rem;
bottom: 0;
}
.gear-grid__image-wrapper .swiper-slide {
text-align: center;
padding-top: 60px;
height: calc(350px - 4px);
display: flex;
/* flex-direction: column; */
place-content: center;
align-items: center;
}
.gear-grid__image-wrapper .swiper-slide > a {
display: block;
width: 100%;
height: 100%;
}
.gear-grid__image-wrapper .swiper-slide strong {
position: absolute;
right: 1rem;
bottom: 0.5rem;
font-size: 0.85em;
line-height: 1.25;
padding-inline: 0.25rem;
background: white;
}
.gear-grid-item.gear-grid-item-full {
height: 450px;
}
.gear-grid-item.gear-grid-item-full .swiper-slide {
height: calc(450px - 4px);
}
.gear-grid__info {
display: flex;
justify-content: space-between;
align-items: stretch;
position: absolute;
z-index: 2;
width: 100%;
gap: 0.25rem;
}
.gear-grid__info h2 {
align-self: center;
font-size: clamp(1.25rem, 0.75rem + 2vw, 1.6255rem);
margin: 0;
padding: 0.5rem 0 0.5rem 1rem;
}
.gear-grid__info a.card-modal-btn {
padding: 0.5rem 0.75rem 0.5rem;
}
.gear-grid-item-1-third .gear-grid__info h2,
.gear-grid-item-quarter .gear-grid__info h2 {
font-size: clamp(1.25rem, 0.518rem + 1.181vw, 1.625rem);
margin: 0;
}
.gear-grid__image-wrapper {
position: relative;
flex-grow: 1;
}
.gear-grid__image-wrapper .swiper-button-next,
.gear-grid__image-wrapper .swiper-button-prev {
background-color: transparent;
top: 50%;
bottom: auto;
left: 0;
right: auto;
}
.gear-grid__image-wrapper .swiper-button-next {
left: auto;
right: 0;
}
.gear-grid__image-wrapper .swiper-button-next:after,
.gear-grid__image-wrapper .swiper-button-prev:after {
color: black;
font-size: 2rem;
}
.gear-grid-item img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
max-width: 100%;
margin: auto;
transition: transform 0.2s ease-in;
width: 100%;
height: calc(100% - 10px);
}
.gear-grid__image-wrapper .swiper-slide.bottom-flushed > a,
.bottom-flushed img {
height: 100%;
}
.gear-grid-item:hover a.card-modal-btn {
background: black;
}
.gear-grid-item:hover a.card-modal-btn svg {
color: white;
}
/* a.card-modal-btn svg {
transition: transform .5s ease-out;
} */
.gear-list {
counter-reset: gear-item;
}
.gear-list__item .swiper {
height: 100%;
width: 100%;
}
.gear-list__item .swiper-wrapper {
height: calc(100% - 35px);
}
.gear-list__item .swiper-slide {
display: flex;
place-content: center;
}
.gear-list__item .swiper-slide > img {
max-width: 100%;
height: auto;
width: auto;
max-height: 100%;
margin: auto;
}
.gear-list__item .swiper .swiper-pagination {
bottom: auto;
}
.gear-list {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 2px solid #333;
}
.gear-list__item {
width: 100%;
aspect-ratio: 1;
border: 2px solid #333;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.gear-list__image-wrapper {
flex-grow: 1;
padding: 1rem;
width: 100%;
min-height: 0;
display: flex;
align-items: center;
}
.gear-list__image-wrapper > img.gear-list__image {
max-height: 90%;
}
.gear-list__image-wrapper.gear-list__image-cropped {
padding-bottom: 0;
}
.gear-list__image {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.gear-list__info {
margin-top: auto;
padding: 0.5rem 1rem 0.5rem 50px;
display: flex;
justify-content: space-between;
font-weight: 800;
font-size: 1.5rem;
width: 100%;
align-items: center;
position: relative;
}
.gear-list__counter {
position: absolute;
left: 8px;
top: 1px;
counter-increment: gear-item;
font-weight: 700;
font-size: 1.125rem;
color: white;
}
.gear-list__info:before {
content: '';
position: absolute;
left: 0;
top: 0;
border-color: black;
border-style: solid;
border-width: 25px;
border-right-color: transparent;
border-bottom-color: transparent;
}
.gear-list__label {
text-transform: uppercase;
line-height: 1;
}
@media (min-width: 500px) {
.gear-list__item:first-child {
aspect-ratio: 2/1;
}
.gear-list__item:not(:first-child) {
width: 50%;
}
}
@media (min-width: 768px) {
.gear-list {
display: grid;
grid-template-columns: repeat(12, 1fr);
/* grid-template-rows: repeat(10, 150px); */
grid-template-rows: repeat(10, 100px);
}
.gear-list__item {
aspect-ratio: auto !important;
width: auto !important;
/* grid-column: 1 / -1; */
/* grid-row-end: span 1; */
/* grid-row: auto / span 1; */
}
.gear-list__item {
grid-column: 1 / span 6;
grid-row-end: auto;
}
.gear-list__item:first-child {
grid-column: 1 / 8;
grid-row-end: span 3;
}
.gear-list__item:nth-child(2) {
grid-column: 8 / -1;
grid-row: 1 / span 3;
}
.gear-list__item:nth-child(3) {
grid-column: 1 / 7;
grid-row: 4 / span 2;
}
.gear-list__item:nth-child(4) {
grid-column: 7 / -1;
grid-row: 4 / span 2;
}
.gear-list__item:nth-child(5) {
grid-column: 1 / span 6;
grid-row: 6 / span 2;
}
.gear-list__item:nth-child(6) {
grid-column: 7 / -1;
grid-row: 6 / span 2;
}
.gear-list__item:nth-child(7) {
grid-column: 1 / span 4;
grid-row: 8 / span 3;
}
.gear-list__item:nth-child(8) {
grid-column: 5 / span 4;
grid-row: 8 / span 3;
}
.gear-list__item:nth-child(9) {
grid-column: 9 / -1;
grid-row: 8 / span 3;
}
.gear-list__item:nth-child(10) {
grid-column: 1 / span 4;
}
.gear-list__item:nth-child(11) {
grid-column: 5 / span 4;
}
.gear-list__item:nth-child(12) {
grid-column: 9 / span 4;
}
.gear-list__item:nth-child(10),
.gear-list__item:nth-child(11),
.gear-list__item:nth-child(12) {
grid-row-end: span 1;
grid-row: 11 / -1;
}
}
@media (min-width: 1200px) {
.gear-list {
grid-template-rows: repeat(10, 130px);
}
}
@media (min-width: 1500px) {
.gear-list {
grid-template-rows: repeat(10, 150px);
}
.gear-list__item:first-child {
grid-column: 1 / span 5;
grid-row: 1 / span 4;
}
.gear-list__item:nth-child(2) {
grid-column: 6 / span 4;
grid-row: 1 / span 2;
}
.gear-list__item:nth-child(3) {
grid-column: 6 / span 4;
grid-row: 3 / span 2;
}
.gear-list__item:nth-child(4) {
grid-column: 10 / span 3;
grid-row: 1 / span 4;
}
.gear-list__item:nth-child(5) {
grid-column: 1 / span 4;
grid-row: 5 / span 4;
}
.gear-list__item:nth-child(6) {
grid-column: 5 / span 5;
grid-row: 5 / span 2;
}
.gear-list__item:nth-child(7) {
grid-column: 5 / span 5;
grid-row: 7 / span 2;
}
.gear-list__item:nth-child(8) {
grid-column: 10 / span 3;
grid-row: 5 / span 3;
}
.gear-list__item:nth-child(9) {
grid-column: 10 / span 3;
grid-row: 8 / span 3;
}
.gear-list__item:nth-child(10) {
grid-column: 1 / span 3;
grid-row: 9 / span 2;
}
.gear-list__item:nth-child(11) {
grid-column: 4 / span 3;
grid-row: 9 / span 2;
}
.gear-list__item:nth-child(12) {
grid-column: 7 / span 3;
grid-row: 9 / span 2;
}
}
.our-gear .content-modal .modal-body {
padding-bottom: 4vw;
flex-grow: 1;
display: block;
}
.our-gear .content-modal-body .table-responsive {
width: 440px;
max-width: 100%;
margin-top: 3rem;
}
.our-gear .modal table th {
font-weight: 500;
}
.our-gear .content-modal .modal-body .swiper {
padding: 0px 4vw;
height: auto;
}
.our-gear .content-modal .modal-body .swiper-wrapper {
min-height: calc(100vh - 72px - 1rem - 4vw);
}
.our-gear .content-modal .modal-body .swiper-slide {
display: flex;
min-height: 100%;
}
.our-gear .content-modal .modal-body .swiper-slide > .row {
width: 100%;
}
.our-gear .content-modal .modal_featured_image {
max-height: calc(100vh - 72px - 2rem);
}
.our-gear .content-modal .read-more {
position: fixed;
bottom: 1rem;
right: 1rem;
}
.our-gear .content-modal .modal-body .swiper .swiper-button-next,
.our-gear .content-modal .modal-body .swiper .swiper-button-prev {
top: calc(50vh - 1.5rem);
}
.our-gear .content-modal .swiper-pagination {
position: fixed;
}
/* Contact Page */
.presscontacts-grid {
background-color: var(--THEME-COLOR-DARKER);
color: white;
padding: calc(2rem + 2vw);
}
.presscontacts-grid h2 {
}
.presscontacts-grid ul {
margin-bottom: 5rem;
}
.presscontacts-grid .form {
margin-bottom: 2rem;
margin-top: auto;
}
.presscontacts-grid form input[type='email'],
.presscontacts-grid form input[type='text'] {
background: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: white;
}
.presscontacts-grid a.btn {
white-space: nowrap;
}
@media (min-width: 1500px) {
.presscontacts-grid ul {
margin-right: 4rem;
}
}
.styled-list {
padding-left: 2rem;
text-align: left;
}
.styled-list li:not(:last-child) {
margin-bottom: 1.5rem;
}
.styled-list li h3 {
position: relative;
display: flex;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.styled-list li h3:before {
content: '';
left: -2rem;
width: 0.75rem;
border-bottom: 1px solid #eee;
position: absolute;
top: 50%;
}
img.pattern {
position: absolute;
}
#hero img.pattern {
left: -5%;
width: 900px;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
opacity: 0.7;
bottom: 0;
}
#news > img.pattern {
left: -63px;
top: 19%;
width: 1198px;
opacity: 0.25;
display: none;
}
#social img.pattern {
left: -100px;
width: 40%;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
opacity: 0.25;
top: 55%;
}
/* --------------------------------
File#: _1_hiding-nav
Title: Auto Hiding Navigation
Descr: A Navigation container that auto-hides when the user scrolls down, and is revealed when they scrolls back up
Usage: codyhouse.co/license
-------------------------------- */
.hide-nav {
--hide-nav-transition-duration: 0.3s;
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
will-change: transform;
transition: transform var(--hide-nav-transition-duration),
background-color var(--hide-nav-transition-duration);
}
.hide-nav--fixed {
background-color: transparent;
}
.hide-nav--has-bg {
background-color: var(--color-bg);
}
.page-template-page-our-story-in-hebrew section#israeli-roster > .container,
.page-template-page-our-story-in-hebrew section + section .posts {
border-top: 2px solid #333;
padding-top: var(--SECTION-PB);
}
/* single page RTL adjustments */
.rtl .top-bar .social-menu {
border-right: 1px solid #aaa;
}
@media (min-width: 768px) {
.rtl .header-brand {
border-left: 1px solid #aaa;
}
}
.rtl .header-end {
border-right: 1px solid #aaa;
}
.rtl .menu-item-1583 a span::before,
.rtl .menu-item-1583 a span::before {
margin-right: 0;
margin-left: 0.5rem;
}
@media (min-width: 1200px) {
.rtl .dropdown-menu {
left: auto;
right: 1rem;
text-align: right;
}
}
@media (min-width: 992px) {
.rtl ul.social-footer li:last-child a {
padding-right: 1.5rem;
padding-left: 0;
}
}
.rtl ul.social-footer li a {
padding: 0.75rem 1.5rem;
display: block;
}
.menu-item-1583 a span::before,
.menu-item-1583 a span::before {
display: inline-block;
margin-right: 0.5rem;
content: ' ';
background-image: url('../svg/israel.svg');
background-size: cover;
width: 20px;
height: 15px;
background-position: center;
vertical-align: -2px;
}
.rtl .borderr-br-lg {
border-radius: 0 0 0 90px;
}
.rtl .borderr-br-md {
border-radius: 0 0 0 70px;
}
.rtl .borderr-br-sm {
border-radius: 0 0 0 40px;
}
.rtl .borderr-br-xs {
border-radius: 0 0 0 20px;
}
.rtl .teammb-card-nationality {
left: 20px;
right: auto;
}
.rtl .card-staffmb-info {
margin: 0 4px 0 0;
}
.rtl .teammb-name {
padding-left: 2.75rem;
padding-right: 0;
}
.rtl .roster:last-child {
margin-bottom: 0;
}
.uci-cat {
font-size: 0.75em;
font-weight: 700;
}
@media (min-width: 992px) {
.rtl .topic .topic-body {
padding-right: calc(2rem + 1vw);
padding-left: calc(2rem + 1vw);
}
.rtl .topic:nth-child(odd) .topic-body {
padding-right: calc(1rem + 0vw);
}
.rtl .topic:nth-child(even) .topic-body {
padding-left: calc(1rem + 0vw);
}
}
@media (min-width: 1400px) {
.rtl .topic .topic-body {
padding: 0 calc(2rem + 3vw) 0;
}
}
/* WT Riders Page */
.rider-nav .swiper-slide {
font-weight: 500;
font-size: 0.85em;
letter-spacing: 1px;
text-transform: uppercase;
color: #333;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
transition: 0.3s all ease;
padding: 0 0.75rem;
}
.rider-nav .swiper-slide.swiper-slide-thumb-active,
.rider-nav .swiper-slide.current-rider,
.rider-nav .swiper-slide:hover {
color: #fff;
background-color: var(--THEME-COLOR-DARKEST);
}
/* Error Page */
body.error404 > main {
padding: 0;
}
.image-404 {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 95%;
object-position: center 95%;
width: 100%;
height: 100%;
}
/* Ads */
.inside-banner-announcement,
.homepage-announcement,
.homepage-ad {
margin: 0rem auto var(--SECTION-PB);
text-align: center;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
padding: calc(2rem + 1vw) 0;
background: #eee;
}
.inside-banner-announcement,
.homepage-announcement {
background-color: transparent;
}
.inside-banner-announcement {
width: 100%;
transform: none;
margin: auto;
}
.homepage-announcement ~ .homepage-ad {
margin-top: calc(var(--SECTION-PB) / 2 * -1);
}
.inside-banner-announcement > a,
.homepage-announcement > a,
.homepage-ad > a {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: auto;
max-width: calc(100% - 2rem);
display: inline-block;
}
/* Medium Rectangle: 300x250px */
.ann-wrapper.md-rect,
.ann-wrapper.md-rect-hd,
.ad-wrapper.md-rect,
.ad-wrapper.md-rect-hd {
width: 300px;
}
.ann-wrapper,
.ad-wrapper {
position: relative;
margin: auto;
}
.ann-wrapper:before,
.ad-wrapper:before {
display: block;
content: '';
--ad-width: 300px;
--ad-height: 250px;
--ratio-width: 300;
--ratio-height: 250;
width: var(--ad-width);
padding-top: calc((var(--ratio-height) / var(--ratio-width)) * 100%);
padding-top: calc(250 / 300 * 100%);
margin: auto;
}
.ann-wrapper > .ann-image,
.ad-wrapper > .ad-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
}
/* Tablet Rectangle: 480x320px */
@media (min-width: 600px) {
.ann-wrapper.lg-rect,
.ann-wrapper.lg-rect-hd,
.ad-wrapper.lg-rect,
.ad-wrapper.lg-rect-hd {
width: 480px;
}
.ann-wrapper:before,
.ad-wrapper:before {
--ad-width: 480px;
--ad-height: 320px;
--ratio-width: 480;
--ratio-height: 320;
padding-top: calc(320 / 480 * 100%);
}
}
/* Billboard: 970x250px */
@media (min-width: 1200px) {
.ann-wrapper.bd,
.ann-wrapper.bd-hd,
.ad-wrapper.bd,
.ad-wrapper.bd-hd {
width: 970px;
}
.ann-wrapper:before,
.ad-wrapper:before {
--ad-width: 970px;
--ad-height: 250px;
--ratio-width: 970;
--ratio-height: 250;
padding-top: calc(250 / 970 * 100%);
}
}
/* Recipe Posts */
.step {
position: relative;
display: flex;
align-items: start;
gap: 1rem;
padding-bottom: 3rem;
}
.step:before {
position: absolute;
content: '';
top: 0;
left: 35px;
height: calc(100% + 1rem);
border-left: 1px solid #999;
}
.step:last-child {
padding-bottom: 0;
}
.step:last-child:before {
content: none;
}
.step:first-child {
margin-block-start: 3rem;
}
.step > strong {
background-color: white;
padding: 1rem;
z-index: 2;
text-transform: uppercase;
font-size: 0.85em;
}
.step .lead {
font-size: 1.25em;
font-weight: 500;
}
.step + .step {
/* margin-top: 2rem; */
/* border-top: 1px solid #666; */
}