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

body{

    width: 100%;

    height: auto;

    font-family: 'Fira Sans', sans-serif;

}

section {

    width: 100%;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start

}

.color_black {
    color: #000 !important;
}

.top_block {

    width: 100%;

    height: auto;

    background-image: url(../img/bg_top.png);

    background-size: cover;

    background-position: bottom center;

    background-repeat: no-repeat;

}



.head_block {

    width: 100%;

    height: auto;

    background-color: #31434a;

}



.header {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between

}



.logo {

    width: 128px;

    height: 42px

}

.logo img{

    width: 100%;

}



.phone{

    background-color: #fff;

}

.phone:hover, .mail:hover{

    opacity: .7

}

    

.phone, .mail {

    width: 60px;

    height: 60px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.call_back {

    display: flex;

    flex-direction: row;

    align-items: flex-end;

    justify-content: flex-end

}



.mail {

   background-color: #fbc92c 

}



.nav {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    

}



.link {

    color: #fff;

    text-decoration: none;

    padding: 0 10px;

    font-size: 14px;

}

.link:hover{

    text-decoration: underline

}



h1 {

    font-size: 77px;

    font-weight: 800;

    line-height: 77px;

    color: #fbc92c;

    font-family: 'Merriweather', serif;

    max-width: 100%;

    text-align: left

}



.head_info {

    width: 100%;

    max-width: 1300px;

    margin: 60px auto 0;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    padding-bottom: 60px

}

.head_info img{

    position: absolute;

    right: 0;

    top: 60px

}



.head_info_txt {

    width: 100%;

    max-width: 650px;

    

}

.p_info{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center

}

h2 {

    color: #fff;

    line-height: 40px;

    padding: 40px 0 60px;

    font-size: 28px;

    font-weight: 400

}

h2 span{

    color: #fbc92c

}



.yellow_btn {

    font-size: 14px;

    padding: 10px 36px !important;

    color: #0a0603;

    background-color: #fbc92c;

    display: inline-block;

    font-family: 'Merriweather', serif;

    text-decoration: none;

    cursor: pointer;

    font-weight: 700;

    padding-bottom: 10px;

    border-bottom: 0px dotted #000 !important

}

.yellow_btn:hover{

    opacity: .7

}



.block_vidi {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 40px 0 60px 0

}







.h3 {

    text-align: center;  

    width: 100%;  

    margin: 0 auto;    

    overflow: hidden;

    font-size: 36px;

    font-weight: 700;

    font-family: 'Merriweather', serif;

    color: #fbc92c;

    position: relative;

    text-align: center;

    width: 100%;

    margin: 0 auto;

}

.h3 span {

     position: relative;

    margin: 40px auto

}



.h3 span:after {

    display: inline-block;

    width:1000px;

    content: '';

    position: absolute;

    border-bottom: 1px solid #fbc92c;

    top:50%;

    left: 105%; 

}

.h3 span:before {

    display: inline-block;                  

    width:1000px;                    

    content: '';                     

    position: absolute;              

    border-bottom: 1px solid #fbc92c;  

    top:50%;                       

    right: 105%;                   

}

.icons {

    width: 100%;

    max-width: 1300px;

    height: auto;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;

    margin: 60px auto 20px

}





.ico {

    width: calc(100% / 6 - 20px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    text-align: center;

    transition: all .3s ease

}

.ico img{

    margin-bottom: 20px

}

.ico:hover{

    color: #fbc92c

}

.ico:hover img{

    filter: grayscale(100);

    transition: all .5s ease

}

.projects {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 60px auto;

}



.slider_all {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 0 auto 40px;

    padding-bottom: 60px

}



.sl {

  

    

}

.sl img{

      display: block;

      margin: 0 auto; 

    }



.choice {

    width: 100%;

    height: auto;

    background-image: url(../img/bg_two.png);

    background-size: cover;

    background-position: bottom center;

}



.choice_info, .stage {

    width: 100%;

    max-width: 1300px;

    margin: 60px auto;

    height: auto;

}



.choice_info_block, .choice_info_block_2 {

    width: 100%;

    height: auto;

    max-width: 1300px;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    margin: 40px auto;

    flex-wrap: wrap;

}



.choice_info_block_info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding-right: 40px;

    max-width: 50%

}

.choice_info_block_info p{

    color: #fff;

    font-size: 16px;

    text-align: left;

    line-height: 28px;

}



.stage {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.stage p{

   font-size: 18px;

    margin: 20px auto;

    text-align: center

}



.stage_icons {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-around;

    width: 100%;

    height: auto;

    margin: 60px auto;

    position: relative

}



.icon {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    width: calc(100% / 4 - 20px);

    max-width: 300px;

    height: auto;

}

.icon p{

    margin: 26px 0 0 0;

    text-align: left;

    font-size: 16px;

    font-weight: 600

}

.icon img{

    margin-right: 20px

}



.stage_icons_border {

    width: 100%;

    position: absolute;

    z-index: -1;

    top: 45px;

    left: 10px;

    border-bottom: 1px dashed #fbc92c

}



#otziv {

 max-width: calc(100% / 3);

    height: auto;

    margin-bottom: 40px;

    

}



.footer {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 60px auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

}



.footer_align{

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 40px auto;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

justify-content: space-between

}



.footer_info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    width: auto;

    height: auto;

    margin: 20px 0 0

}



.footer_info a, .footer_info p{

    text-decoration: none;

    color: #000;

    margin: 30px 0 0;

    font-weight: 400;

    padding-bottom: 4px;

    border-bottom: 1px dotted #000

}

.footer_info a:hover{

    opacity: .7

}



.footer_info p {

    padding-bottom: 0;

    border-bottom: 0 dotted #000

}



.footer_map {

    width: 100%;

    max-width: 800px;

    height: 400px;

}

._customer-policy {
    padding: 10px 0;
    background-color: #31434a;
    box-sizing: border-box;
    width: 100%;
}

._customer-policy * {
    box-sizing: border-box;
    font-family: "Fira Sans", sans-serif !important;
}

._customer-policy__container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

._customer-policy__text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}

._customer-policy__link {
    display: block;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    max-width: max-content;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #fff !important;
}

._customer-policy__link:hover {
    cursor: pointer;
    text-decoration: underline;
}



 @media only screen and (max-width: 1640px){

     .head_info {

         width: 90%;

     }

     .head_info img {

    position: absolute;

    right: 0;

    width: 50%;         

    height: 50%;

    top: auto;

}

     h1{

         font-size: calc( (100vw - 280px)/(1640 - 1200) * (40 - 18) + 12px);

         line-height: normal;

}

     h2{

        font-size: calc( (100vw - 280px)/(1640 - 1200) * (18 - 10) + 8px);

         line-height: normal;

     }

     

}





@media only screen and (max-width: 1440px){

    .h3{

         width: 90%;

        font-size: 30px;

     }

    .block_vidi {

    padding: 0 0 20px 0;

}

    .icons{

        flex-wrap: wrap;

    }

    .ico {

        width: calc(100% / 3 - 20px);

        margin-bottom: 20px

    }

    

}



@media only screen and (max-width: 1340px){

    .choice_info_block {

        width: 100%;

        height: auto;

        max-width: 1300px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        margin: 40px auto;

    }

        .choice_info_block_info {

        max-width: 90%;

    }

    .choice_info_block_info .yellow_btn{

        margin: 40px auto

    }

    .stage_icons_border {

        width: 95%;

    }

    .footer_align {

        width: 90%;    

    }

    ._customer-policy__container {
        padding: 0 5%;
    }

}



@media only screen and (max-width: 1240px){

    h1{

        max-width: 80%;

    }

        .stage_icons {   

    justify-content: center;

        width: 100%;

        margin: 20px auto;

    }

    .stage_icons_border {

    width: 88%;

    left: 40px;

}

    .icon {

        max-width: 240px;

    }

    .icon img {

    margin-right: 10px;

}

    .choice_info_block_2 {

        width: 90%;

    }

#otziv {

    max-width: calc(100% / 2);

    height: auto;

    margin-bottom: 40px;

}

}

@media only screen and (max-width: 1170px){

    .header {

    justify-content: space-around;

}

}



@media only screen and (max-width: 1000px){

    .head_info {

        flex-direction: column;

    }

    .head_info img {

    position: inherit;

    right: 0;

    width: 80%;

    height: auto;

    top: auto;

    margin: 40px auto 0;



}

    .head_info_txt {

    width: 100%;

    max-width: 100%;

    text-align: center;

}

    h1 {

    max-width: 100%;

        text-align: center

}

}





@media only screen and (max-width: 970px){

    .header .nav{

        display: none

    }

    .stage_icons_border{

        display: none

    }

    .stage_icons {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: center;

    width: 100%;

    height: auto;

    margin: 60px auto;

    position: relative;

    flex-wrap: wrap;

}

    .icon {

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    max-width: 340px;

    margin-bottom: 20px;

        width: calc(100% / 2);

    }

    .icon img {

    margin-right: 0;

}

    

}



@media only screen and (max-width: 910px){

    .icons {

    width: 100%;

    max-width: 1300px;

    height: auto;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    margin: 60px auto 20px;

}

.ico {

    width: calc(100% / 2 );

    margin-bottom: 20px;

    max-width: 340px;

}

    .footer_align {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 40px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

}

    .footer_info {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    height: auto;

    margin: 20px 0;

    flex-wrap: wrap;

    width: 100%;

}

    .footer_info a, .footer_info p {

        margin: 10px 20px

    }

    .logo {



    margin: 0 20px;

}

    .footer_info .yellow_btn{

            margin-top: 0 !important;

    }

    .footer_map {

        width: 90%;

    }

    .choice_info_pic {

        width: 100%

    }

    .choice_info_pic img{

        width: 100%

    }

    .choice_info_block {

        width: 90%;

    }

    .choice_info_block_info {

    max-width: 100%;

        padding-right: 0;

}

}



@media only screen and (max-width: 880px){

    #otziv {

    max-width: calc(100% / 1);

}

}

@media only screen and (max-width: 680px){

    .footer_info .yellow_btn {

    margin: 40px auto 20px !important;

}

    .h3 {

    width: 90%;

    font-size: 20px;

}

    h1{

        font-size: 28px

    }

    h2{

        font-size: 18px

    }

}

@media only screen and (max-width: 580px){

    .phone, .mail {

    width: 44px;

    height: 44px;

}

    .icons {

    width: 100%;

    max-width: 1300px;

    height: auto;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    margin: 10px auto 20px;

}

    .ico {

    width: calc(100% / 1 );

    text-align: left;

    max-width: 340px;

        width: 90%;

        margin: 0 auto 20px;

        display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

    color: #fff;

    font-size: 13px;

}

    .ico img{

        margin-right: 20px

    }

    .stage_icons {

        width: 90%;

        margin: 0 auto

    }

    

    

.icon {

    flex-direction: row;

    align-items: flex-start;

    justify-content: flex-start;

    max-width: 440px;

    width: 100%;

}

    .icon p {

    margin: 26px 0 0 0;

    text-align: left;

    font-size: 13px;

    font-weight: 600;

}

    .icon img {

    margin-right: 20px;

}

    .footer_info a, .footer_info p {

    margin: 10px 20px;

    text-align: center;

}

    .choice_info_block, .choice_info_block_2 {

        margin: 0 auto

    }

    .choice_info_block_2 .choice_info_block_info p{

        font-size: 13px !important;

        line-height: 18px !important;

    } 

    .choice_info_block_info p {

    color: #fff;

    font-size: 13px;

    text-align: left;

    line-height: 18px;

}

    .h3 span:before, .h3 span:after {

    display: none;

    }

    .h3{

        margin-bottom: 20px

    }

    .choice_info, .stage {

    width: 90%;

    max-width: 1300px;

    margin: 40px auto;

    height: auto;

}

    



.projects {

    width: 100%;

    max-width: 1300px;

    height: auto;

    margin: 20px auto;

}

}

@media (max-width: 480px) {
    ._customer-policy__container {
        flex-direction: column;
        align-items: center;
    }
}