.bg-white {
    background-color: var(--color-white);
}
.bg-lightgreen {
    background-color: var(--color-primary-lighter);
}
.bg-darkgreen {
    background-color: var(--color-secondary);
}
.bg-beige {
    background-color: var(--color-light-background);
}

.half-image-text-section.bg-darkgreen :not(.btn) {
    color: var(--color-white);
}

.half-image-text__img-wrap {
    text-align: center;
    margin-bottom: var(--section-margins);
}

.half-image-text__img {
	height: auto;
	width: 400px; /* remove if blurry picture is an issue on the Randa Moore page */
    border-radius: 15px;
}

.content-and-image__image-pop {
    position: relative;
    display: inline-block;
}

.content-and-image__image-pop:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.1);
    border-radius: 15px;
}

.content-and-image__image-pop:hover:before {
    background: rgb(0, 0, 0, 0);
}

.content-and-image__image-play {
    width: 95px;
    height: 95px;
    display: flex;
    background: #fff;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0 0 rgba(255,255,255,.31);
    -webkit-animation: heartbeat 2.5s cubic-bezier(0, 0.99, 0, 1) infinite both;
	        animation: heartbeat 2.5s cubic-bezier(0, 0.99, 0, 1) infinite both;
}

.content-and-image__image-pop:hover .content-and-image__image-play {
    -webkit-animation: none;
            animation: none;
}

.content-and-image__image-play svg {
    margin-left: 8px;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    box-shadow: 0 0 0 50px rgba(90,153,212,0);
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    box-shadow: 0 0 0 50px rgba(90,153,212,0);
  }
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    box-shadow: 0 0 0 50px rgba(90,153,212,0);
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    box-shadow: 0 0 0 50px rgba(90,153,212,0);
  }
}

@media (min-width: 1200px) {
    .half-image-text__row {
        display: flex;
        align-items: center;
    }
    
    .half-image-text__row-reverse {
        flex-direction: row-reverse;
    }
    
        .half-image-text__content-wrap {
            padding-left: 32px;
        }
    
        .half-image-text__row-reverse .half-image-text__content-wrap {
            padding-left: 0;
            padding-right: 32px;
        }
    
        .half-image-text__img-wrap {
            margin-bottom: 0;
        }
}