.banner-half {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
        overflow:hidden;
}

    .banner-half:before {
        content: '';
        width: 100%;
        bottom: 0;
        left: 0;
        height: 30px;
        position: absolute;
        background: #fff;
        z-index: 1;
    }

.navy .banner-half:after {
    content: '';
    width: 198px;
    height: 250%;
    position: absolute;
    top: 50%;
    left: 75px;
    z-index: 0;
    -webkit-transform: translate(0,calc((50% + 75px)*-1)) rotate( 45deg );
    -ms-transform: translate(0,calc((50% + 75px)*-1)) rotate(45deg);
    transform: translate(0,calc((50% + 75px)*-1)) rotate( 45deg );
    display: block;
    opacity: .3;
    background: #112137;
}


.banner-half-content {
    width: 45%;
    position:relative;
    z-index:5;
}

@media screen and (max-width: 767px) {
    .banner-half:before {
        display: none;
    }

    .banner-half-content {
        position: relative;
        width: 100%;
        z-index: 5;
    }

    .banner-half-image img {
        opacity: .2;
    }
}


.banner-half-image:before {
    top: 0;
    left: 0;
    border-width: 165px 165px 0 0;
}

.light-grey .banner-half-image:before {
    border-color: #f4f6fa transparent transparent;
    z-index: 1;
}

.white .banner-half-image:before {
    border-color: #fff transparent transparent;
    z-index: 1;
}

.navy .banner-half-image:before {
    border-color: #182d4c transparent transparent;
    z-index: 1;
}

.grey-pattern .banner-half-image:before {
    border-color: #f5f5f5 transparent transparent;
    z-index: 1;
}

.navy h1, .navy h2, .navy h3, .navy h4, .navy h5 {
    color: #fff;
}

.navy p, .navy p.intro {
    color: #efefef;
}

.banner-half-image:after, .banner-half-image:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 2;
}

.banner-half-image:after {
    bottom: 0;
    right: 0;
    border-width: 0 0 165px 165px;
    border-color: transparent transparent #fff;
}

.banner-half-image:after, .banner-half-image:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 2;
}

.banner-half-image {
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

    .banner-half-image img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
    }


.banner-full {
    position: relative;
}

    .banner-full:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( 45deg,rgb(0,168,134,.95) 0%,rgba(10,45,78,.85) 50%);
    }

.banner-full-content {
    background-color: #fff !important;
}

.banner-full-content-detail {
    /*position: relative;
    -webkit-box-shadow: 2px 2px 13px rgb(51 51 51 / 20%);
    box-shadow: 2px 2px 13px rgb(51 51 51 / 20%);
    padding: 50px;
    border-top: 4px solid #00a886;
    overflow: hidden;
    z-index: 30;
    margin-top: -150px;*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    /*.banner-full-content-detail:before {
        content: '';
        width: 198px;
        height: 250%;
        position: absolute;
        top: 50%;
        left: 75px;
        z-index: -1;
        -webkit-transform: translate(0,calc((50% + 75px)*-1)) rotate( 45deg );
        -ms-transform: translate(0,calc((50% + 75px)*-1)) rotate(45deg);
        transform: translate(0,calc((50% + 75px)*-1)) rotate( 45deg );
        display: block;
        opacity: .3;
    }*/

    .banner-full-content-detail h1 {
        font-size: 38px;
    }

/*.navy .banner-full-content-detail {
    background: #182d4c;
}*/

    .navy .banner-full-content-detail:before {
        background: #112137;
    }

.light-grey .banner-full-content-detail {
    background: #f5f5f5;
}

    .light-grey .banner-full-content-detail:before {
        background: #e9e9e9;
    }

.white .banner-full-content-detail {
    background: #fff;
}

    .white .banner-full-content-detail:before {
        background: #e7e7e7;
    }

.grey-pattern .banner-full-content-detail {
    background-image: url(../../Images/bg-grey.png);
}