/* Wrapper giống demo */
.ux-project-showcase .wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.hpddinfoha{ padding: 75px 0 80px; }
.tpddinfoha .hagrip{
    display:flex; flex-wrap:wrap; align-items:center;
    margin: 0 -20px;
}
.tpddinfoha .hagrip > div{ padding: 0 20px; }
.tpddinfoha .hagrip .mcol{ width: 47.745%; }
.tpddinfoha .hagrip .hcol{ width: calc(100% - 47.745%); }
.tpddinfoha .hatitle{ text-transform: uppercase; color:#2f3790; }
.tpddinfoha .hatitle h2{ font-size:60px; line-height:70px; font-weight:800; margin:0; }
.tpddinfoha .haconts{ font-size:18px; line-height:30px; }

/* Big background image */
.tpddinfohb .hbthumb{
    position:relative;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    min-height: 360px;
}
.tpddinfohb .hbthumb::before{
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:20%;
    background: linear-gradient(0deg, rgba(47,55,144,1) 0%, rgba(47,55,144,0) 100%);
    z-index:1;
    pointer-events:none;
}
.tpddinfohb .hbthumb img{ width:100%; opacity:0; }

/* Blue block area */
.hpddinfohc{
    max-width: calc(100% - ((100% - 1440px)/2));
    margin-left:auto;
    padding-left:75px;
    position:relative;
    z-index:1;
    margin-top:-160px;
    padding-bottom:80px;
}
.hpddinfohc::before{
    content:'';
    position:absolute;
    top:160px; right:0; bottom:0;
    width: calc(100% + 10000px);
    background:#2f3790;
    z-index:-1;
}

/* columns */
.hpddinfohc .hcgrip{ display:flex; flex-wrap:wrap; align-items:flex-end; }
.hpddinfohc .hcgrip .mcol{ width:270px; }
.hpddinfohc .hcgrip .hcol{
    width: calc(100% - 270px);
    overflow:hidden;
    padding-bottom:20px;
}

/* Text slider */
.slhcdecss{ width: calc(100% + 240px); position:relative; z-index:2; }
.ithcdecss, .ithcdecss a{ color:#fff; }
.ithcdecss .dstitle{ margin-bottom:24px; text-transform:uppercase; text-shadow:0 5px 5px rgba(0,0,0,.65); }
.ithcdecss .dstitle h3{ font-size:60px; line-height:70px; font-weight:700; margin:0; }
.ithcdecss .dsconts{
    font-size:16px; line-height:30px; text-transform:uppercase;
    max-height:90px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    margin-bottom:30px;
}
.ithcdecss .dsviews a{
    display:inline-block;
    font-size:15px; line-height:25px;
    text-transform:uppercase;
    font-weight:700;
}
.ithcdecss .dsviews a span{ position:relative; padding-right:20px; }
.ithcdecss .dsviews a span:before{
    content:'\f105';
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    position:absolute; right:0; top:50%;
    transform:translateY(-50%);
}

/* Image slider items */
.ithcthumb{ width: 800px; padding: 0 15px }
.ithcthumb .timg{
    display:block;
    padding-top:65.56%;
    position:relative;
    overflow:hidden;
}
.ithcthumb .timg img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
}

/* Slick arrows position like demo */
.slhcthumb .slick-arrow{
    top: unset;
    bottom: -90px;
    transform: unset;
    z-index: 5;
}
.slhcthumb .slick-prev{ left: unset; right:130px; }
.slhcthumb .slick-next{ right:75px; }

/* Progress */
.slhcrange{ padding-right:200px; margin-top:60px; color:#fff; }
.slhcrange .vvgrip{
    display:flex; align-items:center; justify-content:flex-end;
    margin:0 -6.5px;
}
.slhcrange .vvgrip > div{ padding:0 6.5px; }
.slhcrange .vrange{ position:relative; width:150px; }
.slhcrange .vrange .lifulls{ width:100%; height:2px; background:#fff; opacity:.2; }
.slhcrange .vrange .litotal{
    position:absolute; top:0; left:0;
    height:2px; background:#fff;
    transition: all .3s linear;
}

/* Responsive basic */
@media (max-width: 991px){
    .tpddinfoha .hagrip .mcol,
    .tpddinfoha .hagrip .hcol{ width:100%; }
    .tpddinfoha .hatitle h2{ font-size:28px; line-height:36px; text-align:center; }
    .tpddinfoha .haconts{ font-size:14px; line-height:24px; text-align:center; }
    .hpddinfohc{ padding-left:20px; margin-top:-120px; }
    .hpddinfohc .hcgrip .mcol{ display:none; }
    .hpddinfohc .hcgrip .hcol{ width:100%; }
    .ithcthumb{ width: 78vw; }
    .slhcrange{ padding-right:0; }
}