@charset "UTF-8";

/* BIKEOGRAPHY - based on BOY feature styling */

.bikeography-feature{
margin:0 auto;
padding:0 0 20px 0;
font-family:"montserrat",sans-serif;
}

.bikeography-header{
width:100%;
margin:0;
background:#000;
border:1px solid #333;
overflow:hidden;
}

.bikeography-header img{
display:block;
width:100%;
height:auto;
}

.bikeography-header{
position:relative;
}

.bikeography-header-caption{
position:absolute;
left:17.5%;
bottom:8%;
width:70%;

font-family:"montserrat",sans-serif;
font-size:clamp(22px,2.2vw,42px);
font-weight:200;
line-height:1.2;
text-align:left;
color:#AAA;
text-shadow:
2px 2px 4px rgba(0,0,0,.85),
0 0 12px rgba(0,0,0,.65);

pointer-events:none;
}

.bikeography-header-caption strong{
font-weight:300;
        font-size:44px;

}

.bikeography-header-caption span{
font-weight:100;
    font-size:16px;

}

.bikeography-story{
width:80%;
margin:0 auto;
padding:18px 0 40px 0;
background:transparent;
border:0;
box-shadow:none;
overflow:visible;
}

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

.bikeography-story p strong{
color:#eee;
font-weight:700;
}

.bikeography-intro{
font-size:16px !important;
line-height:1.6 !important;
color:#ddd !important;
margin-bottom:28px !important;
}

.spacert{
height:25px;
border-top:1px solid #666;
}

/* TIMELINE */

.bikeography-timeline{
position:relative;
width:100%;
max-width:1040px;
margin:55px auto 10px auto;
padding:0 0 20px 0;
}

.bikeography-timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:6px;
transform:translateX(-50%);
background:linear-gradient(to bottom, rgba(80,80,80,.35), rgba(115,115,115,.85), rgba(80,80,80,.35));
border-radius:6px;
box-shadow:2px 2px 5px rgba(0,0,0,.7);
z-index:0;
}

.timeline-entry{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);
grid-template-rows:auto;
align-items:start;
column-gap:0;
margin:0 0 78px 0;
z-index:1;
}

.timeline-entry:last-child{
margin-bottom:0;
}

.timeline-text a{
color:#bdbdbd;
text-decoration:underline;
text-decoration-color:#666;
text-underline-offset:3px;
transition:.2s ease;
}

.timeline-text a:hover{
color:#fff;
text-decoration-color:#fff;
}

.timeline-image{
grid-row:1;
display:block;
width:86%;
max-width:370px;
background:#000;
border:1px solid #333;
box-shadow:5px 5px 8px rgba(0,0,0,.7);
overflow:hidden;
text-decoration:none;
transition:.2s ease;
}

.timeline-image:hover{
filter:brightness(116%);
border-color:#777;
}

.timeline-image img{
display:block;
width:100%;
height:auto;
}

.timeline-text{
grid-row:1;
width:86%;
max-width:360px;
padding-top:4px;
}

.timeline-text h3{
margin:0 0 12px 0;
font-family:"montserrat",sans-serif;
font-size:20px;
font-weight:100;
line-height:1.12;
color:#d0d0d0;
letter-spacing:.04em;
text-shadow:2px 2px 3px #000;
}

.bikeography-story .timeline-text p{
width:100%;
margin:0;
font-size:14px;
line-height:1.5;
color:#bdbdbd;
text-shadow:2px 2px 3px #000;
}

.timeline-dot{
grid-column:2;
grid-row:1;
width:68px;
height:68px;
margin-top:0;
justify-self:center;
display:flex;
align-items:center;
justify-content:center;
background:#606060;
border-radius:50%;
box-shadow:0 0 0 5px rgba(0,0,0,.35), 3px 3px 6px rgba(0,0,0,.8);
z-index:3;
}

.timeline-dot span{
font-family:"montserrat",sans-serif;
font-size:18px;
line-height:1;
font-weight:400;
color:#e0e0e0;
text-shadow:2px 2px 3px #000;
}

.entry-left .timeline-image{
grid-column:1;
justify-self:end;
}

.entry-left .timeline-text{
grid-column:3;
justify-self:start;
text-align:left;
}

.entry-right .timeline-image{
grid-column:3;
justify-self:start;
}

.entry-right .timeline-text{
grid-column:1;
justify-self:end;
text-align:right;
}

/* MODAL - carried over from BOY */

.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;
}

/* TABLET */

@media only screen and (max-width:1000px){

.bikeography-story{
width:86%;
}

.bikeography-timeline{
max-width:880px;
}

.timeline-entry{
grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);
margin-bottom:60px;
}

.timeline-image{
width:88%;
max-width:320px;
}

.timeline-text{
width:88%;
max-width:310px;
}

.timeline-text h3{
font-size:23px;
}

.bikeography-story .timeline-text p{
font-size:17px;
line-height:1.35;
}

.timeline-dot{
width:58px;
height:58px;
}

.timeline-dot span{
font-size:16px;
}

}

/* PHONE */

@media only screen and (max-width:600px){

.bikeography-story{
width:92%;
}

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

.bikeography-intro{
font-size:16px !important;
}

.bikeography-timeline{
width:86%;
margin:36px auto 0 auto;
padding-left:42px;
}

.bikeography-timeline::before{
left:0;
transform:none;
width:5px;
}

.timeline-entry{
display:block;
margin:0 0 44px 0;
}

.timeline-image,
.entry-left .timeline-image,
.entry-right .timeline-image{
width:100%;
max-width:none;
margin:0 0 14px 0;
}

.timeline-text,
.entry-left .timeline-text,
.entry-right .timeline-text{
width:100%;
max-width:none;
padding-top:0;
text-align:left;
}

.timeline-text h3{
font-size:22px;
margin-bottom:10px;
}

.bikeography-story .timeline-text p{
font-size:16px;
line-height:1.45;
}

.timeline-dot{
position:absolute;
left:-70px;
top:0;
width:50px;
height:50px;
margin:0;
}

.timeline-dot span{
font-size:14px;
}

}


/* SMOOTH SCROLL + BACK TO TOP */

html{
scroll-behavior:smooth;
}

.back-to-top{
width:80%;
margin:34px auto 0 auto;
text-align:center;
font-family:"montserrat",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:600px){

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

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

}