@media (max-width: 576px) {
    .impactheight {
        line-height: 18px
    }

    .buttonwidth {
        width: 100%
    }

    .carddescriptionwidth {
        max-width: 100%;
    }

    .pbuttonwidth {
        padding-top: -10%
    }
  
}

@media (min-width:576px) {
    .impactheight {
        line-height: 24px
    }

    .buttonwidth {
        width: 80%
    }

    .carddescriptionwidth {
        max-width: 50%;
    }

    .impactheight {
        height: 2%
    }

  
}

@media (max-width: 576px) {
    .impactheight {
        line-height: 18px
    }

    .buttonwidth {
        width: 100%
    }

    .carddescriptionwidth {
        max-width: 100%;
    }

    .pbuttonwidth {
        padding-top: -10%
    }
}



@media (max-width: 767px) {
    .impactheight {
        height: 2%
    }
 
}




@media (max-width: 992px) {
    .buttonwidth {
        width: 95%
    }

    .carddescriptionwidth {
        max-width: 100%;
    }

    .pbuttonwidth {
        padding-top: -2%
    }
}

@media (min-width: 992px) {
    .buttonwidth {
        width: 60%
    }

    .pbuttonwidth {
        padding-top: 2%
    }
}


@media (min-width: 1280px) {
    .buttonwidth {
        width: 50%
    }
}

.cont2 {
    position: relative;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;

}


.overlay2 {
    position: relative;
}



.overlay2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(58 59 94 / 30%);
    z-index: 2;
}


/* When you mouse over the container, fade in the overlay icon*/
.cont2:hover .overlay1 {
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 30;
    /*transition: .5s ease;*/
    -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
    box-shadow: 0 0 20px 10px rgba(0,0,0,.2);
    text-decoration: none;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon1 {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

/* When you move the mouse over the icon, change color */
.fa-play-circle-o:hover {
    color: #4faac6;
}