#AllKeynoteSpeakersCntr {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.KeynoteCntr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 0 40px 0;
}

.KeynoteCntr:first-of-type {
    border-top: 1px dotted var(--colorBranchColor);
    padding-top: 50px;
    margin-top: 40px;
}

.KeynoteCntr:not(:last-of-type) {
    border-bottom: 1px dotted var(--colorBranchColor);
}

.KeynoteFirstRow {
    display: flex;
    gap: 30px;
}

.NamePositionCompany {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.KeynoteNamePosition {
    display: flex;
    flex-direction: column;
}

.KeynoteName {
    font-family: "Cascadia Mono";
    color: var(--colorBlueRegular);
    margin-bottom: 10px;
    /* text-transform: uppercase; */
    font-size: 24px;
}

.KeynotePosition {
    color: var(--colorBranchColor);
    font-size: 14px;
    justify-content: flex-start;
}

.KeynoteSecondRow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ShowMoreDetails,
.ShowLessDetails {
    font-family: "Cascadia Mono";
    font-size: 14px;
    /* line-height: 180%; */
    padding: 5px;
    cursor: pointer;
    /* text-transform: uppercase; */
    border-bottom: 2px dotted var(--colorBranchColor);
    /* background-color: var(--colorGreenRegular); */
    background-color: var(--colorLightGray);
}

.ShowMoreDetails:hover,
.ShowLessDetails:hover {
    color: var(--colorBlueRegular);
    /* border-bottom: 2px dotted var(--colorBranchColor); */
}

.MoreDetailsCntr.Hidden {
    display: none;
}

.KeynotePhotoCntr {
    position: relative;
    width: 250px;
    height: 250px;
    flex: 0 0 250px;
}

.KeynotePhoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: opacity 1s; */
}

.KeynotePhotoDuotone {
    opacity: 1;
}

.KeynotePhotoColor {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.KeynoteCntr:hover .KeynotePhotoColor {
    opacity: 1;
}

.KeynoteCntr a img {
    transition: transform 0.4s ease;
}

.KeynoteCntr a:hover img {
    transform: scale(1.05);
}

@media screen and (max-width: 1150px) {
    .KeynotePhotoCntr {
        position: relative;
        width: 180px;
        height: 180px;
        flex: 0 0 180px;
    }
}

@media screen and (max-width: 750px) {
    .KeynoteFirstRow {
        flex-direction: column;
        gap: 10px;
    }
}