.imageShadow {
    width: 100%;
    height: auto;
}

.contactFormImage, .contactFormImage.angleoverlay {
    position: relative;
}

.contactFormImage.angleoverlay:after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgb(144, 209, 218, .95) 0%, rgba(144, 209, 218, .85) 50%);
    clip-path: polygon(50% 100%, 50% 70%, 100% 50%, 100% 100%);
}

/*Shape Masks*/

.hexagonMask {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover !important;
    width: auto;
    height: 550px;
    margin: 0;
    padding: 0;
    clip-path: polygon(59% 0, 100% 33%, 91% 83%, 41% 100%, 0 67%, 9% 18%);
}

/*Shape Shadow Colours*/

.contactFormImage-bg-yellow {
    filter: drop-shadow(-14px 68px 0px rgba(255, 255, 0, 1));
}

.contactFormImage-bg-light-blue {
    filter: drop-shadow(-14px 68px 0px rgba(0, 204, 255, 1));
}

.contactFormImage-bg-purple {
    filter: drop-shadow(-14px 68px 0px rgba(190, 117, 251, 1));
}

.contactFormImage-bg-orange {
    filter: drop-shadow(-14px 68px 0px rgba(255, 140, 76, 1));
}

.contactFormImage-bg-green {
    filter: drop-shadow(-14px 68px 0px rgba(104, 249, 112, 1));
}

.contactFormImage-bg-pink {
    filter: drop-shadow(-14px 68px 0px rgba(255, 112, 251, 1));
}

.contactFormImage-bg-white {
    filter: drop-shadow(-14px 68px 0px rgba(255, 255, 255, 1));
}

/*Responsive styles*/

@media screen and (max-width: 1199px) {
    .hexagonMask {
        height: 420px;
    }
}

@media screen and (max-width: 991px) {
    .hexagonMask {
        height: 310px;
    }
}

@media screen and (max-width: 767px) {
    .hexagonMask {
        height: 465px;
        margin: 0 0 100px 0;
    }
}

@media screen and (max-width: 425px) {
    .hexagonMask {
        height: 360px;
    }
}

@media screen and (max-width: 325px) {
    .hexagonMask {
        height: 260px;
    }
}