/* page_architecture-b2b.less */

@import "main.less";

.page_architecture-b2b {
    .mobile_hide {
        @media @small_medium {
            display: none;
        }
    }

    .desktop_hide {
        display: none;

        @media @small_medium {
            display: flex;
        }
    }

    .architecture_b2b_subtitle_mobile {
        margin: 20px 0;
    }

    .architecture_b2b_header_container {
        background         : url(/userfiles/images/architecture_b2b/architectur_b2b_header.jpg);
        min-height         : 70vh;
        background-size    : cover;
        background-repeat  : no-repeat;
        background-position: center;
        position           : relative;

        @media @small {
            min-height: 25vh;
        }

        &:before {
            content         : '';
            position        : absolute;
            top             : 0;
            right           : 0;
            bottom          : 0;
            left            : 0;
            background-color: rgba(44, 57, 68, 0.3);
        }

        .architecture_b2b_header_text {
            z-index: 1;

            .architecture_b2b_title {
                font-family   : 'Barlow';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 70px;
                line-height   : 80px;
                letter-spacing: 2.8px;
                text-transform: uppercase;
                color         : #fff;

                @media @small {
                    font-weight: 700;
                    font-size  : 25px;
                    line-height: 28px;
                }
            }

            .architecture_b2b_subtitle {
                font-family: 'Roboto';
                font-style : normal;
                font-weight: 400;
                font-size  : 24px;
                line-height: 28px;
                color      : #fff;
            }
        }
    }

    .two_blocs_section {
        padding         : 100px 0;
        background-color: rgba(188, 191, 194, 0.15);


        @media @small_medium {
            padding: 40px 0;
        }

        .two_blocs_container {

            .bloc_one {
                margin-bottom: 180px;

                @media @small_medium {
                    margin-bottom: 50px;
                }
            }

            img {
                @media @small_medium {
                    margin-bottom: 40px;
                }
            }

            .text_container {
                color: #445B6D;

                .title {
                    font-family   : 'Barlow Semi Condensed';
                    font-style    : normal;
                    font-weight   : 700;
                    font-size     : 42px;
                    line-height   : 119%;
                    text-transform: uppercase;

                    @media @small {
                        font-size  : 25px;
                        line-height: 28px;
                    }
                }

                .text {
                    font-family: 'Roboto';
                    font-style : normal;
                    font-weight: 400;
                    font-size  : 22px;
                    line-height: 28px;
                    color      : #445B6D;

                    @media @small {
                        font-size: 17px;
                    }
                }
            }
        }
    }

    .projects_slider_container {
        padding: 120px 0;

        @media @small_medium {
            padding: 50px 0;
        }

        .project_slide_link {
            display        : block;
            width          : 100%;
            text-decoration: none;
        }

        .projects_header {
            color: #445B6D;

            .projects_header_title {
                font-family   : 'Barlow Semi Condensed';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 42px;
                line-height   : 119%;
                text-align    : center;
                text-transform: uppercase;

                @media @small {
                    font-size: 25px;
                }
            }

            .projects_header_subtitle {
                font-family: 'Roboto';
                font-style : normal;
                font-weight: 400;
                font-size  : 22px;
                line-height: 127%;
                text-align : center;

                @media @small {
                    font-size: 20px;
                }
            }
        }

        .projects_slider {
            padding: 60px 0;

            .slick-slide {
                margin: 0 27px;

                @media @small {
                    margin: 0;
                }

                &:not(:first-child) {
                    @media @small {
                        padding-left: 20px;
                    }
                }
            }

            .slick-arrow {
                filter: brightness(0) saturate(100%) invert(48%) sepia(38%) saturate(195%) hue-rotate(165deg) brightness(94%) contrast(87%);

                &::before {
                    font-size: 40px;
                }
            }

            .slick-prev {
                left: -55px;
            }

            .slick-next {
                right: -45px;
            }

            .slick-list {
                margin: 0 -27px;

                @media @small {
                    margin : 0;
                    padding: 0 20% 0 0 !important;
                }
            }

            .project_header {
                margin: 20px 0;

                .project_title {
                    font-family   : 'Barlow';
                    font-style    : normal;
                    font-weight   : 700;
                    font-size     : 32px;
                    line-height   : 112%;
                    letter-spacing: 1.71429px;
                    text-transform: uppercase;
                    color         : #445B6D;

                    @media @small {
                        font-size: 17px;
                    }
                }

                .project_desc {
                    font-family: 'Roboto';
                    font-style : normal;
                    font-weight: 400;
                    font-size  : 20px;
                    line-height: 24px;
                    color      : #000;

                    @media @small {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    .offers_section {

        .offers_header {
            color         : #445B6D;
            text-align    : center;
            padding-bottom: 30px;

            .offers_title {
                font-family   : 'Barlow Semi Condensed';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 42px;
                line-height   : 50px;
                text-align    : center;
                text-transform: uppercase;

                @media @small {
                    font-size  : 25px;
                    line-height: 31px;
                }
            }

            .offers_subtitle {
                font-family: 'Roboto';
                font-style : normal;
                font-weight: 400;
                font-size  : 22px;
                line-height: 28px;
                text-align : center;

                @media @small {
                    font-size  : 20px;
                    line-height: 24px;
                }
            }
        }

        .video_section {
            background         : url('/userfiles/images/architecture_b2b/backgroundpattern.png'), #262E37;
            background-position: bottom;
            background-repeat  : no-repeat;
            background-size    : contain;
            padding            : 110px 0;

            @media @small {
                padding: 80px 0;
            }

            .logo_newton {
                width        : 223px;
                margin-bottom: 20px;
            }

            .video_section_title {
                font-family: 'Barlow Semi Condensed';
                font-style : normal;
                font-weight: 700;
                font-size  : 42px;
                line-height: 50px;
                color      : #ACCBE4;

                @media @small {
                    font-size  : 25px;
                    line-height: 27px;
                }
            }

            .video_section_subtitle {
                font-family: 'Roboto';
                font-style : normal;
                font-weight: 400;
                font-size  : 20px;
                line-height: 26px;
                color      : #fff;

                @media @small {
                    font-size  : 18px;
                    line-height: 24px;
                }
            }

            .logo_newton.desktop_hide {
                margin    : 20px auto;
                margin-top: 0;
            }
        }
    }

    .products_section {
        background-color: #445B6D;
        padding         : 60px 0;

        @media @small {
            padding: 30px 0;
        }

        .products_slider {

            .products_slider_title {
                font-family   : 'Barlow';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 21px;
                line-height   : 50px;
                letter-spacing: 3px;
                text-transform: uppercase;
                color         : #FFFFFF;

                @media @small {
                    font-size  : 24px;
                    line-height: 27px;
                }
            }

            .products_slider_subtitle {
                font-family   : 'Barlow';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 32px;
                line-height   : 36px;
                letter-spacing: 1.71429px;
                text-transform: uppercase;
                color         : #ACCBE4;

                @media @small {
                    font-size  : 20px;
                    line-height: 24px;
                }
            }

            .products_slider_desc {
                font-family  : 'Barlow';
                font-style   : normal;
                font-weight  : 400;
                font-size    : 20px;
                line-height  : 24px;
                color        : #FFFFFF;
                margin-bottom: 0;
            }

            .slick-prev {
                left: 0;
            }

            .slick-next {
                right: 0;
            }
        }
    }

    .systems_section {
        background-color: #E0E8EE;
        padding-top     : 100px;
        color           : #445B6D;

        @media @small {
            padding: 30px 0;
        }

        .systems_section_header {
            margin-bottom: 40px;

            .systems_section_header_title {
                color         : #445B6D;
                font-family   : 'Barlow';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 42px;
                line-height   : 50px;
                text-align    : center;
                text-transform: uppercase;
            }

            .systems_section_header_desc {
                color        : #000000;
                font-family  : 'Barlow';
                font-style   : normal;
                font-weight  : 400;
                font-size    : 22px;
                line-height  : 28px;
                text-align   : center;
                margin-bottom: 100px;

                @media @small {
                    font-size    : 18px;
                    line-height  : 20px;
                    margin-bottom: 40px;
                }
            }
        }

        .systems_container {
            margin-bottom: 100px;

            @media @xxlarge {
                align-items: center;
            }

            @media @small_medium {
                margin-bottom: 20px;
            }

            .system_img {

                @media @small_medium {
                    margin-bottom: 30px;
                }
            }

            .system_anim {
                background       : url(/userfiles/images/architecture_b2b/cercle-bg.svg);
                background-size  : contain;
                background-repeat: no-repeat;
            }

            .systems_icons {
                margin-bottom: 60px;

                >div:not(:first-of-type) {
                    border-left: 1px solid #445B6D;

                    @media @small {
                        border-left: none;
                        border-top : 1px solid #445B6D;
                        margin-top : 20px;
                        padding    : 0;
                    }
                }
            }

            .systems_desc_container {
                padding-left: 40px;

                .systems_desc {
                    margin     : 0;
                    font-family: 'Barlow';
                    font-style : normal;
                    font-weight: 400;
                    font-size  : 20px;
                    line-height: 24px;

                    @media @small {
                        font-size  : 16px;
                        line-height: 18px;
                        margin-top : 20px;
                    }
                }
            }

            .systems_title {
                font-family   : 'Barlow';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 29px;
                line-height   : 33px;
                letter-spacing: 0.5px;
                text-transform: uppercase;

                @media @small {
                    font-size  : 20px;
                    line-height: 25px;
                }
            }

            .systems_subtitle {
                font-family   : 'Barlow Semi Condensed';
                font-style    : normal;
                font-weight   : 700;
                font-size     : 24px;
                line-height   : 29px;
                letter-spacing: 0.690476px;

                @media @small {
                    font-size  : 20px;
                    line-height: 19px;
                }
            }
        }

        .systems_title {
            letter-spacing   : 1.28571px;
            text-transform   : uppercase;
            // margin        : 40px 0;
            font-family      : 'Barlow';
            font-style       : normal;
            font-weight      : 600;
            font-size        : 29px;
            line-height      : 34px;
            // text-align    : center;

            @media @small {
                font-size  : 25px;
                line-height: 28px;
            }
        }

        .systems_subtitle {
            font-family      : 'Barlow Semi Condensed';
            font-style       : normal;
            font-weight      : 700;
            font-size        : 24px;
            line-height      : 29px;
            // text-align    : center;
            letter-spacing   : 0.690476px;
        }

        .systems_desc {
            font-family  : 'Barlow';
            font-style   : normal;
            font-weight  : 400;
            font-size    : 20px;
            line-height  : 24px;
            color        : #000;
            margin-bottom: 20px;
            text-align   : left;

            @media @small {
                font-size  : 16px;
                line-height: 18px;
            }
        }

        .system_content {
            margin-bottom: 60px;
        }

        .motorisation_systems {
            margin-top: 40px;
        }

        .chainette_slider {
            @media @small_medium {
                margin-top: 40px;
            }
        }

        .systems_slider {
            text-align   : center;
            margin-bottom: 60px;

            img {
                width: 300px;
            }

            .slick-arrow {

                &::before {
                    display: none !important;
                }
            }

            .slick-prev {
                left  : 0;
                width : 63px;
                height: 127px;
            }

            .slick-next {
                right : 0;
                width : 63px;
                height: 127px;
            }
        }
    }

    .fabrics_section {
        padding         : 150px 0;
        background-color: #EAF0F4;

        @media @small {
            padding-top   : 40px;
            padding-bottom: 40px;
        }

        .fabrics_title {
            font-family: 'Barlow';
            font-style : normal;
            font-weight: 700;
            font-size  : 38px;
            line-height: 46px;
            color      : #445B6D;

            @media @small {
                margin-top : 20px;
                font-size  : 25px;
                line-height: 28px;
            }
        }

        .fabrics_desc {
            font-family: 'Barlow';
            font-style : normal;
            font-weight: 400;
            font-size  : 20px;
            line-height: 24px;
            color      : #000000;
        }
    }

    .contacts_section {
        padding-top: 100px;

        @media @small_medium {
            padding: 20px 0;
        }

        .top_footer_wrap {
            margin-bottom: 0;
        }

        .top_footer_title {
            text-transform: uppercase;
            margin-bottom : 0;
        }

        .top_footer_subtitle {
            font-family  : 'Barlow Semi Condensed';
            font-style   : normal;
            font-weight  : 400;
            font-size    : 31px;
            line-height  : 50px;
            margin-bottom: 50px;
            color        : #262E37;

            @media @small {
                font-size  : 17px;
                line-height: 23px;
                margin-top : 20px;
            }
        }

        .address {
            @media @small {
                margin-bottom: 40px;
            }
        }

        .top_footer_header {
            margin: 0;
        }

        .address_title {
            font-family   : 'Barlow Condensed';
            font-style    : normal;
            font-weight   : 400;
            font-size     : 32px;
            line-height   : 100%;
            text-transform: uppercase;
            color         : #445B6D;
        }

        .address_desc {
            font-family: 'Roboto';
            font-style : normal;
            font-weight: 400;
            font-size  : 16px;
            line-height: 125%;
            color      : #000000;

            .email_address {
                margin : 40px 0;
                display: block;
            }
        }
    }

    .contact_altex_badge {
        position    : -webkit-sticky;
        position    : sticky;
        bottom      : 10px;
        text-align  : right;
        z-index     : 2;
        margin-right: 10px;

        @media @small {
            margin-right: 0;
        }

        img {
            width: 110px;

            @media @xlarge {
                width: 160px;
            }
        }

        .white_icon {
            filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(121deg) brightness(107%) contrast(101%);
        }
    }
}