@import url('/css/fonts.css');

body{padding: 0; margin: 0; font-family: 'PT Sans', sans-serif; font-size: 18px; color: #433a4a; /*background: #000;*/}
a{color: #0089ff;}
a:hover{color: #f41224;}
/*a:visited{color: #b40eb4;}*/

h1{font-family: 'PT Sans Narrow', sans-serif; font-weight: bold; font-size: 42px; margin: 0 0 3rem;}

.container-head{display: flex; justify-content: center; background: #000; height: 90px; position: sticky; top: 0; width: 100%; z-index: 1000;}
.container-body{display: flex; justify-content: center;}
.container-footer{display: flex; justify-content: center;}

.body{width: 1000px; max-width: 100%; min-height: 600px; margin: 20px 0;}

.header{margin: 0 0 20px;}
.header .name{margin: 0 20px;}

.breadcrumbs{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; color: #816f8f; margin: 0 0 20px; padding: 0 20px;}
.breadcrumbs a{text-decoration: none; color: #816f8f;}
.breadcrumbs a:hover{color: #cec1d9;}

.afisha{position: relative;}
.afisha img{width: 100%;}

.afisha .image{border-radius: 15px; overflow: hidden; margin: 0 20px 30px;}

.sponsors{margin: 0 20px 30px;}
.sponsors .list{display: flex;}
.sponsors .item{width: calc(25%); margin: 0 5% 0 0;}
.sponsors .item .image{display: flex; align-items: center; width: 100%; aspect-ratio: 1/1;}
.sponsors .item .image img{display: block; width: 100%;}

.registration_btn{display: flex; /*position: absolute; top: 50%; right: 20%;*/ margin: 0 0 50px; justify-content: center;}

.registration{margin: 0 20px;}

.account{margin: 0 20px 50px;}

.message{margin: 0 20px;}

.races{}
.races .item{display: flex; margin: 0 0 30px;}
.races .item .image{width: 30%; height: fit-content; border-radius: 15px; overflow: hidden; margin: 0 20px 0 0;}
.races .item .image img{width: 100%;}
.races .item .data{}
.races .item .data .name{font-family: "PT Sans", sans-serif; font-size: 30px; font-weight: bold;}
.races .item .data .date{font-size: 15px;}
.races .item .data .action{margin: 10px 0 0;}
.races .item .data .action .date_end{margin: -10px 0 10px;}
.races .item .data .action .status{font-weight: bold; margin: 0 0 10px;}
.races .item .data .btns{margin: 10px 0 0;}

.race .number{display: flex; align-items: center; border-width: 10px; border-style: solid;  border-radius: 15px; color: #fff; height: 100px; width: fit-content; margin: 0 0 20px;}
.race .number .name{padding: 20px; line-height: 20px;}
.race .number .num{font-size: 60px; font-weight: bold; padding: 20px 20px 20px 0;}
.race .description{font-size: 15px;}

.gold{background: #e13e3e; border-color: #dc1727;}
.silver{background: #2b78ec; border-color: #1467e3;}
.bronze{background: #b2b40f; border-color: #9c9e0a;}
.iron{background: #e7e9ec; border-color: #d0d3d8; color: inherit !important;}

.apps{margin: 0 20px;}
.apps .level_samples{display: flex; margin: 0 0 20px;}
.apps .sample{font-size: 15px; color: #fff; width: fit-content; padding: 3px 5px; margin: 0 5px 0 0; border-width: 5px; border-style: solid; border-radius: 10px;}
.apps .start_number{color: #fff; padding: 1px 5px; border-width: 5px; border-style: solid; border-radius: 10px;}

.login{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.login .form{width: 420px; max-width: calc(100% - 20px); padding: 30px; border-radius: 24px; background: #fafafa;}

@media screen and (max-width: 640px) {
    h1{margin: 0 0 30px;}

    .sponsors .list{flex-wrap: wrap;}
    .sponsors .item{width: 45%; margin-bottom: 5%;}

    .races .item{display: block;}
    .races .item .image{width: 100%; margin: 0 0 10px 0;}
}