body{
    overflow: hidden;
}

/**********************************header*/
.header{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
/*    border-bottom: 1px solid #efeded;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.loader-wrap{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: fixed;
}

.loader{
    opacity: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    height: 35px;

}



.loader--off{
    opacity: 0;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.header::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: #dbdbdb;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 1.5s forwards ease;
            animation: showlineV 1.5s 1.5s forwards ease;
}

.header::before{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0%;
    background: #dbdbdb;
    z-index: 10;
    -webkit-animation: showlineH 1.5s 2.5s forwards ease;
            animation: showlineH 1.5s 2.5s forwards ease;
}

.header__column{
    height: 100%;
    width: 25%;
    position:relative;
/*    border-right: 1px solid #efeded;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
/*    overflow: hidden;*/
}

.header__column-v1::before{
    content: "";
    position: absolute;
    right: 0px;
    width: 1px;
    background: #dbdbdb;
    height: 0%;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 1.7s forwards ease;
            animation: showlineV 1.5s 1.7s forwards ease;
}

.header__column-v2::before{
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    background: #dbdbdb;
    height: 0%;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 1.9s forwards ease;
            animation: showlineV 1.5s 1.9s forwards ease;
}

.header__column-v3::before{
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    background: #dbdbdb;
    height: 0%;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 2.1s forwards ease;
            animation: showlineV 1.5s 2.1s forwards ease;
}


.header__column-v4::before{
    content: "";
    position: absolute;
    right: -1px;
    width: 1px;
    background: #dbdbdb;
    height: 0%;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 2.3s forwards ease;
            animation: showlineV 1.5s 2.3s forwards ease;
}



.header__img{
    margin-top: 100px;
    height: calc(100% - 200px);
/*    zmiana*/
    width: 100%;
    opacity: 0;
    background-image: url(../assets/home/header-bg.jpg);
    background-size: cover;
    -webkit-transition: all 2s cubic-bezier(.25, .1, .07, 1);
    -o-transition: all 2s cubic-bezier(.25, .1, .07, 1);
    transition: all 2s cubic-bezier(.25, .1, .07, 1);

}

.header__img--show{
    /*    zmiana*/
    width: 100%;
    opacity: 1;
    -webkit-transition: all 2s cubic-bezier(.25, .1, .07, 1);
    -o-transition: all 2s cubic-bezier(.25, .1, .07, 1);
    transition: all 2s cubic-bezier(.25, .1, .07, 1);
    
}



.header__img-v1{
    background-position: 0vw center;
}

.header__img-v2{
    background-position: -23.5vw center;
}

.header__img-v3{
    background-position: -46.85vw center;
}

.header__img-v4{
    background-position: -70.2vw center;
}

.header__title{
    position: absolute;
    width: 25%;
    top: 50%;
    left: 25%;
    opacity: 0;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    z-index: 20;
    -webkit-transform: translate(0, calc(-50% + 20px));
        -ms-transform: translate(0, calc(-50% + 20px));
            transform: translate(0, calc(-50% + 20px));
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; 
}

.header__title--show{
    opacity: 1;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; 
}

.header__subtitle{
    font-weight: 500;
    font-size: 16px;
    color: #9b9b9b;
    margin-bottom: 40px;
    opacity: 0;
    cursor: pointer;
    -webkit-animation: fadeup 1s 2.9s forwards ease;
            animation: fadeup 1s 2.9s forwards ease;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.header__subtitle:hover{
    color: #767676;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.header__subtitle--active{
    color: #3C3C3C;
    text-decoration: underline;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/**********************************we-are*/
.we-are{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.we-are__left{
    width: 50%;
    padding: 125px 0 125px 0;
}

.we-are_p--small{
    max-width: 220px;
    width: calc(100% - 20px);
}

.we-are__right{
    padding: 125px 0;
    width: 50%;
}


/**********************************areas*/

.areas{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
}

.areas__left{
    padding: 125px 0;
    width: 50%;
}

.areas__right{
    width: 50%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    position: relative;
/*    overflow: hidden;*/
}

.areas__img{
    width: 0;
    background-image: url(/assets/home/areas.jpg);
    background-position: top center;
}

/**********************************team*/
.team{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.team__images {
    width: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.team__col{
    width: 33.33%;
}

.team__col-2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
}

.team__small--top{
    position: absolute;
    left: 50%;
    top: 0;
}

.team__col-3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.team__big-img{
    width: 0%;
    padding-bottom: 100%;
    background: red;
    height: 0%;
    background-size: cover;
    background-color: #fff;
    
}

.team__small-img{
/*    zmiana*/
    width: 50%;
    opacity: 0;
    padding-bottom: 50%;
    background-color: #fff;
    height: 0%;
    background-size: cover;
}

.team__small-mleft{
    margin-left: 50%;
}

.team__right{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 25%;
/*    padding: 110px 0;*/
    min-height: 510px;
}

/**********************************joinus*/
.joinus{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.joinus__col{
    width: 25%;
    padding: 125px 0;
}

.joinus__right{
    width: 50%;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    position: relative;
}

.joinus__img{
    width: 0;
    background-image: url(/assets/home/areas.jpg);
    background-position: bottom center;
}
/**********************************contactus*/
.contactus{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.contactus__col{
    width: 25%;
        padding: 125px 0;

}

.contactus__right{
    width: 50%;
    padding: 125px 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    position: relative;
}




@media all and (max-width: 1100px){
       .header__title{
        width: 50%;
        }
*********************************team 1100px 
    .team__images {
        width: 50%;
    }
    .team__col{
        width: 50%;
    }

    .team__col-3{
        display: none;
    }
    .team__right{
        width: 50%;
    }
 /**********************************joinus 1100px    
    .joinus__col{
        width: 50%;
    }
    
    .joinus__col-left {
        display: none;
    }/**********************************contactus 1100px*/

    .contactus__col{
        width: 50%;
    }
    .contactus__col--midle{
        display: none;
    }

}

@media all and (max-width: 850px){
 
/**********************************team 850px*/ 
    .team__col{
        width: 100%;
    }

    .team__col-2{
        display: none;
    }

}


@media all and (max-width: 700px){
    .header__column-v1::before{
        right: -1px;
    }
    
    .header__column-v4::before, .header__column-v3::before, .header__column-v2::before{
        display: none;
    }
/**********************************header 700px*/
    .header__column{
        width: 100%;
        position: absolute;
    }
    .header__title{
        width: 100%;
        left: 0;
    }
    .header__subtitle{
        visibility: hidden;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
    }

    .header__subtitle--active{
        visibility: visible;
        opacity: 0;
        -webkit-transition: all 0.5s 0.5s;
        -o-transition: all 0.5s 0.5s;
        transition: all 0.5s 0.5s;
    }
/**********************************we-are 700px*/
    .we-are{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .we-are__left{
        width: 100%;
        padding: 125px 0;
    }

    .we-are__right{
        width: 100%;
    }
/**********************************areas 700px*/
    .areas{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .areas__left{
        width: 100%;
    }

    .areas__right{
        width: 100%;
        height: 100vw;
    }
/**********************************team 700px*/
    .team{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .team__images {
        width: 100%;
    }
    .team__right{
        width: 100%;
    }

    .team__col{
        width: 100%;
    }
    .team__col-2{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
/**********************************team 700px*/
    .joinus{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .joinus__col{
        width: 100%;
    }

    .joinus__right{
        width: 100%;
        height: 100vw;
    }
    /**********************************team 700px*/
    .contactus{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .contactus__col{
        width: 100%;
        padding: 90px 0;
    }

    .contactus__right{
        width: 100%;
    }
}