.content-expanded .negative-margin {
    margin: -20px;
}
.content-expanded .content-padding {
    padding: 20px;
    cursor: pointer;
}
.content-expanded .content-padding .content {
    position: absolute;
    bottom: 50px;
    width: calc(100% - 100px);
    padding: 30px;
    background: white;
    left: 50px;
    border-radius: var(--global-border-radius);

}
.content-expanded .content-padding .hidden-content {
    /*visibility: hidden;*/
    /*opacity: 0;*/
    /*height: 0;*/
    max-height: 0;
    transition: 500ms max-height ease;
    opacity: 0;
}
.content-expanded .content-padding:hover .hidden-content {
    /*visibility: visible;*/
    /*opacity: 1;*/
    max-height: 400px;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}
.content-expanded .content-padding .content p.h5style.coral {
    margin-bottom: 10px;
}
.content-expanded .content-padding .content p.h3style {
    margin-bottom: 20px;
}
.content-expanded .content-padding .content p.h5style:last-of-type {
    margin-bottom: 0;
}
.content-expanded p.h5style.coral {
    color: var(--coral);
}
.content-expanded .content-padding:first-child .image-square:after {
    content: '';
    background-image: url(assets/blue_circle.svg);
    background-position: top left;
    position: absolute;
    top: -15%;
    right: -15%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
}
.content-expanded .content-padding:nth-child(2) .image-square:after {
    content: '';
    background-image: url(assets/green_circle.svg);
    background-position: top left;
    position: absolute;
    bottom: -25%;
    right: -45%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
}
.content-expanded .content-padding:last-child .image-square:after {
    content: '';
    background-image: url(assets/yellow_circle.svg);
    background-position: top left;
    position: absolute;
    top: -30%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.5s;
}
.content-expanded .content-padding:hover .image-square:after {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}
/*.content-expanded .content-padding:last-child:hover .image-square:after {*/
/*    opacity: 1;*/
/*    animation-name: fadeInOpacity;*/
/*    animation-iteration-count: 1;*/
/*    animation-timing-function: ease-in;*/
/*    animation-duration: 0.5s;*/
/*}*/
.content-expanded .image-square {
    padding-bottom: 136%;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOutOpacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media(max-width: 1199.98px){
    .content-expanded .image-square {
        padding-bottom: 125%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .content-expanded .content-padding .content {
        position: relative;
        bottom: 0;
        width: 100%;
        padding: 15px;
        left: 0;
        border-radius: 0;
        border-bottom-left-radius: var(--global-border-radius);
        border-bottom-right-radius: var(--global-border-radius);
    }
}
@media(max-width: 767.98px){
    .content-expanded .negative-margin {
        margin: -15px;
    }
    .content-expanded .content-padding {
        padding: 15px;
    }
    /*.content-expanded .content-padding .content {*/
    /*    bottom: 45px;*/
    /*    width: calc(100% - 90px);*/
    /*    left: 45px;*/
    /*}*/
    .content-expanded .content-padding .hidden-content,
    .content-expanded .content-padding:hover .hidden-content {
        max-height: 400px;
        opacity: 1;
        animation-name: unset;
        animation-iteration-count: unset;
        animation-timing-function: unset;
        animation-duration: unset;
    }
    .content-expanded .content-padding:first-child .image-square:after,
    .content-expanded .content-padding:nth-child(2) .image-square:after,
    .content-expanded .content-padding:last-child .image-square:after {
        opacity: 1;
        animation-name: unset;
        animation-iteration-count: unset;
        animation-timing-function: unset;
        animation-duration: unset;
    }
    .content-expanded .content-padding:first-child:hover .image-square:after,
    .content-expanded .content-padding:nth-child(2):hover .image-square:after,
    .content-expanded .content-padding:last-child:hover .image-square:after {
        opacity: 1;
        animation-name: unset;
        animation-iteration-count: unset;
        animation-timing-function: unset;
        animation-duration: unset;
    }
}
@media(max-width: 575.98px){
    .content-expanded .content-padding .content {
        padding: 30px;
        width: 100%;
        position: relative;
        bottom: 0;
        left: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .content-expanded .image-square.global-border-radius-large {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}