*{
margin:0;
padding:0;
box-sizing:border-box;
outline:none !important;
}
body{
font-family:"Open Sans",sans-serif;
color:#333;
background:#fff;
}
.bp-wrapper{
width:var(--pw1);
margin:0 auto;
max-width:calc(100% - 24px);
}
.bp-wrapper *{
max-width:100%;
}
.header{
text-align:center;
padding:6px;
}
.logo{
margin:0 auto;
display:table;
}
.logo img{
width:100px;
height:auto;
object-fit:contain;
display:block;
filter:brightness(1.1) contrast(1.2);
}
.car{
width:100%;
margin:0 auto;
position:relative;
border-radius:var(--br1);
box-shadow:0 0 3px rgba(0,0,0,.5);
}
.car-container{
width:100%;
overflow:hidden;
border-radius:var(--br1);
}
.car-track{
display:flex;
transition:transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.slide{
flex:0 0 100%;
}
.slide a{
display:block;
text-decoration:none;
cursor:grab;
}
.slide a.is-dragging{
cursor:grabbing;
}
.slide img{
width:100%;
height:var(--ih1);
object-fit:cover;
display:block;
filter:brightness(0.95) contrast(1.1) saturate(1.1);
cursor:grab;
}
.slide img.is-dragging{
cursor:grabbing;
}
.arrow{
position:absolute;
top:50%;
width:var(--arr);
height:var(--arr);
background:rgba(0,0,0,0);
border:var(--bot) solid rgba(0,0,0,.1);
border-radius:8px;
cursor:pointer;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
padding:0;
transform:translateY(-50%);
box-shadow:0 0 3px rgba(0, 0, 0, .1);
}
.arrow:hover{
background:rgba(0,0,0,.015);
border:var(--bot) solid rgba(0,0,0,.15)
}
.arrow img{
width:var(--arr-img);
height:var(--arr-img);
object-fit:contain;
filter:brightness(0) opacity(0.7);
}
.arrow:hover img{
filter:brightness(0) opacity(0.9);
}
.car-prev{
left:calc(-1 * (var(--arr) + var(--gap)));
}
.car-next{
right:calc(-1 * (var(--arr) + var(--gap)));
}
.content{
padding:0;
}
.socials{
display:flex;
flex-direction:column;
gap:var(--gap);
width:300px;
margin:var(--gx3) auto 0;
align-items:center;
}
.social{
display:flex;
align-items:center;
padding:4px 16px 4px 4px;
text-decoration:none;
border:var(--bot) solid rgba(0,0,0,0.3);
border-radius:100px;
}
.social img{
width:var(--soc);
height:var(--soc);
object-fit:cover;
border-radius:50%;
margin-right:12px;
}
.social:hover img,.social:active img{
filter:brightness(.6);
}
.social::after{
content:"@bustedpedals";
color:#333;
font-size:17px;
font-weight:500;
}
.top{
background-color:#D4362F;
color:#fff;
text-align:center;
padding:4px;
font-size:var(--fz1);
font-weight:500;
text-transform:uppercase;
display: none;
}
.copyright{
margin:50px auto;
text-align:center;
color:#aaa;
font-size:14px;
}
.copyright a{
color:#aaa;
text-decoration:none;
}
.copyright a:hover{
text-decoration:underline;
}