.mainlogo {
     height: 50px;
    width: auto;
    margin: 15px auto;
        @media screen and (min-width:769px) {
            height: 50px;
        }
}

.herocontainer {
    margin-top: 80px;
        @media screen and (min-width:769px) {
            margin-top: 100px;
        }
}

.hero-imagebg {
    background-position: -400px!important;
        @media screen and (min-width:426px) {
            background-position: right!important;
        }
        @media screen and (min-width:769px) {
            background-position: right 30%!important;
        }
}

.clientoveride{
    height: 100%;
    padding: 0;
    align-items: flex-end;

    @media screen and (min-width: 769px){
        align-items: center;
    }
}

.hero-white-small-overlay{
    width: 100%;
    height: 45%;
    justify-content: flex-end;
    padding: 50px 20px;
    background: url(../uploads/mainimgs/red_circle.png);
    background-position: top;
    background-size: 130%;
        @media screen and (min-width:769px) {
            width: 40%;
            height: 100%;
            padding: 50px;
            background-position: center right;
            justify-content: center;
            background-size: 200%;
        }
}

.hero-white-small-overlay h1{
    color: #fff;
    text-align: center;
    @media screen and (min-width: 769px){
        text-align: left;
    }
}

.text-center{
    text-align: center;
    @media screen and (min-width: 769px){
        text-align: left;
    }
}

.img-border{
    border: 4px solid black;
}