@charset "UTF-8";

/* FAST BIKES FEATURE */
.fast-feature {
    margin:0 auto;
    padding:0 0 24px 0;
    font-family:"montserrat",Arial,sans-serif;
}


.fast-hero {
    position:relative;
    width:100%;
    margin:0;
    background:#000;
    border:1px solid #333;
    overflow:hidden;
    box-shadow:0 5px 5px rgba(0,0,0,.65);
}


.fast-hero-slides {
    position:relative;
    width:100%;
    aspect-ratio:2000 / 667;
    overflow:hidden;
    background:#000;
    z-index:1;
}


.fast-hero-slides:after {
    display:none;
}


.fast-hero-slides .slide {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation-name:fastHeroFade;
    animation-duration:24s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
}


.fast-hero-slides .slide1 {
    animation-delay:0s
}

.fast-hero-slides .slide2 {
    animation-delay:6s
}

.fast-hero-slides .slide3 {
    animation-delay:12s
}

.fast-hero-slides .slide4 {
    animation-delay:18s
}


@keyframes fastHeroFade {
    0%{opacity:0
}
4% {
    opacity:1
}
25% {
    opacity:1
}
30% {
    opacity:0
}
100% {
    opacity:0
}
}
.fast-hero-caption {
    position:absolute;
    left:5%;
    top:13%;
    width:44%;
    text-align:left;
    color:#fff;
    z-index:5;
    text-shadow:2px 2px 4px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.65);
    pointer-events:none;
}


.fast-kicker {
    margin:0 0 6px 0;
    font-size:clamp(12px,1.2vw,18px);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#CCC;
    font-weight:700;
}


.fast-hero h1 {
    margin:0;
    font-size:clamp(34px,4.2vw,74px);
    line-height:1;
    font-weight:800;
        color:#999;

}


.fast-hero h2 {
    margin:8px 0 0 0;
    font-size:clamp(16px,1.95vw,31px);
    line-height:1.14;
    font-weight:500;
    color:#999;
}


.fast-story {
    width:86%;
    max-width:1200px;
    margin:0 auto;
    padding:24px 0 24px 0;
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:hidden;
}


.fast-story p {
    width:82%;
    margin:0 auto 17px auto;
    color:#bdbdbd;
    font-family:"montserrat",Arial,sans-serif;
    font-size:16px;
    line-height:1.7;
    font-weight:400;
    text-shadow:2px 2px 3px #000;
}


.fast-story em {
    font-style:italic;
    color:#ddd;
}

.fast-intro {
    font-size:19px;
    line-height:1.55;
    color:#eee;
    font-weight:500;
    margin-top:5px;
    margin-bottom:26px;
}

.fast-close {
    clear:both;
    margin-top:28px;
    font-size:20px!important;
    font-weight:700!important;
    color:#eee!important;
}


.dateline {
    font-family:"montserrat",Arial,sans-serif;
    font-size:.9em;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#aaa;
    border-bottom:1px solid #555;
    padding-bottom:2px;
}


.fast-meta {
    width:82%;
    margin:0 auto 34px auto;
    display:grid;
    grid-template-columns:1.15fr 1fr .9fr;
    gap:1px;
    align-items:center;
    background:#333;
    border:1px solid #444;
    box-shadow:5px 5px 7px rgba(0,0,0,.35);
}


.meta-box {
    height:132px;
    padding:10px 18px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#151515;
    color:#d0d0d0;
    font-size:13px;
    line-height:1.35;
    text-align:center;
}

.meta-logo {
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:18px
}

.hd-logo {
    display:block;
    width:155px;
    max-width:155px;
    margin:0;
    flex-shrink:0
}

.publine {
    text-align:left
}

.publine span,.meta-box>span {
    display:block;
    margin-bottom:6px;
    color:#888;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}

.publine strong {
    display:block;
    color:#ddd;
    font-size:14px;
    font-weight:600;
    line-height:1.2
}

.meta-main {
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    color:#ddd;
}


.fast-story blockquote {
    clear:both;
    width:72%;
    margin:40px auto 44px auto;
    padding:18px 26px;
    color:#e6e6e6;
    font-size:20px;
    line-height:1.45;
    font-family:"montserrat",Arial,sans-serif;
    font-style:italic;
    font-weight:500;
    text-align:center;
    border-top:1px solid #555;
    border-bottom:1px solid #555;
    text-shadow:2px 2px 3px #000;
}


.fast-section-title {
    clear:both;
    width:82%;
    margin:46px auto 20px auto;
    padding:0 0 9px 0;
    color:#eee;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
    border-bottom:1px solid #444;
    text-shadow:2px 2px 3px #000;
}


.bike-grid {
    clear:both;
    width:82%;
    margin:22px auto 34px auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.feature-grid {
    align-items:stretch
}

.bike-card {
    background:#111;
    border:1px solid #333;
    box-shadow:5px 5px 6px rgba(0,0,0,.45);
    overflow:hidden;
}

.bike-card.hero-card {
    grid-column:span 1
}

.bike-card a,.bike-strip a {
    display:block;
    overflow:hidden;
    background:#000;
    text-decoration:none;
}

.bike-card img {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    transition:.2s ease;
}

.bike-card a:hover img,.bike-strip a:hover img {
    filter:brightness(120%);
    transform:scale(1.015);
}

.bike-copy {
    padding:16px 16px 18px 16px
}

.bike-copy h3 {
    margin:0 0 9px 0;
    font-size:18px;
    line-height:1.2;
    color:#eee;
}

.bike-copy p {
    width:100%;
    margin:0;
    color:#bdbdbd;
    font-size:14px;
    line-height:1.55;
    text-shadow:none;
}

.bike-copy .bike-tag {
    margin:0 0 8px 0;
    color:#888;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}


.bike-strip {
    clear:both;
    width:82%;
    margin:22px auto 38px auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}

.bike-strip article {
    background:#111;
    border:1px solid #333;
    box-shadow:5px 5px 6px rgba(0,0,0,.45);
    overflow:hidden
}

.bike-strip img {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    transition:.2s ease
}

.bike-strip h3 {
    margin:14px 14px 8px 14px;
    font-size:15px;
    line-height:1.25;
    color:#eee
}

.bike-strip p {
    width:auto;
    margin:0 14px 16px 14px;
    font-size:13px;
    line-height:1.5;
    text-shadow:none;
    color:#bdbdbd;
}


.image-modal {
    display:none;
    position:fixed;
    z-index:9999;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.92);
    justify-content:center;
    align-items:center;
    padding:30px;
    box-sizing:border-box
}

.image-modal-content {
    display:block;
    max-width:92%;
    max-height:88vh;
    border:1px solid #555;
    box-shadow:0 0 30px rgba(0,0,0,.8)
}

.image-modal-close {
    position:fixed;
    top:18px;
    right:28px;
    color:#ccc;
    font-size:42px;
    line-height:42px;
    font-weight:300;
    cursor:pointer;
    text-shadow:2px 2px 4px #000;
    z-index:10000
}

.image-modal-close:hover {
    color:#fff
}
html {
    scroll-behavior:smooth
}

.back-to-top {
    width:80%;
    margin:34px auto 0 auto;
    text-align:center;
    font-family:"montserrat",Arial,sans-serif
}

.back-to-top a {
    display:inline-block;
    padding:10px 18px;
    color:#bdbdbd;
    font-size:14px;
    line-height:1;
    font-weight:400;
    text-decoration:none;
    border:1px solid #555;
    background:rgba(0,0,0,.28);
    box-shadow:2px 2px 4px rgba(0,0,0,.55);
    text-shadow:1px 1px 2px #000;
    transition:.2s ease
}

.back-to-top a:hover {
    color:#fff;
    border-color:#888;
    background:rgba(255,255,255,.06)
}

.back-to-top i {
    margin-right:7px
}


@media only screen and (max-width:1000px) {
    .fast-story{width:90%
}

.bike-grid {
    grid-template-columns:repeat(2,1fr);
    width:86%
}

.bike-strip {
    grid-template-columns:repeat(2,1fr);
    width:86%
}

.fast-hero-caption {
    width:56%;
}

.fast-story p,.fast-section-title,.fast-meta {
    width:86%;
}
}
@media only screen and (max-width:700px) {
    .fast-hero-slides{aspect-ratio:16 / 9
}

.fast-hero-caption {
    left:4%;
    top:auto;
    bottom:7%;
    width:90%
}

.fast-hero h1 {
    font-size:clamp(30px,9vw,48px)
}

.fast-hero h2 {
    font-size:clamp(15px,4vw,22px)
}

.bike-grid,.bike-strip {
    grid-template-columns:1fr;
    width:86%;
}

.fast-meta {
    display:block;
    grid-template-columns:1fr
}

.meta-box {
    display:flex;
    height:auto;
    min-height:0;
    padding:18px 16px;
    border-bottom:1px solid #333
}

.meta-box:last-child {
    border-bottom:none
}

.meta-logo {
    flex-direction:column;
    align-items:center;
    gap:10px
}

.hd-logo {
    width:180px;
    max-width:80%;
    margin:0 auto 8px auto
}

.publine {
    text-align:center
}

.fast-story p {
    width:86%;
    font-size:14px;
    line-height:1.6
}

.fast-intro {
    font-size:16px
}

.fast-story blockquote {
    width:78%;
    font-size:18px;
    padding:0 12px;
    margin:34px auto 36px auto
}

.fast-section-title {
    width:86%;
    font-size:21px
}

.back-to-top {
    width:92%;
    margin-top:28px
}

.back-to-top a {
    font-size:13px;
    padding:10px 16px
}
}