body {
    font-family: "DIN Pro";
    font-display: swap;
    overflow-x:hidden;
}

body * {
    transition: all 0.3s ease;
}

.over-h {
    overflow-x:hidden;
}

.menu_row {
    align-items: start;
    margin-top:2rem;
}

.main-menu-pc {
    display:flex;
    align-items: start;
    justify-content: space-between;
    margin:0;
    & li {
        list-style-type:none;
        margin:0;
        & a {
            color:#000000;
            font-weight:400;
            text-transform: uppercase;
            font-size:16px;
            text-decoration: none;
            &:hover {
                color:#ED1C24;
                font-weight:600;
                border-bottom:4px #ED1C24 solid;
            }
        }
    }
}

.btn-main {
    background: #fff;
    border-radius:30px;
    color:#ED1C24;
    font-weight:600;
    text-transform: uppercase;
    border:2px transparent solid;
    &:hover {
        border:2px #fff solid;
    }
}

.btn-main.outline {
    font-weight:400;
    border:#ED1C24 2px solid!important;
    &:hover {
        background:#ED1C24;
        color:#fff;
    }
}

.cta {
    background:#ED1C24;
    border-radius:100%;
    color:#fff;
    text-align:center;
    min-height:176px;
    display:flex;
    align-items:center;
    flex-direction: column;
    justify-content: center;
    gap:5px;
    & a:not(.btn-main) {
        color:#fff;
        font-weight:600;
        text-decoration:none;
        &:hover {
            text-decoration: underline;
        }
    }
}

h1 {
    font-family: "DIN Pro Cond";
    font-weight: 800;
    color:#ED1C24;
    font-size:72px;
    line-height: normal;
    transition: all 0.3s ease;
}

h3 {
    font-weight:600;
}

h3.left {
    position: relative;
    &:before {
        content:"";
        background:#1076BB;
        height:7px;
        border-radius: 10px;
        position: absolute;
        top: 15px;
        left: -100vw;
        width: 100vw;
    }
    &.red:before {
        background:#ED1C24;
    }
}

h3.right {
    position: relative;
    &:before {
        content:"";
        background:#1076BB;
        height:7px;
        border-radius: 10px;
        position: absolute;
        top: 15px;
        right: -100vw;
        width: 100vw;
    }
    &.red:before {
        background:#ED1C24;
    }
}

#banner {
    background:url('/images/kv.png') no-repeat right;
    background-size: contain;
    min-height: 500px;
    position: relative;
    &:before {
        content: "";
        width:50vw;
        height:8px;
        background:#ED1C24;
        border-radius:100px;
        position: absolute;
        left:-52vw;
        top:25%;
    }
}

#rules {
    background: url('/images/chemi.svg') top left no-repeat;
}

.rules-content {
    background: #ED1C24;
    border-radius: 100%;
    padding: 50px 0;
    color:#fff;
    max-width: 1000px;
    margin: 0 auto;
}

.steps {
    display: flex;
    gap:70px;
    min-height:250px;
    color:#fff;
    align-items: start;
    padding:0 70px;

    & .step-name {
        font-weight:600;
        & .step-desc {
            font-weight:400;
            line-height: normal;
            text-align: left;
        }
    }

    & .step-num {
        border:2px #fff solid;
        border-radius:100%;
        width:30px;
        height:34px;
        display:inline-table;
        text-align: center;
        font-weight:900;
        font-family: "DIN Pro Cond";
        line-height:28px;
        min-width: 34px;
    }

    & .step {
        flex:1;
        text-align: center;
        display: grid;
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 30px;
        & .step-content {
            display:flex;
            gap:10px;
            align-items: start;
            text-align: left;
        }
        & small {
            font-size:8px;
            line-height: normal;
            display: block;
        }
    }
}

.prize-block-title {
    text-transform: uppercase;
    font-weight:600;
    padding:30px 0;
    font-size:26px;
    & span {
        padding:0 50px;
        background:#fff;
    }
}

#prizes {
    overflow: hidden;
}

.dop-prize {
    position: relative;
    &:after {
        content:"";
        background:#1076BB;
        height:7px;
        border-radius: 10px;
        position: absolute;
        width:200px;
        top:46px;
        left:0px;
        z-index: -1;
    }
    &:before {
        content:"";
        background:#1076BB;
        height:7px;
        border-radius: 10px;
        position: absolute;
        width:200px;
        top:46px;
        left:670px;
        z-index: -1;
    }
}

.prizes-wrapp {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    align-items: start;
    justify-content: space-between;
    gap: 30px;
}

.headprize {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    & .prize-label {
        padding:15px 30px;
        border-radius:30px;
        background:#1076BB;
        color:#fff;
        text-transform: uppercase;
        font-weight: 600;
        & sup {
            text-transform: lowercase;
        }
    }
}

.smallprize {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.smallprize .prize-name {
    text-align: center;
}

.prize-image-wrapp .prize-cnt {
    background:#1076BB;
    color:#fff;
    width:29px;
    height:29px;
    font-weight:700;
    display: block;
    text-align: center;
    line-height: 29px;
    border-radius:100%;
    position: absolute;
    top:20px;
    right:60px;
}

.form {
    background: #ED1C24;
    border-radius: 80% 100%;
    color:#fff;
    padding:100px 0;
    position: relative;
    & .form-control {
        border-radius:40px;
        text-indent: 5px;
    }
}

.form:after {
    content:"";
    right:50px;
    top:200px;
    background: url('/images/chemie2.svg') no-repeat;
    width:100px;
    height:80px;
    background-size: contain;
    position: absolute;
}

.form:before {
    content:"";
    left:0;
    bottom:0;
    background: url('/images/cat.png') no-repeat;
    width:300px;
    height:200px;
    background-size: contain;
    position: absolute;
}

.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
    height:40px!important;
    min-height: unset;
}

.form-select {
    border-radius:30px;
    background-color:#F0F0F0;
}

.form-floating>label {
    padding:5px 15px;
    font-size:14px;
    width:100%;
}

#footer {
    font-size:10px;
    color:#CCCCCC;
}

@media (max-width:1400px) {
    h1 {
        font-size:48px;
        transition: all 0.3s ease;
    }
}

@media (max-width:991px) {
    #banner {
        background:none;
    }
    h1 {
        font-size:28px;
    }
    .rules-content {
        border-radius:30px;
        padding:25px;
    }
    .steps {
        flex-direction: column;
        gap:15px;
        padding:0;
        & .step {
            width:100%;
        }
        & .step-num {
            min-width:34px;
        }
    }
    .headprize {
        height:auto;
    }
    .prizes-wrapp {
        grid-template-columns: repeat(2,1fr);
        gap:15px;
    }
    .form {
        border-radius:30px;
        padding:20px;
        &:after {
            right:-30px;
            top:-20px;
        }
        &:before {
            width:150px;
            height:100px;
            bottom:-80px;
        }
    }
    .form-questions {
        display:flex;
        flex-direction: column;
        gap:15px;
    }
    .menu_row {
        align-items: center;
        margin-top:0;
    }
    #banner {
        min-height:auto;
        margin:30px 0;  
    }
    .offcanvas {
        max-width:80%;
    }
}