*{
  margin:0;
  padding:0
}

.banner.noGreyscale {
    margin: 0;
    height: 480px;
    background-repeat: repeat;
}

.banner {
    position: relative;
    height: 450px;
    overflow: hidden;
    margin: 0 0 30px;
    background: url('https://www.elcomcms.com/images/UserUploadedImages/32115/bg-banner-darken.jpg') 0 0 repeat-x;
}

.banner.noGreyscale .backgroundImg {
    max-height: none;
    opacity: .7;
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s;
}

.banner.topBackground .backgroundImg {
    background-position: top;
}

.banner .backgroundImg {
    height: 100%;
    max-height: 370px;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
    overflow: hidden;
    text-shadow: 10px 10px 100px #000;
    -webkit-filter: contrast(120%);
    -moz-filter: contrast(120%);
    -o-filter: contrast(120%);
    -ms-filter: contrast(120%);
    filter: contrast(120%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    position: absolute;
    z-index: 2;
    width: 100%;
    opacity: .8
}

.banner.topBackground .backgroundImg {
    background-position: top
}

.banner.bottomBackground .backgroundImg {
    background-position: bottom
}


.banner.noGreyscale {
    margin: 0;
    height: 480px;
    background-repeat: repeat
}

.banner.noGreyscale .backgroundImg {
    max-height: none;
    opacity: .7;
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s
}

.banner.noGreyscale:hover .backgroundImg {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}