@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200&display=swap');

/* Variables */        
:root
    {
    --main-color: #fff;
    --active-color: #fff;
    --dark-color: #111111; 
    --black-color: #1b1b1b;
    --bg-color: #fef6ef;
    }

html, body 
    {
    height: 100%;
    }
body 
    {
    font-family: "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: var(--main-color);
    background-color: var(--bg-color);
    }
.raleway-font
    {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    }

* html #wrap 
    {
    height: 100%;
    }
    body #wrap 
        {
        min-height: 100%;
        width: 100%;
        margin: auto;
        position: relative;
        }



/* Mobile button */
.mm_button
    {
    display: none;
    position: absolute;
    right: 15px;
    top: 0px;
    width: 45px;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 100;
    }
    .mm_button span 
        {
        background: var(--active-color);
        display: block;
        height: 3px;
        width: 100%;
        margin: 6px 0;
        border-radius: 2px;
        }
    


section,
.container,
.row
    {
    position: relative;
    margin: 0 auto;
    }


section,
.secondary footer
    {    
    background: var(--bg-color);
    }



a
    {
    color: var(--main-color);
    text-decoration: none;
    }
    a:hover,
    a:focus
        {
        color: var(--active-color);
        }

p
    {
    margin-bottom: 15px;
    color: var(--main-color);
    }


/* Main elements */
h1,h2,h3,h4
    {
    color: var(--main-color);
    padding: 15px 0 25px 0; 
    font-weight: 400;
    }
h1,h2
    {
    font-family: "Raleway", sans-serif;
    }

h1
    {
    font-size: 60px;
    }
h2
    {
    font-size: 40px;
    }


.full_height
    {
    height: 100vh;
    }




.zoom
    {
    transition: transform 0.5s ease;
    }
    .zoom:hover
        {
        transform: scale(1.2);
        }

.fade
    {
    opacity: 0.5;
    }

.skew
    {
    position: relative;
    }
    .skew:after
        {
        content: " ";
        position: absolute;
        display: block;
        width: 30px;
        height: 100%;
        top: 0;
        right: 0;
        
        border-right: 1px solid #fff;
        
        transform-origin: center center;
        transform: skew(-5deg, 0deg);
        }


.a4-btn 
    {
    position: relative;
    --btn-width:  300px;
    --btn-height: 48px;

    width: var(--btn-width);
    height: var(--btn-height);

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    background: 
        linear-gradient(90deg, #fff  60%, transparent 60%), 
        linear-gradient(90deg, #fff 60%, transparent 60%), 

        linear-gradient(180deg, #fff 50%, transparent 50%), 
        linear-gradient(0deg,  #fff 50%, transparent 50%);


    background-repeat: 
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;

    background-size: 
        150% 1px,
        150% 1px,
        1px 200%,
        1px 200%;
    
    background-position: 
        calc(var(--btn-width) / -2) 0,
        calc(var(--btn-width) * 0.6) 100%,
        0  0px,
        100% calc(var(--btn-height) * -1);
    
    padding: 10px;

    box-sizing: border-box;
    transition: background-color, color 0.5s ease;
    }
.a4-btn:hover
    {
    animation: spin 1s infinite ease running;
    background-color: rgba(255,255,255,0.1);
    }


.a4-btn.invert
    {
    background: 
        linear-gradient(90deg,  var(--dark-color) 60%, transparent 60%), 
        linear-gradient(90deg,  var(--dark-color) 60%, transparent 60%), 

        linear-gradient(180deg, var(--dark-color) 50%, transparent 50%), 
        linear-gradient(0deg,   var(--dark-color) 50%, transparent 50%);

    background-repeat: 
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;

    background-size: 
        150% 1px,
        150% 1px,
        1px 200%,
        1px 200%;
    
    background-position: 
        calc(var(--btn-width) / -2) 0,
        calc(var(--btn-width) * 0.6) 100%,
        0  0px,
        100% calc(var(--btn-height) * -1);
    
    color: var(--dark-color);
    }
.a4-btn.invert:hover
    {
    background-color: rgba(0,0,0,0.1);
    color: var(--dark-color);
    }


.a4-btn-secondary.disabled
    {
    opacity: 0.3;
    pointer-events: none;
    }



@keyframes spin {
  100% {
    background-position: 
        var(--btn-width) 0,
        calc(var(--btn-width) / 2 * -1.8) 100%,
        0 calc(var(--btn-height) * -2),
        100% var(--btn-height);
      }
    }


    .a4-btn.icon
        {
        padding-left: 50px;
        }
    .a4-btn.icon:before
        {
        position: absolute;
        display: block;
        content: ' ';
        width: 40px;
        height: 40px;
        top: calc((var(--btn-height) - 40px) / 2);
        left: 10px;
        background-position: center center;
        background-repeat: no-repeat;
        }


    .calc:before         { background-image: url('/img/icons/calc.svg')    }
    .consult:before      { background-image: url('/img/icons/consult.svg') }
    .callback_btn:before { background-image: url('/img/icons/phone.svg') }


.a4-btn-secondary
    {
    display: inline-block;
    padding: 12px 40px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 20px;
    transition: background-color 0.2s ease-in;
    border: 1px rgba(0,0,0,0.7) solid;
    cursor: pointer;
    }
    .a4-btn-secondary:hover
        {
        background-color: var(--active-color);
        color: var(--dark-color);
        }




/* Crumbreads */
.crumbreads a 
    {
    text-decoration: none;
    font-size: 12px;
    }
    .crumbreads a:hover 
        {
        text-decoration: underline;
        }
    .crumbreads > span + span::before 
        {
        padding: 0 5px;
        color: #000;
        content: "/ ";
        }


.invert img
    {
    filter: invert(100%);
    }
    



.question_form_wrap.form_small
    {
    font-family: Arial;
    }
    .question_form_wrap .disclaimer
        {
        font-size: 12px;
        margin-bottom: 10px;
        }
    .question_form_wrap h4
        {
        font-size: 25px;
        }
    .question_form_wrap input,
    .order_form_wrap input
        {
        box-sizing: border-box;
        font-size: 17px;
        padding: 12px 15px;
        margin: 10px 0;
        }
    .question_form_wrap input
        {
        width: 100%;
        }

    
    .question_form_wrap.form_small form
        {
        margin-bottom: 35px;
        }
    .question_form_wrap.form_small a[href^='tel']
        {
        margin: 20px 0;
        display: block;
        color: var(--dark-color);
        font-size: 28px;
        }
        .question_form_wrap.form_small a[href^='tel']:hover
            {
            color: var(--active-color);
            }

    .question_form_wrap.form_small .soc_icons
        {
        display: flex;
        gap: 15px;
        }






/* Header */

header
    {
    font-family: var(--raleway-font);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    }

    header .video_wrap
        {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        }
        header .video_wrap:after
            {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            }

        header .video_wrap .video_bg
            {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            }
        
    
    header .top_row
        {
        }
        header .top_row .top_menu_bar
            {
            width: 1200px;
            position: fixed;
            z-index: 1000;
            }
    header
        {
        background-image: url('/img/header_bg.jpg');
        }
    .index header,
    .index header > .container
        {
        height: 100vh;
        }
    .doc_type_a4_service header,
    .doc_type_a4_service header > .container
        {
        min-height: 600px;
        }

    .index header > .container
        {
        padding: 20px 0 80px 0;
        }
    .index header > .container,
    .secondary header > .container
        {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        }
    header .subtitle
        {
        margin: 20px 0 40px 0;
        text-align: center;
        }
    
    .secondary header > .container
        {
        justify-content: flex-start;
        }
    .secondary header:before
        {
        content: ' ';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        }
        .secondary header > .container .top_row
            {
            margin-bottom: 100px;
            }
       .secondary.doc_type_a4_blog header:before,
       .secondary.doc_type_a4_portfolio header:before
           {
           display: none;
           }




        header > .container > *
            {
            width: 100%;
            }
        header > .container > h1
            {
            width: 70%;
            text-align: center;
            }
        .secondary header > .container > h1
            {
            color: #fff;
            font-size: 40px;
            margin-bottom: 40px;
            }
        header .menu_btn
            {
            font-family: "Raleway", sans-serif;
            font-size: 24px;
            text-shadow: 2px 2px 4px rgb(0, 0, 0);
            }
    
    header .buttons_row
        {
        justify-content: center;
        gap: 110px;
        }

    header .soc_icons
        {
        display: flex;
        justify-content: center;
        gap: 40px;
        }
        header .soc_icons img
            {
            width: auto;
            }
/* /Header */



.index section
    {
    font-family: "Raleway", sans-serif;
    font-size: 25px;
    }
    .index section h2
        {
        font-size: 40px;
        color: var(--black-color);
        }


/* Index - About */

section.about
    {
    background: url('/img/about_bg_desktop.jpg') center center no-repeat;
    background-size: cover;
    line-height: 32px;
    }    
    section.about h2
        {
        color: #fff;
        margin: 50px 0 100px 0;
        }
    section.about .col_1
        {
        background: rgba(0,0,0,0.5);
        }
    section.about .col_1.skew:after
        {
        transform-origin: bottom right;
        transform: skew(-2deg, 0deg);
        }

    
    section.about .container
        {
        align-items: stretch;
        }
    section.about .col_1,
    section.about .col_2
        {
        padding: 50px;
        box-sizing: border-box;
        }

        section.about .col_1 .text
            {
            width: 80%;
            font-size: 1cqw;
            }

    section.about .col_2
        {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right;
        }
        section.about .col_2 .text
            {
            display: none;
            }



/* /Index - About */



/* Index - Benefits */

section.benefits
    {
    padding: 70px 0;
    }
    section.benefits .bg
        {
        background: url('/img/benefits_bg_org.jpg') center center no-repeat;
        background-size: cover;
        }
    section.benefits .bg:before
        {
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        display: block;
        content: ' ';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
        section.benefits .item
            {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 400px;
            overflow: hidden;
            box-sizing: border-box;
            padding-left: 230px;
            cursor: pointer;
            }
            section.benefits .item:nth-child(1),
            section.benefits .item:nth-child(2)
                {
                border-bottom: 1px solid #fff;
                }
            section.benefits .item:nth-child(odd)
                {
                border-right: 1px solid #fff;
                }
            section.benefits .item .num
                {
                position: absolute;
                display: block;
                font-family: Helvetica;
                font-weight: 200;
                height: 270px;
                top: calc(50% - 135px);
                left: -60px;
                color: rgba(255,255,255,0.2);
                font-size: 260px;
                line-height: 270px;
                }
            section.benefits .item h3
                {
                margin: 0;
                }
            section.benefits .item .details
                {
                font-family: Arial;
                font-size: 20px;
                opacity: 0;
                max-height: 0;
                transition: all 700ms ease-in-out;
                padding-right: 10px;
                }
                section.benefits .item:hover .details,
                section.benefits .item:focus .details
                    {
                    padding-top: 20px;
                    opacity: 1;
                    max-height: 400px;
                    }
/* /Index - Benefits */




/* Index - Services */
section.services h2
    {
    color: var(--black-color);
    }
    section.services .bg
        {
        background: url('/img/services_bg_org.jpg') center center no-repeat;
        background-size: cover;
        }
        section.services .bg > .container
            {
            min-height: 820px;
            align-items: stretch;
            }
            section.services .item
                {
                font-family: "Raleway", sans-serif;
                font-size: 30px;

                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                }
                section.services .item a
                    {
                    text-shadow: 0 0 4px rgba(0,0,0,0.8);
                    transition: all 0.2s ease-in-out;
                    text-align: center;
                    }
                section.services .item:hover a
                    {
                    color: var(--active-color);
                    padding-bottom: 30px;
                    }
/* /Index - Services */




/* Index - Other Services */
section.other_services
    {
    padding: 0;
    }
    section.other_services .title_wrap
        {
        text-align: center;
        }
        section.other_services .title
            {
            display: inline-block;
            color: var(--black-color);
            position: relative;
            font-size: 26px;
            padding: 15px 30px 15px 0;
            }
        section.other_services .title:after,
        section.blog .more:after
            {
            display: block;
            position: absolute;
            top: 25px;
            right: 0;
            content: ' ';
            width: 16px;
            height: 16px;
            background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.29289 8.70711C7.68342 9.09763 8.31658 9.09763 8.70711 8.70711L15.0711 2.34314C15.4616 1.95262 15.4616 1.31945 15.0711 0.928927C14.6805 0.538403 14.0474 0.538403 13.6568 0.928928L8 6.58579L2.34314 0.928937C1.95262 0.538413 1.31945 0.538413 0.928927 0.928938C0.538403 1.31946 0.538404 1.95263 0.928929 2.34315L7.29289 8.70711ZM8 7L7 7L7 8L8 8L9 8L9 7L8 7Z" fill="black"/></svg>');
            background-position: right center;
            background-repeat: no-repeat;
            transition: transform 0.5s ease;
            }
        section.other_services.active .title:after
            {
            transform: scaleY(-1);
            }

    section.other_services .items
        {
        margin-top: 30px;
        display: flex;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        }
    section.other_services.active .items
        {
        max-height: 1000px;
        }
        section.other_services .items a 
            {
            color: var(--black-color);
            display: block;
            padding: 45px 0;
            flex: 0 0 45%;
            font-size: 24px;
            background-position: right center;
            background-repeat: no-repeat;
            border-bottom: 1px var(--black-color) solid;
            }
        section.portfolio_index .items .item .arrow,
        section.blog .items .item span:after,
        #modal_menu.modal_form .inner .col_1 a,
        .service_page .counter
            {
            background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" stroke="white"/><path d="M15.8513 12.5788C16.1708 12.2593 16.1708 11.7412 15.8513 11.4217L10.6444 6.21482C10.3249 5.8953 9.80686 5.8953 9.48734 6.21482C9.16782 6.53434 9.16782 7.05239 9.48734 7.37191L14.1157 12.0002L9.48734 16.6286C9.16782 16.9481 9.16782 17.4661 9.48734 17.7857C9.80686 18.1052 10.3249 18.1052 10.6444 17.7857L15.8513 12.5788ZM14.1819 12.0002L14.1819 12.8184L15.2728 12.8184L15.2728 12.0002L15.2728 11.1821L14.1819 11.1821L14.1819 12.0002Z" fill="white"/></svg>');
            }
        section.other_services .items a
            {
            background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" stroke="black"/><path d="M15.8513 12.5788C16.1708 12.2593 16.1708 11.7412 15.8513 11.4217L10.6444 6.21482C10.3249 5.8953 9.80686 5.8953 9.48734 6.21482C9.16782 6.53434 9.16782 7.05239 9.48734 7.37191L14.1157 12.0002L9.48734 16.6286C9.16782 16.9481 9.16782 17.4661 9.48734 17.7857C9.80686 18.1052 10.3249 18.1052 10.6444 17.7857L15.8513 12.5788ZM14.1819 12.0002L14.1819 12.8184L15.2728 12.8184L15.2728 12.0002L15.2728 11.1821L14.1819 11.1821L14.1819 12.0002Z" fill="black"/></svg>');
            }

            section.other_services .items a:hover
                {
                background-color: rgba(0,0,0,0.3);
                color: #fff;
                padding-left: 15px;
                background-position: calc(100% - 15px) center;
                }
/* /Index - Other Services */




/* Index - Portfolio block */
section.portfolio_index
    {
    padding: 0;
    }
    section.portfolio_index h2
        {
        color: var(--black-color);
        }
    .secondary .portfolio_index .container
        {
        width: 100%;
        }

    section.portfolio_index .items
        {
        gap: 5px;
        }
        section.portfolio_index .items .item
            {
            position: relative;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
            flex: 1 0 33%;
            height: 395px;
            overflow: hidden;
            }
            section.portfolio_index .items .item .hide
                {
                opacity: 0;
                color: #fff;
                transition: opacity 0.5s ease;
                }
            
            section.portfolio_index .items .item .name
                {
                font-size: 30px;
                text-align: center;
                }
            section.portfolio_index .items .item .arrow
                {
                position: relative;
                width: 22px;
                height: 22px;
                background-size: 100% 100%;
                }
        section.portfolio_index .items .item .portfolio_mask
            {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            transition: all 0.5s ease;
            }
        section.portfolio_index .items .item:hover .portfolio_mask
            {
            transform: scale(1.2);
            filter: brightness(0.4);
            }
        section.portfolio_index .items .item:hover .hide
            {
            opacity: 1;
            }

        section.portfolio_index .items .item a,
        section.portfolio_index .items .item .area,
        section.portfolio_index .items .item .arrow
            {
            z-index: +1;
            }



/* /Index - Portfolio block */



/* Index - Calculator */
section.calculator
    {
    padding: 50px 0;
    }
    section.calculator h2
        {
        color: var(--black-color);
        }
    
    section.calculator .row_bg
        {
        background: url('/img/calc_bg.jpg') center center no-repeat;
        background-size: cover;
        }
    section.calculator .a4-btn
        {
        font-size: 18px;
        }
    section.calculator .calc_progress_bar
        {
        height: 5px;
        background-color: #fff;
        box-sizing: border-box;
        }
    section.calculator input,
    section.calculator label
        {
        font-family: Arial;
        }
    section.calculator h3
        {
        font-weight: 500;
        }

    section.calculator h4
        {
        font-size: 20px;
        margin: 0 0 10px 0;
        padding: 0;
        }
    section.calculator .hint
        {
        display: inline-block;
        font-size: 15px;
        padding: 5px 15px;
        color: #fff;
        background: #888;
        margin-bottom: 10px;
        }
        section.calculator .hint.optimum { background: #04B91F }
        section.calculator .hint.premium { background: #3A4BFD }

    section.calculator .slider
        {
        }

    section.calculator .calc_steps
        {
        margin: 50px;
        box-sizing: border-box;
        }
        section.calculator .calc_steps .slide_line
            {
            align-items: flex-start;
            }
            section.calculator .step
                {
                padding: 30px 50px 50px;
                box-sizing: border-box;
                background-color: rgba(255,255,255,0.9);
                }

        
        section.calculator .step,
        section.calculator .step h3,
        section.calculator .step h4,
        section.calculator .step p
            {
            color: var(--dark-color);
            }
            section.calculator .step p
                {
                font-size: 15px;
                margin: 0;
                }
            section.calculator .step h3
                {
                text-align: center;
                }

        section.calculator .step_1_inputs
            {
            margin: 100px 0;
            font-size: 25px;
            justify-content: center;
            }
        section.calculator .step_1_inputs span.title
            {
            margin-right: 20px;
            }
            section.calculator .step_1_inputs input[type='text'],
            section.calculator .step_1_inputs input[type='number']
                {
                text-align: center;
                font-size: 32px;
                border: 0;
                background: none;
                border-bottom: 1px #000 solid;
                width: 300px;
                }
           input[type=number]::-webkit-inner-spin-button,
           input[type=number]::-webkit-outer-spin-button {
             -webkit-appearance: none;
             margin: 0;
           }

           /* Firefox */
           input[type=number] {
             -moz-appearance: textfield;
           }


            section.calculator .step_1_inputs input[type='text']:focus,
            section.calculator .step_1_inputs input[type='number']:focus
                {
                outline: 0;
                }
            section.calculator label
                {
                cursor: pointer;
                }
            section.calculator .step_1_inputs label
                {
                font-size: 17px;
                padding: 8px; 
                margin: 0 10px;
                }
            section.calculator .step input[type='radio']
                {
                display: none;
                }
            section.calculator .step_1_inputs input[type='radio']:checked + label
                {
                border-bottom: 1px #000 solid;
                }


        section.calculator .step_blocks
            {
            position: relative;
            display: flex;
            margin: 30px 0;
            }
            section.calculator .vertical_border
                {
                top: 0;
                left: 50%;
                position: absolute;
                width: 1px;
                height: 90%;
                background: #000;
                }

            section.calculator .step_blocks label
                {
                flex: 0 0 45%;
                display: flex;
                gap: 20px;
                padding: 10px 0;
                margin-bottom: 20px;
                }
            section.calculator .step_blocks label:not(:last-child)
                {
                border-bottom: 1px #000 solid;
                }
            section.calculator .step_2_inputs.step_blocks label
                {
                border: 0;
                }

            section.calculator .step_blocks input[type='radio']:checked + label
                {
                background-color: rgba(0,0,0,0.2);
                padding: 10px;
                }

            section.calculator .step_with_hint label
                {
                flex: 0 0 45%;
                display: block;
                padding: 15px 0;
                margin: 0;
                }
                section.calculator .step_with_hint label .inner
                    {
                    display: flex;
                    gap: 20px;
                    }

        /* Result step */ 
        section.calculator .step_8_inputs
            {
            align-items: stretch;
            font-family: Arial;
            margin-top: 30px;
            }
            section.calculator .step_8_inputs p
                {
                font-size: 17px;
                }
            section.calculator .step_8_inputs .result
                {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                }

                section.calculator .step_8_inputs .prop_type
                    {
                    text-transform: lowercase;
                    }
                section.calculator .step_8_inputs .result .intro
                    {
                    font-size: 20px;
                    }
                section.calculator .step_8_inputs .result .price
                    {
                    font-size: 50px;
                    }
                section.calculator .step_8_inputs .result .job_time
                    {
                    background: url('/img/icons/calendar.svg') left center no-repeat;
                    background-size: auto 100%;
                    padding-left: 70px;
                    }
                    section.calculator .step_6_inputs .result .job_time .fade
                        {
                        font-size: 20px;
                        margin-bottom: 5px;
                        }
                section.calculator .step_8_inputs .result h5
                    {
                    font-weight: 400;
                    }
                section.calculator .step_8_inputs .result .outro .fade
                    {
                    font-size: 17px;
                    margin: 25px 0;
                    }


        /* Final order form */ 
        section.calculator .step_9_inputs .logo_wrap
            {
            background-color: #adadad;

            }
            section.calculator .step_9_inputs h4
                {
                font-size: 24px;
                }
            section.calculator .step_9_inputs .text
                {
                color: rgba(0,0,0,0.7);
                flex-wrap: nowrap;
                gap: 20px;
                margin-bottom: 40px;
                }
            section.calculator .step_9_inputs .order_form_wrap,
            section.calculator .step_9_inputs .order_form_wrap .message_form_div
                {
                flex: 0 0 100%;
                }
            section.calculator .step_9_inputs .order_form_wrap .message_form_div
                {
                display: flex;
                justify-content: space-between;
                align-content: stretch;
                gap: 20px;
                }
                section.calculator .step_9_inputs .order_form_wrap form input
                    {
                    flex: 1 1 33%;
                    }
                section.calculator .step_9_inputs .order_form_wrap form input[type='text']
                    {
                    background: none;
                    border: 1px var(--dark-color) solid;
                    }
/* /Index - Calculator */



/* Index - Question Consult Form */
section.question_block
    {
    background: url('/img/questiong_form_bg_org.jpg') center top no-repeat;
    background-size: cover;
    padding: 60px 0;
    }
    section.question_block .intro
        {
        font-size: 18px;
        }
    section.question_block .question_form_wrap,
    section.question_block .question_form_wrap h4,
    section.question_block .question_form_wrap p,
    section.question_block .question_form_wrap a
        {
        color: var(--dark-color);
        }

    section.question_block .question_form_wrap
        {
        padding: 40px;
        width: 90%;
        background: rgba(255,255,255,0.9);
        margin: 80px auto;
        }
        section.question_block .question_form_wrap h4
            {
            text-align: center;
            font-size: 35px;
            padding: 0 0 40px 0;
            }
        section.question_block .question_form_wrap .message_form_div
            {
            gap: 20px;
            flex-wrap: nowrap;
            align-items: stretch;
            }
            section.question_block .question_form_wrap form input
                {
                display: block;
                flex: 1 1 30%;
                }
            section.question_block .question_form_wrap form input[type='text']
                {
                font-size: 20px;
                padding: 15px;
                background: none;
                border: 1px rgba(0,0,0,0.4) solid;
                }
        
        section.question_block .question_form_wrap .bottom_row
            {
            font-size: 20px;
            flex-wrap: nowrap;
            margin-top: 40px;
            }
            section.question_block .question_form_wrap .bottom_row a[href^='tel']
                {
                font-size: 22px;
                }
            section.question_block .question_form_wrap .bottom_row a[href^='tel']:hover
                {
                color: var(--active-color);
                }
            section.question_block .question_form_wrap .bottom_row .soc_icons
                {
                display: flex;
                gap: 15px;
                }
            section.question_block .question_form_wrap .bottom_row .disclaimer
                {
                flex: 0 0 400px;
                font-size: 14px;
                }
/* /Index - Question Consult Form */


/* Index - Blog */
section.blog
    {
    padding-bottom: 0px;
    }
    section.blog h2
        {
        color: var(--black-color);
        }

    section.blog .items
        {
        gap: 10px;
        }
        section.blog .items .item
            {
            display: flex;
            flex: 1 1 30%;
            height: 400px;
            justify-content: center;
            align-items: center;
            font-family: "Raleway", sans-serif;
            font-size: 24px;
            background-size: auto 100%;
            background-position: center center;
            transition: background-size 0.5s ease;
            }
            section.blog .items .item span
                {
                display: flex;
                height: 100%;
                width: 100%;
                flex-direction: column;
                gap: 20px;
                padding: 20px;
                box-sizing: border-box;
                text-align: center;
                justify-content: center;
                align-items: center;
                background-color: rgba(0,0,0,0.5);
                transition: opacity 0.5s ease-in-out;
                }
            section.blog .items .item span
                {
                opacity: 0;
                }
            .secondary section.blog .items .item span
                {
                opacity: 1;
                }

            section.blog .items .item:hover
                {
                color: #fff;
                background-size: auto 110%;
                }
            section.blog .items .item:hover span
                {
                opacity: 1;
                }
            section.blog .items .item span:after
                {
                display: block;
                content: ' ';
                width: 22px;
                height: 22px;
                background-size: 100% 100%;
                }

    .secondary .more_link_wrap
        {
        display: none;
        }

    section.blog .more
        {
        position: relative;
        font-size: 25px;
        display: inline-block;
        padding: 20px 30px 20px 20px;
        }
        section.blog .more:after
            {
            top: 27px;
            display: none;
            }
/* /Index - Blog */


/* Index - Lets meet */
section.lets_meet
    {
    padding: 0 0 30px 0;
    }
    section.lets_meet h2
        {
        color: var(--black-color);
        }
    section.lets_meet .row
        {
        background: url('/img/lets_meet_bg_org.jpg') center center no-repeat;
        background-size: cover;
        padding: 180px 0;
        }
    section.lets_meet .inner
        {
        margin: 0 auto;
        justify-content: center;
        text-align: center;
        }
        section.lets_meet .inner h2
            {
            margin-bottom: 50px;
            }
/* /Index - Lets meet */





/* Project page */
.project_page
    {
    
    }
    .project_page .intro
        {
        gap: 20px;
        flex-wrap: nowrap;
        }
    .project_page .intro img
        {
        max-width: 400px;
        height: auto;
        }

    .project_page .intro_gallery
        {
        margin: 30px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        }
        .project_page .intro_gallery a
            {
            flex: 1 1 30%;
            display:block;
            overflow: hidden;
            height: 300px;
            background-position: center center;
            background-size: cover;
            }

    .project_page .slider
        {
        position: relative;
        }
        .project_page .slider .slide
            {
            height: 550px;
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-position: center center;
            }
        .project_page .slider .prev,
        .project_page .slider .next
            {
            position: absolute;
            height: 100%;
            left: 0;
            width: 50px;
            background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.292893 8.70711C-0.0976309 8.31658 -0.097631 7.68342 0.292893 7.29289L6.65685 0.928932C7.04738 0.538407 7.68054 0.538407 8.07107 0.928932C8.46159 1.31946 8.46159 1.95262 8.07107 2.34315L2.41421 8L8.07107 13.6569C8.46159 14.0474 8.46159 14.6805 8.07107 15.0711C7.68054 15.4616 7.04738 15.4616 6.65685 15.0711L0.292893 8.70711ZM2 8L2 9L1 9L1 8L1 7L2 7L2 8Z" fill="white"/></svg>');
            background-repeat: no-repeat;
            background-position: center center;
            z-index: 1000;
            border-right: 1px #fff solid;
            }
        .project_page .slider .next
            {
            left: auto;
            right: 0;
            transform: rotate(180deg);
            }
        .project_page .slider .prev:hover,
        .project_page .slider .next:hover
            {
            background-color: rgba(0,0,0,0.4);
            }
/* /Project page */



/* Service page */
.doc_type_a4_service header
    {
    background-image: url('/img/service_header_bg.jpg');
    }

.service_page
    {
    
    }
    .service_page .desc
        {
        display: block;
        align-items: center;
        padding: 50px 20px;
        }
    .service_page .counter
        {
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 20px 20px;
        padding-right: 40px;
        }
    .service_page .question_form_row
        {
        margin-top: 50px;
        background: url('/img/service_question_form_bg.jpg') center center no-repeat;
        background-size: cover;
        }
        .service_page .question_form_row .question_form_wrap
            {
            background-color: rgba(255,255,255,0.9);
            padding: 50px;
            }
        .service_page .question_form_row .question_form_wrap h4
            {
            font-family: "Raleway", sans-serif;
            font-size: 30px;
            }
        .service_page .question_form_row .question_form_wrap,
        .service_page .question_form_row .question_form_wrap h4,
        .service_page .question_form_row .question_form_wrap p
            {
            color: var(--dark-color);
            }



/* /Service page */

.blog_link
    {
    display: block;
    font-size: 25px;
    padding: 10px 0;
    margin: 10px;
    border-bottom: 1px #fff solid;

    }


section.main_content 
    {
    min-height: 300px;
    }


.main_content p
    {
    margin-bottom: 15px;
    }
.main_content ul,
.main_content ol
    {
    margin: 15px 15px 15px 30px;
    }
    .main_content li
        {
        margin: 5px;
        }
    .main_content a
        {
        color: #c0392b;
        }
    .id_1225 .main_content .accent
        {
        color: #591E00;
        }

    
    .id_1225 .main_content h2,
    .id_1225 .main_content li a,
    .id_1225 .main_content .sale_block .show_modal,
    .id_1225 a[href^="tel:"]
        {
        color: #695441;
        }
    .id_1225 .main_content a:hover
        {
        color: orange !important;
        }

    .id_1221 .main_content .accent
        {
        color: #591E00;
        }
    .id_1221 .main_content h2,
    .id_1221 .main_content li a,
    .id_1221 a[href^="tel:"]
        {
        color: #695441;
        }
    .id_1221 .main_content a:hover
        {
        color: orange !important;
        }


    .main_content .sale_block
        {
        background: #e3e3e3;
        border: 1px #591E00 solid;
        border-radius: 10px;
        padding: 10px 20px;
        margin: 20px 0;
        }

    .main_content .resp_img
        {
        width: 100%;
        height: auto;
        }

    .main_content .inline_gallery
        {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        
        }
        .main_content .inline_gallery img
            {
            width: 45%;
            height: auto;
            }



.doc_type_a4_article .main_content p
    {
    font-size: 20px;
    line-height: 26px;
    }

.secondary h1,
.secondary .main_content,
.secondary p,
.secondary footer,
.secondary footer a,
.secondary footer h2
    {
    color: var(--black-color);
    }



/* Footer  */
footer
    {
    position: relative;
    }
    footer > .container
        {
        padding: 30px;
        }
    footer h2
        {
        font-size: 20px;
        font-weight: 400;
        border-bottom: 1px #fff solid;
        padding-bottom: 10px;
        margin-bottom: 20px;
        }
        .secondary footer h2
            {
            font-weight: 700;
            border-bottom: 1px var(--black-color) solid;
            }

    footer .bm_row
        {
        align-items: stretch;
        }
    footer .links_div a
        {
        display: block;
        padding: 6px 0;
        }
        footer .links_div a:hover,
        footer .contacts a:hover
            {
            color: #ccc;
            }
            .secondary footer .links_div a:hover,
            .secondary footer .contacts a:hover
                {
                color: orange;
                }

    .secondary footer .a4-btn
        {
        color: #fff;
        filter: invert(100%);
        }
    
    footer .addr
        {
        font-family: "Raleway", sans-serif;
        font-size: 18px;
        background: url('/img/icons/location.svg') left center no-repeat;
        padding-left: 40px;
        margin-top: 30px;
        }
        .secondary footer .addr
            {
            background-image: url('/img/icons/location_black.svg');
            }
        footer .addr p
            {
            margin: 0;
            }

    footer .a4-btn.icon
        {
        margin: 30px 0;
        padding-left: 22px;
        }

    footer .about,
    footer .contacts
        {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        }
    footer .lang_bar    
        {
        }
        footer .lang_bar a
            {
            display: inline-block;
            margin-right: 20px;
            padding: 10px 0;
            }
        .lang_bar a.active
            {
            color: orange;
            }

    footer .soc_icons
        {
        display: flex;
        justify-content: space-between;
        }
    .secondary footer .soc_icons a
        {
        filter: invert(100%);
        }

    footer .copyright_row
        {
        padding-top: 10px;
        margin-top: 50px;
        border-top: 1px #fff solid;
        font-family: "Raleway", sans-serif;
        font-size: 22px;
        font-weight: 700;
        }
        .secondary footer .copyright_row
            {
            border-top: 1px var(--black-color) solid;
            }
        .secondary footer .copyright_row .logo
            {
            filter: invert(100%);
            }



/* /Footer  */



/* Progress bar */
@-webkit-keyframes progress {to {background-position: 30px 0;}}
@-moz-keyframes progress {to {background-position: 30px 0;}}
@keyframes progress {to {background-position: 30px 0;}}
.barBg {width:99%;  height:15px;    border-radius: 8px; margin-bottom:5px;}
.bar {background: #7aff32;  height:30px;    height: 15px;   border-radius: 4px;}
.barFill {
    width: 100%;
    height: 15px;
    border-radius: 20px;
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.hundred {  width: 100%;}   
.cornflowerblue {   background-color: CornflowerBlue;   box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);}



/* ============================================================================ */
/* Планшет - меньше 1200px  =================================================== */
/* ============================================================================ */
@media (max-width: 1200px) {
    
header .top_row .top_menu_bar   
    {
    width: calc(100% - 15px);
    box-sizing: border-box;
    }

section.about .col_1    
    {
    width: 40%;
    }
    section.about .col_1 h2
        {
        margin: 20px 0;
        }
    section.about .col_1 .text
        {
        font-size: 16px;
        }
        
section.about .col_2
    {
    width: 50%;
    }

}


/* ============================================================================ */
/* Телефон - меньше 900px   =================================================== */
/* ============================================================================ */
@media (max-width: 900px) {
header,
footer,
section
    {
    padding: 0;
    }
.full_height
    {
    height: auto;
    }


.index section
    {
    font-size: 18px;
    }
    .index section h2
        {
        font-size: 30px;
        }


body 
    {
    font-size: 16px;
    }

h1, h2
    {
    font-size: 30px;
    text-align: center;
    }


.secondary header > .container .top_row
    {
    margin-bottom: 0px;
    }

.secondary header > .container > h1
    {
    margin-top: 60px;
    margin-bottom: 10px;
    }

header .buttons_row
    {
    display: block;
    }
    header .buttons_row .a4-btn
        {
        margin: 35px auto;
        }
        header .menu_btn
            {
            font-size: 20px;
            margin-right: 20px;
            }
header .top_row
    {
    position: relative;
    }


section.about
    {
    background: none;
    font-size: 20px;
    line-height: normal;
    }    
    section.about .container
        {
        flex-direction: column;
        align-items: center;
        padding: 0;
        }
    section.about .col_1
        {
        background-color: var(--bg-color);
        /*
        background: url('/img/about_col_1_bg.jpg') center bottom no-repeat;
        background-size: cover;
        margin-bottom: 0;
        */
        }
    section.about .col_1.skew:after
        {
        display: none;
        }

    section.about .col_1,
    section.about .col_2
        {
        width: 100%;
        padding: 10px 15px;
        }
        section.about .col_1 .text
            {
            display: none;
            }
    section.about .col_1 h2
        {
        position: relative;
        font-size: 30px;
        padding-bottom: 30px;
        margin: 0px -15px 0px -15px;
        text-align: center;
        color: var(--black-color);
        }

        
    section.about .col_2
        {
        font-size: 16px;
        background: url('/img/about_col_2_bg.jpg') center top no-repeat;
        background-size: cover;
        height: 600px;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        font-size: 22px;
        font-weight: 700;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
        }
        section.about .col_2 .text
            {
            display: block;
            font-size: 18px;
            font-weight: 400;
            position: absolute;
            background-color: rgba(0,0,0,0.5);
            bottom: 0;
            left: 0;
            padding: 15px;
            }


section.benefits,
section.portfolio_index,
section.calculator,
section.blog
    {
    padding: 30px 0;
    }
section.blog,
section.lets_meet
    {
    padding-bottom: 0;
    }

section.benefits .container
    {
    padding: 0;
    }
    section.benefits h2
        {
        font-size: 30px;
        }
    section.benefits .item
        {
        min-height: 200px;
        border: 0 !important; 
        padding-left: 110px;
        font-size: 18px;
        }
    section.benefits .item .num
        {
        font-size: 114px;
        height: 114px;
        line-height: 114px;
        top: calc(50% - 60px);
        left: -30px;
        }
        section.benefits .item:not(:last-child)
            {
            border-bottom: 1px solid rgba(255,255,255,0.7) !important;
            }
        section.benefits .item .details
            {
            font-size: 16px;
            }
            section.benefits .item:hover .details,
            section.benefits .item:focus .details
                {
                padding-top: 10px;
                max-height: 200px;
                }



section.services .bg > .container
    {
    min-height: auto;
    padding: 0;
    }
    section.services .item
        {
        font-family: "Raleway", sans-serif;
        font-size: 25px;
        min-height: 200px;
        }
    section.services .item.skew:after
        {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 30px;
        border-right: 0;
        border-bottom: 1px solid #fff;
        transform: skew(0, 2deg);
        }
    section.services .item.skew:nth-child(2):after
        {
        transform: skew(0, -2deg);
        }


section.other_services.active .items
    {
    }
    section.other_services .items a 
        {
        padding: 25px 0;
        flex: 0 0 100%;
        }

section.portfolio_index .items .item
    {
    flex: 1 0 100%;
    height: 350px;
    background-size: cover;
    }



section.calculator .row_bg
    {
    background-image: url('/img/calc_bg_mobile.jpg');
    background-position: center center;
    padding-top: 5px;
    }
section.calculator .calc_steps
    {
    margin: 10px 5px;
    }
    section.calculator .calc_progress_bar
        {
        display: none;
        }
    section.calculator .calc_slider
        {
        padding: 0;
        }
    section.calculator .step
        {
        padding: 20px;
        box-sizing: border-box;
        }
        section.calculator .step h3
            {
            font-family: "Raleway", sans-serif;
            font-weight: 400;
            font-size: 30px;
            }
        section.calculator .step p
            {
            font-size: 12px;
            }
            
        section.calculator .step_1_inputs
            {
            margin: 20px 0;
            font-size: 18px;
            }
            section.calculator .step_1_inputs .input_group
                {
                margin: 30px 0;
                flex: 1 1 100%;
                text-align: center;
                }
            section.calculator .step_1_inputs input[type='text'],
            section.calculator .step_1_inputs input[type='number']
                {
                width: 40%;
                }

            section.calculator .step_1_inputs .second_title
                {
                display: block;
                margin-bottom: 20px;
                }
            section.calculator .step_1_inputs label
                {
                margin: 0 5px;
                }

        section.calculator .step_blocks
            {
            flex-wrap: wrap;
            margin: 30px 0;
            }
            section.calculator .vertical_border
                {
                display: none;
                }
            section.calculator .step_blocks label,
            section.calculator .step_with_hint label
                {
                flex: 0 0 100%;
                display: flex;
                gap: 20px;
                padding: 10px 0;
                margin-bottom: 0px;
                }
            section.calculator .step_with_hint label
                {
                flex-wrap: wrap;
                }
    section.calculator .hint
        {
        display: flex;
        flex: 0 0 100%;
        margin-bottom: 0px;
        box-sizing: border-box;
        }
    
    section.calculator .step_8_inputs .job_time
        {
        margin: 20px 0;
        }
    section.calculator .step_8_inputs .question_form_wrap
        {
        margin-top: 40px;
        }
    section.calculator .step_9_inputs .text
        {
        flex-wrap: wrap;
        gap: 10px;
        }
    section.calculator .step_9_inputs .order_form_wrap .message_form_div
        {
        gap: 5px;
        flex-wrap: wrap;
        }
        section.calculator .step_9_inputs .order_form_wrap form input
            {
            flex: 1 1 100%;
            }


section.question_block
    {
    background-image: url('/img/questiong_form_bg_mobile.jpg');
    }
section.question_block .question_form_wrap
    {
    margin: 30px auto;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    }
    section.question_block .question_form_wrap h4
        {
        padding: 0;
        font-size: 30px;
        margin-bottom: 15px;
        }
    section.question_block .question_form_wrap .message_form_div
        {
        gap: 0px;
        flex-wrap: wrap;
        }
        section.question_block .question_form_wrap form input,
        section.question_block .question_form_wrap .bottom_row .disclaimer 
            {
            flex: 1 1 100%;
            }
        section.question_block .question_form_wrap .bottom_row
            {
            flex-wrap: wrap;
            margin-top: 20px;
            gap: 10px;
            }
        section.question_block .question_form_wrap .bottom_row .disclaimer 
            {
            font-size: 12px;
            }


section.blog .items .item
    {
    flex: 1 1 100%;
    height: 350px;
    }

.doc_type_a4_service header,
.doc_type_a4_service header > .container
    {
    min-height: 300px;
    }

.service_page .desc 
    {
    padding: 10px;
    margin: 10px;
    }
    .service_page .cnt_wrap    
        {
        justify-content: center;
        gap: 5px;
        }
    .service_page .counter
        {
        padding-top: 10px;
        padding-bottom: 10px;
        }
    .service_page .question_form_row
        {
        background: url('/img/service_question_form_bg.jpg') center center no-repeat;
        background-size: cover;
        }
        .service_page .question_form_row .question_form_wrap
            {
            padding: 15px;
            }
        .service_page .question_form_row .question_form_wrap h4
            {
            text-align: center;
            }
    .service_page .portfolio_index
        {
        margin: 0;
        }

.project_page .intro
    {
    flex-wrap: wrap;
    }
    .project_page .intro .col_1,
    .project_page .intro .col_2
        {
        flex: 1 1 100%;
        }
    .project_page .intro img
        {
        width: 100%;
        height: auto;
        }
    .project_page .intro_gallery
        {
        display: none;
        }
        .project_page .slider .slide
            {
            height: 320px;
            }


section.main_content 
    {
    min-height: 50px;
    }

.main_content .inline_gallery img
    {
    width: 100%;
    }


footer > .container
    {
    padding: 5px;
    }
    footer h2
        {
        margin-top: 10px;
        }

    footer .btn_wrap
        {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        }

    footer .soc_icons
        {
        margin: 30px 15px;
        }
    footer .addr
        {
        padding: 15px 0 15px 30px;
        }

    footer .copyright_row
        {
        margin: 0;
        padding: 0 15px;
        }
        footer .copyright_row .logo img
            {
            width: 80px;
            height: 80px;
            }


}