/**********************************header*/

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

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

.header-wrap{
    width: 75%;
    position: relative;
    margin-left: 25%;
    padding: 200px 0;
}

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

.header-wrap::before{
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    width: 1px;
    height: 0%;
    background: #efeded;
    z-index: 10;
    -webkit-animation: showlineV 1.5s 0.4s forwards ease;
            animation: showlineV 1.5s 0.4s forwards ease;
}

.header__title{
    width: 66.66%;
    opacity: 0;
    -webkit-animation: fadeup 1s 0.8s forwards ease;
            animation: fadeup 1s 0.8s forwards ease;
}

/**********************************work-with*/

.work-with{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.work-with__col{
    width: 25%;
}

.work-with__title-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.work-with__col--margin{
    padding-top: 160px;
    padding-bottom: 50px;
}

.work-with__num{
    font-weight: 400;
    font-size: 120px;
    color: #3C3C3C;
}

.work-with__paragraph{
    width: 90%;
}

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

.why__left{
    width: 25%;
}

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

.why__top{
    padding: 90px 0;
    width: 100%;
}

.why__col{
    width: 33.33%;
}

.whyList{
    list-style: none;
    padding-top: 25px;
    padding-bottom: 105px;
}

.whyList__el{
    padding: 25px 0;
    left: 55px;
    position: relative;
    width: calc(100% - 55px);
}

.whyList__el::before{
    content: '';
    position: absolute;
    left: -55px;
    height: 1px;
    width: 40px;
    top: 50%;
    background: #efeded;
}
/**********************************how*/

.how{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.how__col{
    width: 50%;
}

.how__right{
    padding: 150px 0;
}
.how__imgwrap{
    width: 50%;
    height: 100%;
}

.how__img{
    background-image: url(../assets/home/areas.jpg);
    background-position: center;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    width: 0;
}

@media all and (max-width: 1100px){
/**********************************header 1100px*/
.header-wrap{
    width: 100%;
    margin-left: 0%;
}
/**********************************work-with 1100px*/
    .work-with{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .work-with__col{
        width: 50%;
    }
    .work-with__col--marginMobile, .work-with__col--margin{
        padding-top: 120px;
        padding-bottom: 50px;
    }
/**********************************why 1100px*/
    .why__left{
        display: none;
    }
    .why__right{
        width: 100%;
    }
}
@media all and (max-width: 850px){
/**********************************why 850px*/ 
    .why__top{
        width: 50%;
    }

    .why__col{
        width: 50%;
    }
    .why__title{
        width: calc(100% - 30px);
    }
}
@media all and (max-width: 700px){
/**********************************header 700px*/
    .header__title{
        width: calc(100% - 20px);
    }
/**********************************work-with 700px*/
    .work-with__col{
        width: 100%;
    }
    .work-with__col--marginMobile, .work-with__col--margin{
        padding-top: 10px;
        padding-bottom: 50px;
    }
    .work-with__title-wrap{
        padding: 90px 0;
    }
/**********************************why 700px*/ 
    .why__top{
        width: 100%;
    }

    .why__col{
        width: 100%;
    }
/**********************************how 700px*/ 
    .how{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .how__col{
        width: 100%;
    }

    .how__right{
        padding: 150px 0;
    }
    .how__imgwrap{
        width: 100%;
        height: 400px;
    }

    .how__img{
        -webkit-animation-duration: 3s;
                animation-duration: 3s;
    }
}