:root {
    /*container*/
    --mainDwcAnnouncementContainer-max-width: 1280px;
    --mainDwcAnnouncementContainer-padding-right: 80px;
    --mainDwcAnnouncementContainer-padding-left: 80px;
    /*tile*/
    --dwcAnnouncementHeader-padding-top: 40px;
    --dwcAnnouncementHeader-padding-bottom: 24px;
    --dwcAnnouncementHeader-gap: 5px;
    /*content*/
    --dwcAnnouncementContent-gap: 16px;
    --contentRow-flex-wrap: nowrap;
    --contentItem-width: calc((100vw - var(--mainDwcAnnouncementContainer-padding-left) - var(--mainDwcAnnouncementContainer-padding-right))/4);
    --contentItem-height: 277px;
    --contentItem-padding-top: 24px;
    --contentItem-border-radius: 16px;
    --contentItemGroup-min-width: 426px;
    --contentItemGroup-max-width: 627px;
    --contentItem-min-width: 205px;
    --contentItem-max-width: 305px;
    --contentItem-itemDescription-max-width: 320px;
    --contentItem-itemImage-zoom: 140%;
}

@media (min-width: 1028px) {
    :root {
        --mainDwcAnnouncementContainer-max-width: 1280px;
        --mainDwcAnnouncementContainer-padding-right: 80px;
        --mainDwcAnnouncementContainer-padding-left: 80px;
        --contentItemGroup-max-width: 627px;
        --contentItem-max-width: 305px;
        --contentRow-flex-wrap: nowrap;
        --contentItem-width: calc((100vw - var(--mainDwcAnnouncementContainer-padding-left) - var(--mainDwcAnnouncementContainer-padding-right))/4);
        --contentItem-itemImage-zoom: 140%;
    }
}

@media (max-width: 1027px) {
    :root {
        --mainDwcAnnouncementContainer-max-width: 1025px;
        --mainDwcAnnouncementContainer-padding-right: 32px;
        --mainDwcAnnouncementContainer-padding-left: 32px;
        --contentItemGroup-max-width: unset;
        --contentItem-max-width: unset;
        --contentRow-flex-wrap: wrap;
        --contentItem-width: calc((100vw - var(--mainDwcAnnouncementContainer-padding-left) - var(--mainDwcAnnouncementContainer-padding-right))/2);
        --contentItem-itemImage-zoom: 100%;
    }
}


@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-ExtraBold.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-Thin.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../Fonts/Fira/FiraSans-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
}


html, body {
    width: 100%; /* maybe this need to be scalable */
    height: 100%; /* maybe this need to be scalable */
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', 'Avant Grade Gothic book', 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif !important;
    overflow-x: hidden;
}

#frDwcAnnouncement {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainDwcAnnouncementContainer {
    max-width: var(--mainDwcAnnouncementContainer-max-width);
    padding-left: var(--mainDwcAnnouncementContainer-padding-left);
    padding-right: var(--mainDwcAnnouncementContainer-padding-right);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 0;
}

.dwcAnnouncementHeader {
    width: 100%;
    padding-top: var(--dwcAnnouncementHeader-padding-top);
    padding-bottom: var(--dwcAnnouncementHeader-padding-bottom);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: var(--dwcAnnouncementHeader-gap);
}

    .dwcAnnouncementHeader * {
        padding: 0;
        margin: 0;
    }

    .dwcAnnouncementHeader .headerNote {
        color: #0066CC;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
        letter-spacing: 0;
    }

    .dwcAnnouncementHeader .headerTitle {
        color: #1A3148;
        font-size: 24px;
        line-height: 32px;
        font-weight: 600;
        letter-spacing: 0;
    }

.dwcAnnouncementContent {
    padding-top: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: var(--dwcAnnouncementContent-gap);
}

    .dwcAnnouncementContent .contentRow, .contentRow .contentItemGroup {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: start;
        gap: var(--dwcAnnouncementContent-gap);
    }

.contentRow {
    flex-wrap: var(--contentRow-flex-wrap);
}

.contentItem {
    /*min-width: var(--contentItem-min-width);*/
    max-width: var(--contentItem-max-width);
    width: calc(var(--contentItem-width));
    background-color: #FAFAFB;
    border: 1px solid #EBEDEF;
    border-radius: var(--contentItem-border-radius);
    height: var(--contentItem-height);
    overflow: hidden;
    padding-top: var(--contentItem-padding-top);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0;
}

    .contentItem > *:not(img) {
        padding-left: 24px;
        padding-right: 24px;
        margin: 0;
    }

    .contentItem > *.noPadding {
        padding-left: 0;
        padding-right: 0;
    }

    .contentItem.wide, .contentItemGroup {
        /*min-width: var(--contentItemGroup-min-width);*/
        max-width: var(--contentItemGroup-max-width);
        width: calc(var(--contentItem-width) * 2);
    }

    .contentItem .itemNote, .contentItem .itemTitle, .contentItem .itemDescription {
        z-index: 2;
        margin-bottom: 4px;
        display: inline-block;
        max-width: var(--contentItem-itemDescription-max-width);
    }

    .contentItem .itemNote {
        color: #0066CC;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }

    .contentItem .itemTitle {
        color: #33485C;
        font-size: 18px;
        line-height: 24px;
        font-weight: 500;
    }

    .contentItem .itemDescription {
        color: #4D5F71;
        font-size: 14px;
        line-height: 18px;
        font-weight: 400;
    }

    .contentItem .itemImage {
        margin-top: auto;
        justify-self: end;
        align-self: start;
        position: relative;
        width: var(--contentItem-itemImage-zoom);
    }

        .contentItem .itemImage.shiftUp {
            position: relative;
            bottom: 75px;
            align-self: end;
        }

.dwcAnnouncementFooter {
    padding-top: 32px;
    padding-bottom: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#lnkIntroFooterInvitation, #lnkIntroFooterOpenTWA, #lnkIntroFooterOpenNewClient {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

#lnkIntroFooterInvitation {
    color: #4D5F71;
}

    #lnkIntroFooterInvitation::after {
        content: '';
        display: inline-block;
        margin-left: 5px;
        width: 24px;
        height: 24px;
        background-image: url('./DwcAnnouncement/Link.svg');
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        top: 7px;
    }

#lnkIntroFooterOpenTWA, #lnkIntroFooterOpenNewClient {
    border: 1px solid #0066CC;
    border-radius: 4px;
    padding: 8px;
}

.introFooterButtons {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 8px;
    padding: 0;
}

#lnkIntroFooterOpenTWA {
    color: #0066CC;
    background-color: #fff;
}

#lnkIntroFooterOpenNewClient {
    color: #F8FBFF;
    background-color: #0066CC;
}