.cert-cards {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    width: 100%;
}

.cert-cards .cert-card {
    flex: 1;
    margin: 30px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
}

.cert-cards .cert-card .title {
    color: var(--font-color);
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: bold;

}

.cert-cards .cert-card .photo-border {
    background: rgba(252,249,239,1);
}

.cert-cards .cert-card:first-child {
    margin-left: 0;
}

.cert-cards .cert-card:last-child {
    margin-right: 0;
}

.cert-cards .cert-card .more-info {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(47,128,237,0.1);
    backdrop-filter: blur(20px);
    left: 0;
    top: 0;
    border-radius: 20px;
    display: block;
    transition: all ease-in 200ms;
    opacity: 0;
    box-shadow: 0 0 8px 0 #888888aa;
    box-sizing: border-box;
    padding: 20px;
}

/*.cert-cards .cert-card:hover .more-info {
    opacity: 1;
}*/

.more-info .title {
    color: var(--active-color)!important;
    font-weight: bold!important;
    display: block!important;
}

.more-info dl {
    margin-top: 50px;
    text-align: left;
    color: var(--active-color)!important;
    padding: 0 20px;
    transition: all ease-in 200ms;
    height: calc(100% - 80px);
    overflow: auto;
}

.more-info dl dt {
    font-size: 1rem;
    margin-bottom: 6px;
    margin-top: 20px;
}

.more-info dl dt:first-child {
    margin-top: 0;
}

.more-info dl dd {
    font-weight: lighter;
    padding: 0;
    margin: 0;
    text-align: justify;
}

.cert-cards .cert-card:hover .more-info dl {
    margin-top: 0;
}

.cert-cards .cert-card:hover .more-info .apply-button {
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    box-sizing: border-box;
}

.cert-cards .cert-card:hover .more-info .apply-button a {
    background: linear-gradient(to right, #66bbf8, #07b7d7) no-repeat!important;
    border: none;
    outline: none;
    box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.14);
    transition: all ease-in 200ms;
}

.cert-cards .cert-card:hover .more-info .apply-button a:hover {
    background: linear-gradient(to right, #66bbf8 100%, #07b7d7) no-repeat!important;
    box-shadow: 0px 0px 12px 0 rgba(0,0,0,0.44);
}

.cert-list li {
    list-style: disc outside;
    text-indent: -2px;
    margin-left: 16px;
    text-align: justify;
}
/*---------- PHOTO BORDER ----------*/
.photo-border {
    box-shadow:
            0 2px 10px hsla(0,0%,0%,.4),
            inset 0 1px 0 #ccc,
            inset 1px 0 0 #aaa,
            inset 0 -1px 0 #ccc,
            inset -1px 0 0 #aaa,

            inset 0 2px 0 #c6c6c6,
            inset 2px 0 0 #a6a6a6,
            inset 0 -2px 0 #c6c6c6,
            inset -2px 0 0 #a6a6a6,

            inset 0 3px 0 #c0c0c0,
            inset 3px 0 0 #a0a0a0,
            inset 0 -3px 0 #c0c0c0,
            inset -3px 0 0 #a0a0a0,

            inset 0 4px 0 #b9b9b9,
            inset 4px 0 0 #999,
            inset 0 -4px 0 #b9b9b9,
            inset -4px 0 0 #999,

            inset 0 5px 0 #b6b6b6,
            inset 5px 0 0 #969696,
            inset 0 -5px 0 #b6b6b6,
            inset -5px 0 0 #969696,

            inset 0 6px 0 #b0b0b0,
            inset 6px 0 0 #909090,
            inset 0 -6px 0 #b0b0b0,
            inset -6px 0 0 #909090,

            inset 0 7px 0 #a9a9a9,
            inset 7px 0 0 #898989,
            inset 0 -7px 0 #a9a9a9,
            inset -7px 0 0 #898989,

            inset 0 8px 0 #a6a6a6,
            inset 8px 0 0 #868686,
            inset 0 -8px 0 #a6a6a6,
            inset -8px 0 0 #868686,

            inset 0 9px 0 #a0a0a0,
            inset 9px 0 0 #808080,
            inset 0 -9px 0 #a0a0a0,
            inset -9px 0 0 #808080,

            inset 0 10px 0 #888,
            inset 10px 0 0 #666,
            inset 0 -10px 0 #888,
            inset -10px 0 0 #666,

            inset 0 0 10px 10px hsla(0,0%,0%,.5);
}