.logo {
max-width : 100px;
transition : 0.25s;
}
.logo:hover {
transform : rotate(-5deg) scale(1.15);
filter : drop-shadow(3px 1px 20px #FF0000);
}
.text_black {
color : black;
}
.img-small {
max-width : 300px;
}
.hover-image-scale {
display : inline-block;
}
.hover-image-scale img {
transition : 1s;
}
.hover-image-scale img:hover {
transform : scale(1.2);
}
.container-images {
align-items : center;
justify-content : center;
display : block;
display : flex;
}
.input {
justify-content : center;
display : block;
display : flex;
align-items : center;
}
.mybicycle {
align-items : center;
align-items : center;
justify-content : center;
display : block;
display : flex;
margin-top : 10px;
margin-bottom : 10px;
}
#bicycle1 {
width : 350px;
height : 500px;
margin-right : 10px;
border-radius : 10px;
}
#bicycle2 {
width : 350px;
height : 500px;
border-radius : 10px;
}
#bicycle3 {
margin-left : 10px;
border-radius : 10px;
width : 350px;
height : 500px;
}
.zagolovokmybicycle {
align-items : center;
align-items : center;
justify-content : center;
display : block;
display : flex;
}
.bmxforfirst {
border-radius : 10px;
margin-left : 50px;
}
.istoriyasozdaniyaimg {
border-radius : 10px;
}
.bestridersimg {
border-radius : 10px;
}
.chempolezenimg {
border-radius : 10px;
}
.cards {
width : fit-content;
height : fit-content;
display : flex;
align-items : center;
justify-content : center;
padding : 25px 25px;
gap : 20px;
box-shadow : 0 0 20px rgb(0, 0, 0, 0.055);
border-radius : 10px;
margin-right : 85px;
}
.socialContainer {
width : 52px;
height : 52px;
background-color : rgb(128, 128, 128);
display : flex;
align-items : center;
justify-content : center;
overflow : hidden;
transition-duration : 0.3s;
border-radius : 10px;
}
.containerOne:hover {
background-color : #d62976;
transition-duration : 0.3s;
}
.containerTwo:hover {
background-color : #48d1cc;
transition-duration : 0.3s;
}
.containerThree:hover {
background-color : #0072b1;
transition-duration : 0.3s;
}
.containerFour:hover {
background-color : #191970;
transition-duration : 0.3s;
}
.socialContainer:active {
transform : scale(0.9);
transition-duration : 0.3s;
}
.socialSvg {
width : 17px;
}
.socialSvg path {
fill : rgb(255, 255, 255);
}
.socialContainer:hover .socialSvg {
animation : slide-in-top 0.3s both;
}
@keyframes slide-in-top {
0% {
transform : translateY(-50px);
opacity : 0;
}
100% {
transform : translateY(0);
opacity : 1;
}
}
body {
overflow-y : scroll;
}
.login-box {
position : absolute;
top : 50%;
left : 50%;
width : 400px;
transform : translate(-50%,-50%);
background : rgb(24, 20, 20, 0.987);
box-sizing : border-box;
box-shadow : 0 15px 25px rgb(0, 0, 0, 0.6);
border-radius : 10px;
border : #8B0000 solid;
padding : 50px;
}
.login-box .user-box {
position : relative;
}
.login-box .user-box input {
width : 100%;
padding : 10px 0;
font-size : 16px;
color : #fff;
margin-bottom : 30px;
border : none;
border-bottom : 1px solid #fff;
outline : none;
background : transparent;
}
.login-box .user-box label {
position : absolute;
top : 0;
left : 0;
padding : 10px 0;
font-size : 16px;
color : #fff;
pointer-events : none;
transition : 0.5s;
}
.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label {
top : -20px;
left : 0;
color : #bdb8b8;
font-size : 12px;
}
.login-box form a {
position : relative;
display : inline-block;
padding : 10px 20px;
color : #ffffff;
font-size : 16px;
text-decoration : none;
text-transform : uppercase;
overflow : hidden;
transition : 0.5s;
margin-top : 40px;
letter-spacing : 4px;
}
.login-box a:hover {
background : #8B0000;
color : #fff;
border-radius : 5px;
box-shadow : 0 0 5px #8B0000, 0 0 25px #8B0000, 0 0 50px #8B0000, 0 0 100px #8B0000;
}
.login-box a span {
margin : 0 auto;
justify-content : center;
align-items : center;
}
@keyframes btn-anim1 {
0% {
left : -100%;
}
50%, 100% {
left : 100%;
}
}
.login-box a span:nth-child(1) {
bottom : 2px;
left : -100%;
width : 100%;
height : 2px;
background : linear-gradient(90deg, transparent, #8B0000);
animation : btn-anim1 2s linear infinite;
}
.box {
justify-content : center;
display : inline-flex;
width : 400px;
height : 400px;
display : block;
float : left;
padding : 10px;
border-radius : 50px;
}
.slidebrand {
justify-content : center;
margin : 0 auto;
display : flex;
height : 400px;
width : 400px;
gap : 5px;
margin-top : 10px;
}
.slidebrand > div {
flex : 0.20;
background-position : center;
background-repeat : no-repeat;
background-size : auto 100%;
transition : all 0.8s cubic-bezier(0.25,0.4,0.45,1.4);
}
.slidebrand > div:hover {
flex : 5;
}
.fixed {
position : sticky;
z-index : 3;
top : 0;
}
.header {
width : 100px;
height : 60px;
padding : 0 40px;
box-sizing : border-box;
border : #000000 solid 1px;
border-radius : 10px;
}
.menu {
height : 100%;
display : flex;
align-items : center;
justify-content : center;
gap : 50px;
list-style : none;
}
.nav-item {
position : relative;
}
.nav-item:after {
content : '';
position : absolute;
width : 100%;
transform : scaleX(0);
height : 2px;
bottom : -4px;
left : 0;
background-color : #8B0000;
transform-origin : center;
transition : transform 0.3s ease-out;
}
.nav-item:hover:after {
transform : scaleX(1);
transform-origin : center;
}
::-webkit-scrollbar {
width : 10px;
height : 8px;
background-color : #fcfcfc;
}
::-webkit-scrollbar-thumb {
background-color : #0a0a0a;
border-radius : 9em;
box-shadow : 1px 1px 10px #FF0000 inset;
}
::-webkit-scrollbar-thumb:hover {
background-color : #253861;
}
#followme {
font-size : 10px;
position : absolute;
justify-content : center;
display : flex;
margin-top : 90px;
color : white;
font-style : oblique;
}
.nikwaylogo {
border-radius : 100px;
}
.columnpartner {
display : flex;
flex-flow : column wrap;
}
.list-unstyled li a {
text-decoration : none;
color : #C0C0C0;
}
.list-unstyled li a:hover {
color : #8B0000;
}
.fontcomicsans {
font-family : "Comic Sans MS";
}
@media (min-width: 1600px) {
.navbar-toggler {
display : none !important ;
}
}
.searchInput {
padding : 10px 10px;
}
nav ul li a {
font-family : "Comic Sans MS";
}
footer {
font-family : "Comic Sans MS";
}