.hero-img {background-image:linear-gradient(to right, white, 20%, transparent), url("../graphics/about2.png");

    height:22rem;
    width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

}



/*// Extra small devices (portrait phones, less than 576px)*/
/*// No media query since this is the default in Bootstrap*/


/*// Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {


}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {


}

/*// Large devices (desktops, 992px and up) */
@media (min-width: 992px) {



}

/*// Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {



}

@media (min-width: 1920px) {



}

@media (min-width: 2000px) {



}