@import url("fonts.css");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {

    font-size: 20px;
    font-family: 'Akrobat-SemiBold', Arial, sans-serif;
    background-color: #f3f3f3;
}

#body-main {
    header {
        background-image: none;
        box-shadow: none;
    }
}

#body-page {
    padding-top: 100px;

    .top-line {
        height: 100px;
        background-image: linear-gradient(135deg, #022fff, #000);

        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        box-shadow: 5px 5px 5px 0 lightgrey;

        img.top-line__logo {
            width: 30px;
        }
        .top-line__brand {
            font-size: 0.7em;
        }
        .top-line__direction {
            font-size: 0.7em;
        }
    }
}

.top-line.active {
    background-image: linear-gradient(135deg, #022fff, #000)!important;
}

h1 {
    font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    /*margin-bottom: 70px;*/
    letter-spacing: -0.9px;
    position: relative;
    color: #333333;
    transition: width 500ms ease;
    width: auto;
    display: inline-block;
    text-align: left;

    &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        background-color: #002fff;
        width: 70px;
        height: 4px;
    }

    &::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        color: #333333;
        transition: width 500ms ease;
        width: 0;
        white-space: nowrap;
        text-decoration: none;
    }

    &:hover::before {
        width: 100%;
        color: black;
        transition: width 500ms ease;
    }

    &.main-detail__header {
        background-image: linear-gradient(to right, #002fff, #4061ff);
        background-repeat: no-repeat;
        background-size: 70px 4px;
        background-position: left bottom;
        padding-bottom: 2px;
        text-decoration: none;
        transition: 0.5s;
    }
    &.main-detail__header:hover {
        background-size: 100% 4px;
        color: white;
        color: black;
    }
}


h2 {
    font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
    margin-bottom: 20px;
    color: #4b4b4b;
    position: relative;
    font-size: 2em;
    padding-bottom: 5px;
    text-transform: uppercase;
    display: inline-block;
    text-align: left;

    /*&.content-block__header::after, &.header::after {*/
    &.content-block__header::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        background-color: #b1d1f5;
        width: 100px;
        height: 2px;
    }

    /*&.content-block__header::before, &.header::before {*/
    &.content-block__header::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        color: #333333;
        transition: width 500ms ease;
        width: 0;
        white-space: nowrap;
        text-decoration: none;
    }

    /*&.content-block__header:hover::before, &.header:hover::before {*/
    &.content-block__header:hover::before {
        width: 100%;
        color: black;
        transition: width 500ms ease;
    }

    /*&.content-block__header, &.header { */
    &.content-block__header {
        background-image: linear-gradient(to right, #b1d1f5, #e2edff);
        background-repeat: no-repeat;
        background-size: 40px 2px;
        background-position: left bottom;
        padding-bottom: 2px;
        text-decoration: none;
        transition: 0.5s;
    }

    /*&.content-block__header:hover, &.header:hover {*/
    &.content-block__header:hover{
        background-size: 100% 2px;
        color: black;
    }

    &.content-block__sub-header {
        color: #002fff;
        display: block;
        margin-top: -10px;
    }
}


/*h3 {*/
/*    font-family: 'GraphikLCG-Semibold', Arial, sans-serif;*/
/*    padding-bottom: 16px;*/
/*    color: #414141;*/
/*    !*color: gray;*!*/
/*    width: 100%;*/
/*    text-align: center;*/
/*}*/

/*h4 {*/
/*    !*font-family: 'GraphikLCG-Semibold', Arial, sans-serif;*!*/
/*    font-family: 'Akrobat-SemiBold', Arial, sans-serif;*/
/*}*/

/*h5 {*/
/*    !*font-family: 'GraphikLCG-Semibold', Arial, sans-serif;*!*/
/*    font-family: 'Akrobat-Semibold', Arial, sans-serif;*/
/*}*/

/*!*section.section-wide:first-child {*!*/
/*!*    background-color: rgba(171, 56, 56, 0.9);*!*/
/*!*}*!*/
/*!*section.section-wide:nth-child(2) {*!*/
/*!*    background-color: rgba(100, 48, 48, 0.9);*!*/
/*!*}*!*/
/*!*section.section-wide:nth-child(odd) {*!*/
/*!*    background-color: green;*!*/
/*!*}*!*/
/*!*.main-page-detail {*!*/
/*!*    !*background-color: rgba(100, 48, 48, 0.9);*!*!*/
/*!*}*!*/

/*.main-page-detail.section-wide {*/
/*    !*background-color: rgba(220, 219, 219, 0.9);*!*/
/*    padding: 70px 0 30px 0;*/
/*}*/

/*section {*/
/*    font-size: 1.4em;*/
/*    text-align: justify*/
/*}*/

a {
    text-decoration: none;
    color: #383838;
}



.main {
    position: relative;
    /*height: 100vh;*/
    /*background-image: url("/local/templates/mkweb/static/images/main-back.jpg");*/
    background-size: contain;
    background-size: cover;
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat;

    /*.container {*/
    /*    padding: 0;*/
    /*    width: 100%!important;*/
    /*    max-width: 100%!important;*/
    /*}*/
}

.main::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 1, 33, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.main-screen__slider {
    width: 100%;
}

.main-screen__slider video {
    width: 100%;
}

/*video {*/
/*    max-width: 100%;*/
/*    max-height: 100%;*/
/*    display: block;*/
/*}*/
.main {
    video {
        max-width: 100%!important;
        max-height: 100%!important;
        display: block;
        border-radius: 0;
    }
}

.brand-block {
    width: 100%;
    /*position: absolute;*/
    /*bottom: 0;*/
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /*top: 150px;*/

}


.top-line {
    position: sticky;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 200px;*/
    /*border: 1px solid yellow;*/

    .row {
        /*height: 100%;*/
    }

    ul {
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: start; */
        list-style-type: none;
        margin-bottom: 0;


        li {
            display: inline;
            padding: 0 20px;

            a {
                position: relative;
                display: inline-block;
                color: #383838;
                /*color: #d4d3d5;*/
                /* font-size: 0.8em; */
                /* font-weight: 800; */
                text-decoration: none;
                /* border-bottom: 1px solid red; */
                overflow: hidden;

                &::before {
                    content: attr(data-item);
                    position: absolute;
                    top: 0;
                    left: 0;
                    overflow: hidden;
                    color: rgb(82, 4, 4);
                    color: maroon;
                    color: lightgrey;
                    transition: width 500ms ease;
                    width: 0;
                    white-space: nowrap;
                    text-decoration: none;
                    /* border-bottom: 1px solid green; */
                }

                &:hover::before {
                    width: 100%;
                    color: white;
                }
            }

            a.nav {
                /*background-image: linear-gradient(to right, #2b263e, #e90b8b);*/
                background-image: linear-gradient(to right, #b7b6b6, #fff);
                background-repeat: no-repeat;
                background-size: 10px 1px;
                /* background-size: 0 0; */
                background-position: left bottom;
                padding-bottom: 2px;
                text-decoration: none;
                transition: 0.5s;
                font-size: 1em;
                color: #d4d3d5;
            }
            a.nav:hover {
                background-size: 100% 1px;
                color: white;
            }
        }
    }
}

.main, .page {
    .top-line {
        /*border: 1px solid red;*/
        /*height: 200px;*/
    }

    .top-line__brand-block {
        /*border: 1px solid red;*/
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*height: 250px;*/
        font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
        cursor: pointer;
    }

    img.top-line__logo {
        width: 55px;
        /*height: 80px;*/
        display: block;
    }

    .top-line__brand, .top-line__direction {
        color: #424141;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.5em;
        display: block;
        letter-spacing: 8px;
    }
    .top-line__direction {
        font-size: 0.5em;
        letter-spacing: 0;
    }

    .brand-block {
        /*position: relative;*/
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /*height: calc(100vh - 200px);*/
        /*border: 1px solid red;*/
        /*gap: 200px;*/
        font-weight: bold;
    }

    .brand-block__brand, .brand-block__direction {
        /*border: 1px solid yellow;*/
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12em;
        display: block;
        letter-spacing: 8px;
    }

    .brand-block__brand {
        font-size: 12em;
        padding-bottom: 140px;
        /*margin-bottom: 140px;*/
    }

    .brand-block__direction {
        font-size: 10em;
        letter-spacing: 0;
        font-weight: normal;
        padding-top: 200px;
        /*margin-top: 200px;*/
    }
}

.top-line, .menu {
    /*border: 1px solid lightblue;*/
    /*height: 100%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding-bottom: 5px;*/
}

.header-wrapper .header__burger {
    display: none;
    align-items: center;
    gap: 5px;
    height: 40px;
    width: 40px;

    span {
        background: #fff;
        position: relative;
        display: block;
        width: 16px;
        height: 1px;
    }
}

.header-wrapper__left-part {
    /*border: 1px solid blue;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*width: 100%;*/
}
.header-wrapper__right-part {
    /*border: 1px solid green;*/
}

header {
    width: 100%;
    height: 100px;
    background-image: linear-gradient(135deg, #022fff, #000);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 5px 5px 5px 0 lightgrey;
}
.header-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
/*.header-wrapper__right-part {*/
/*    width: 100%;*/
/*}*/
.header__navigation {
    ul {
        /*border: 1px solid red;*/
        list-style-type: none;
        margin-bottom: 0;
        /*background-color: #022fff;*/
        /*background-image: linear-gradient(135deg, #022fff, #000);*/
    }
    li {
        /*border: 1px solid green;*/
        padding: 10px 20px;
        display: inline;

        a.nav {
            color: white;
            display: inline-block;
        }
    }
}
.header-brand__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
    cursor: pointer;
    color: #424141;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    /*display: block;*/
    letter-spacing: 8px;
}
.header-brand__logo {
    width: 30px;
}
.header-brand__name {
    font-size: 1em;
}
.header-brand__name-direction{
    font-size:0.5em;
    letter-spacing: 0;
}
.header__search {
    min-width: 50px;
}

@media screen and (max-width: 1024px) {
    .header-wrapper {

    }
    .header-wrapper .header__burger {
        border: 1px solid #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header__burger.active span:first-child {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 4px;
    }
    .header__burger.active span:nth-child(2) {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 2px;
    }
    .header__burger.active span:last-child {
        display: none;
    }

    .header__navigation {
        display: none;
    }

    .header__navigation.active {
        display: flex;
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        /*gap: 20px;*/

        ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100%;
            padding: 20px 0;
            /*background-image: linear-gradient(135deg, #022fff, #000);*/
            background-color: #022fff;
        }

        li {

        }
    }

    .header-wrapper__left-part {
        /*border: 1px solid blue;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

}

@media (max-width: 2300px) {

    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 250px;*/
    /*    }*/
    /*}*/

    .top-line {
        & ul {
            & li {
                a.nav {
                    font-size: 1em;
                }
            }
        }
    }

    .main {
        .brand-block__brand {
            font-size: 12em;
            padding-bottom: 50px;
            /*margin-bottom: 100px;*/
        }
        .brand-block__direction {
            font-size: 10em;
            padding-top: 100px;
            /*margin-top: 100px;*/
        }
    }
}

@media (min-width: 2300px) {
    .top-line {
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 1400px;
            /*border: 1px solid green;*/
        }
    }

    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 350px;*/
    /*    }*/
    /*}*/

}

@media (max-width: 1920px) {
    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 250px;*/
    /*    }*/
    /*}*/
    .main {
        .brand-block__brand {
            font-size: 10em;
            /*padding-bottom: 70px;*/
            /*margin-bottom: 70px;*/
        }
        .brand-block__direction {
            font-size: 8em;
            /*padding-top: 130px;*/
            /*margin-top: 130px;*/
        }
    }
}

@media (max-width: 1800px) {
    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 220px;*/
    /*    }*/
    /*    .brand-block__brand {*/
    /*        font-size: 9em;*/
    /*    }*/
    /*    .brand-block__direction {*/
    /*        font-size: 6em;*/
    /*    }*/
    /*}*/
}

@media (max-width: 1600px) {
    .main {
        .brand-block__brand {
            font-size: 7em;
            /*padding-bottom: 20px;*/
            /*margin-bottom: 20px;*/
        }
        .brand-block__direction {
            font-size: 6em;
            /*padding-top: 130px;*/
            /*margin-top: 130px;*/
        }
    }
}

@media (max-width: 1400px) {
    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 180px;*/
    /*    }*/
    /*    .brand-block__brand {*/
    /*        font-size: 5em;*/
    /*    }*/
    /*    .brand-block__direction {*/
    /*        font-size: 2em;*/
    /*    }*/
    /*}*/

    .main {
        img.top-line__logo {
            width: 60px;
        }
        .top-line__brand {
            font-size: 1.5em;
        }
        .brand-block__brand {
            font-size: 7em;
            padding-bottom: 0;
        }
        .brand-block__direction {
            font-size: 5em;
            /*margin-top: 50px;*/
        }

    }

    .top-line {
        & ul {
            & li {
                a.nav {
                    font-size: 1em;
                }
            }
        }
    }
}

@media (max-width: 1400px) {
    /*.main2 {*/
    /*    img.brand-block__logo {*/
    /*        width: 180px;*/
    /*    }*/
    /*    .brand-block__brand {*/
    /*        font-size: 5em;*/
    /*    }*/
    /*    .brand-block__direction {*/
    /*        font-size: 2em;*/
    /*    }*/
    /*}*/

    .main {
        img.top-line__logo {
            width: 60px;
        }
        .top-line__brand {
            font-size: 1.5em;
        }
        .brand-block__brand {
            font-size: 7em;
        }
        .brand-block__direction {
            font-size: 5em;
        }

    }
}

@media (max-width: 1200px) {
    .main {
        .brand-block__brand {
            display: none;
        }

        .brand-block__direction {
            display: none;
        }
    }
}

@media (max-width: 900px) {
    body {
        font-size: 20px;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.1em;
    }
}

@media (max-width: 450px) {
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.2em;
    }
}

/*.items-list {*/
/*    font-family: 'Akrobat-Semibold', Arial, sans-serif !important;*/
/*    margin: 40px 0;*/
/*    .row {*/
/*        display: flex;*/
/*        justify-content: center;*/

/*    }*/
/*    [class^="col-"], [class^="col-"]:nth-child(0)  {*/
/*        display: flex;*/
/*        justify-content: center;*/
/*    }*/

/*    [class^="col-"]:nth-child(even) {*/
/*        display: flex;*/
/*        justify-content: flex-start;*/
/*    }*/
/*    [class^="col-"]:nth-child(odd) {*/
/*        display: flex;*/
/*        justify-content: flex-end;*/
/*    }*/
/*}*/