@charset "UTF-8";

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Thin.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-ThinItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-ThinItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Light.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-LightItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Regular.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Italic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Medium.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-MediumItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Bold.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-BoldItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-ExtraBold.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-ExtraBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-ExtraBoldItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-ExtraBoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-Black.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('https://cdn.baseform.com/Chivo-Full/Chivo-BlackItalic.woff2') format('woff2'),
    url('https://cdn.baseform.com/Chivo-Full/Chivo-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

/* RESET */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
    font-size: 1em;
    font-weight: 300;
    font-style: normal;
}

ul, ol {
    list-style: none;
}

fieldset, img {
    border: none;
}

caption, th {
    text-align: left;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clear {
    clear: both;
}

strong {
    font-weight: 700;
}

em {
    font-style: oblique;
}

/*site*/
html {
    margin: 0;
    padding: 0;
    font-family: Chivo, sans-serif;
    color: #002030;
    &:has(#menu-overlay.visible){
        overflow: hidden;
    }
    &[lang="en-US"]{
        div.customSelect.newsTypePicker{
            width: 116px;
        }
    }

    &[lang="es-ES"]{
         div.customSelect.newsTypePicker{
            width: 158px;
        }
    }

    &[lang="pt-PT"],&[lang="pt-BR"]{
         div.customSelect.newsTypePicker{
            width: 152px;
        }
    }
}

a {
    color: #77a3dd;
    text-decoration: none;
}

.text ul li, ul.text li {
    list-style-position: outside;
}

a:hover {
    color: #002030;
}

.dark a:hover {
    color: white;
}

.customSelect {
    border: 1px solid white;
}

.white .customSelect {
    border: 1px solid #002030;
    border-bottom: none;
}

.headContent.section {
    height: 108px;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    &:has(.localeAlert.visible){
        height:143px;
    }

    .grid {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        /* auto side margins in a flex column shrink the grid to its content; fill the row like the other grids
           (max-width 904px + 2 x 60px padding of a content-box grid) */
        width: 100%;
        max-width: 1024px;
        box-sizing: border-box;

        .buttonGroup {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 14px;
            margin-top: 17px;

            > * {
                width: 66px;
                height: 24px;
                line-height: 24px;
                box-sizing: border-box;
            }

            a {
                border: 1px solid white;
                background: none;
                color: white;
                font-size: 14px;
                width: 66px;
                text-align: center;
                vertical-align: middle;
                text-transform: uppercase;
                font-weight: 500;

                &.btnJobs {
                    color: #002030;
                    border: 1px solid #002030;
                    background-color: white;
                    &:hover {
                        color: #77A3DD;
                        border-color: #77A3DD;
                    }
                }

                &.btnLogin {
                    background-color: #002030;
                    color: white;
                    border-color: #002030;

                    &:hover {
                        background-color: white;
                        color: #002030;
                    }
                }
            }

        }

        #top {
            font-size: 24px;
            margin-top: 0;
            display: flex;
            align-items: flex-end;
            box-sizing: border-box;
            gap: 36px;

            #mainMenu {
                font-size: 24px;
                padding-bottom: 4px;
            }

            #hamburger-icon,#menu-overlay {
                display: none;
            }

        }
    }
}

.dark .headContent.section {
    .buttonGroup {
        a.btnLogin {
            background-color: white;
            color: #002030;
            border-color: white;

            &:hover {
                background-color: #002030;
                color: white;
                border-color: white;
            }
        }
        a.btnJobs {
            color: #77A3DD;
            border: 1px solid #77A3DD;
            background-color: #002030;
            &:hover {
                color: #FFBB33;
                border-color: #FFBB33;
            }
        }
    }
}

.customSelect {
    .langPickerHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 6px;
    }

    .selectPopup li {
        display: none;
    }

    &.newsTypePicker{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 6px;
        width: 175px;
        margin-bottom: 20px;
    }

    .icon {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid white;
        pointer-events: none;
        margin-bottom: 2px;
    }
}

.dark .customSelect {
    background: #002030;

    .icon {
        border-top-color: white;
    }
}

.white{
    .customSelect {
        .icon {
            border-top-color: #002030;
        }
    }
    .mainContent.section{
        padding-top: 30px;
    }
}

.customSelect .selectTitle {
    color: white;
    text-transform: uppercase;
    background: #002030;
    border-radius: unset;
    font-family: "Chivo";
    vertical-align: middle;
    font-size: 14px;
    line-height: 22px;
    height: 22px;
    cursor: pointer;
}

.customSelect .selectPopup li {
    text-transform: uppercase !important;
    height: 20px;
    font-size: 14px;
    line-height: 22px;
    margin: 0 6px;
    border-top: 1px solid white;
    padding-left: 0 !important;
    cursor: pointer;
    text-align: left;
}

.white .customSelect .selectPopup li {
    border-top-color: #002030;
}

.customSelect .selectPopup li:hover {
    color: #77a3dd;
}

.white .customSelect .selectTitle {
    color: #002030;
    background: white;
}

.customSelect .selectPopup {
    position: absolute;
    left: -1px;
    right: -1px;
    border-top: 1px solid white;
    background: #002030;
    z-index: 2;
    top: 22px;
}

.white .customSelect .selectPopup {
    border-top: 1px solid #002030;
    background: white;
}

.customSelect .selectPopup.active {
    border: 1px solid white;
    border-top: none;
}

.white .customSelect .selectPopup.active {
    border: 1px solid #002030;
    border-top: none;
}

.customSelect .selectPopup.active li {
    display: block !important;
}

.customSelect .selectPopup.active li.selected {
    display: none !important;
}


.customSelect {
    position: relative;
    display: block;
    width: max-content;
}

.headContent--height {
    height: 108px;
}

body:has(.headContent.section .localeAlert.visible) .headContent--height{
        height:143px;
}

.headContent.section {
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba(0, 32, 48, .9);
    -webkit-transition: background .5s; /* Safari */
    transition: background .5s;
}

.productNavigationBar--height {
    height: 52px;
}

.white .customSelect:after {
    border-top: 5px solid #002030;
}

.headContent.section .localeAlert.visible {
    display: inline-block;

    .grid{
        flex-direction: row;
    }
}

.headContent.section .localeAlert {
    display: none;
    width: 100%;
    background: #77a3dd;
    padding: 8px 0;
}

.headContent.section .localeAlert a {
    color: white;
    font-family: 'Chivo';
    font-weight: 200;
    display: inline-block;
    vertical-align: middle;
}

.headContent.section .localeAlert u {
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 1px;
}


.white .headContent.section {
    background: rgba(255, 255, 255, .9);
}

.section.headContent .grid {
    /*padding: 0;*/
}


.section .grid {
    margin: 0 auto;
    max-width: 904px;
    width: auto;
    padding: 0 60px;
}


.loginMobile {
    background-image: url(/img/login_white.svg.br);
    position: absolute;
    right: 0;
    width: 41px;
    height: 41px;
    top: 56px;
    background-size: contain;
    background-position: center;
    display: none;
}

.white .loginMobile {
    background-image: url("/img/login.svg.br");
}

#localeMessage {
    font-size: 24px;
    text-align: right;
    position: absolute;
    margin-top: 0;
    height: 69px;
    max-height: 83px;
}

.dismiss {
    height: 20px;
    cursor: pointer;
    width: 20px;
    display: block;
    background-image: url("/img/close.white.svg.br");
    background-repeat: no-repeat;
    background-size: 20px;
}

.localeAlert .text {
    width: 100%;
    text-align: center;
}


.dismiss:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.whatsappBtn {
    height: 54px;
    width: 54px;
    bottom: 27px;
    right: 27px;
    position: absolute;
    z-index: 9999;
    transition: width 0.35s ease;
}

.whatsappBtn:hover {
    width: 244px;
    transition-delay: 0.2s;
}

.whatsappBtn:before {
    content: '';
    top: 0;
    right: 0;
    position: absolute;
    height: 100%;
    width: 54px;
    background-image: url(/img/WA_icon.svg.br);
    background-repeat: no-repeat;
    z-index: 1;
}

.whatsappBtn:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    height: 70px;
    width: 70px;
    box-sizing: border-box;
    z-index: -1;
    background-color: #53BA63;
    border-radius: 50px;
    border: 2px solid white;
    transform: translateY(-50%) scale(0);
    transform-origin: calc(100% - 35px) center;
    transition: width 0.35s ease, transform 0.2s ease 0.35s;
}

.whatsappBtn:hover:after {
    width: 260px;
    transform: translateY(-50%) scale(1);
    transition: transform 0.2s ease, width 0.35s ease 0.2s;
}

.whatsappBtn > span {
    position: absolute;
    top: 0;
    right: 70px;
    height: 100%;
    width: 166px;
    background: url("/img/whatsapp_text.svg.br") no-repeat center / contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.whatsappBtn:hover > span {
    opacity: 1;
    transition-delay: 0.4s;
}

ul.buttonList {
    position: absolute;
    width: 100%;
    list-style: none;
    top: 13px;
}

ul.buttonList li {
    display: inline-block;
    margin-left: 14px;
}

#mainMenu li {
    /*letter-spacing: .07em;*/
    padding-left: 18px;
    text-transform: lowercase;
    font-size: 24px;
}

#mainMenu li.on a {
    color: #002030;
}

.dark #mainMenu li.on a {
    color: white;
}

#mainMenu li:first-child {
    padding-left: 0;
}

.logo {
    background: url(//cdn.baseform.com/baseform.com/img/home/v2/logo20.svg) no-repeat;
    background-size: contain;
    width: 186px;
    height: 45px;
    /*left:0;*/

    /*background-position-y: 72%;*/
    /*position: absolute;*/
    display: block;
    /*vertical-align: middle;*/
    padding: 0;
    /*bottom: 20px;*/
}
.headContent.section .grid #top{
    .logo.christmas{
        background: url(/img/baseform-christmas.svg) no-repeat;

    }
    &:has(.logo.christmas) #mainMenu{
        padding-bottom: 6px;
    }
}

.white .logo {
    background-image: url(//cdn.baseform.com/baseform.com/img/home/v2/logo20_dark.svg.br);
}


ul#mainMenu li {
    display: inline-block;
    vertical-align: text-bottom;
}

#newsreel {
    padding-bottom: 50px;
}

.newsContent .grid .newsBlock:first-child {
    margin-left: 0;
}

.newsContent .grid .newsBlock {
    width: calc(25% - 14px);
    margin-left: 18px;
    float: left;
}

.newsBlock:first-child {
    margin-left: 0;
}

.newsBlock .date {
    font-size: 14px;
    /*font-weight: 500;*/
    color: #ffbb33;
}

.newsBlock .title {
    font-size: 18px;
    font-weight: 700;
    padding: 4px 0;
}

.newsBlock .preview {
    font-size: 16px;
}

.newsBlock .title a {
    color: #002030;
}

.newsBlock .title {
    color: #ffbb33;
}

#mapOut {
    margin: 20px auto;
    border-top: 1px solid #002030;
}

.mapBlockGrid {
    /*box-sizing: border-box;*/
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.mapBlockGrid .mapBlock {
    margin-top: 0;

    ul {
        margin: 0;
        padding: 0;
    }
}

#mapOut .grid {
    padding-top: 15px;
    padding-bottom: 15px;
}

.mapBlock {
    color: #77a3dd;
    font-size: 14px;
}


.mapBlock .l1 {
    padding: 4px 0;
    font-weight: 500;
    text-transform: uppercase;
}

.mapBlock .l1 a {
    color: #002030;
    cursor: pointer;
}

.mapBlock .l2 {
    padding: 2px 0;
}

.mapBlock.tm {
    color: #002030;
    padding-top: 5px;
    line-height: 140%;
    font-weight: 300;
}

.responsiveTm .tmUl li {
    display: inline-block;
}

#intro {
    display: none;
    position: relative;
    padding: 18px 0;
    border-bottom: 1px solid #002030;
    min-height: 70px;
}

#intro .lead {
    width: 184px;
    position: absolute;
    font-size: 35px;
    line-height: 48px;
    font-weight: 400;
    text-transform: lowercase;
}

#intro .lead a {
    color: #002030;
}

#intro .body {
    margin-left: 25%;
    /*font-weight: 400;*/
    font-size: 15px;
}

.menu {
    width: auto;
    float: left;
    position: fixed;
}

.menu li {
    font-size: 14px;
    font-weight: 500;
    padding: 3px 0;
}


.svgLogoNews {
    background: hsla(200, 100%, 9%, 1);
    background: linear-gradient(270deg, hsla(200, 100%, 9%, 1) 0%, hsla(211, 35%, 47%, 1) 100%);
    background: -moz-linear-gradient(270deg, hsla(200, 100%, 9%, 1) 0%, hsla(211, 35%, 47%, 1) 100%);
    background: -webkit-linear-gradient(270deg, hsla(200, 100%, 9%, 1) 0%, hsla(211, 35%, 47%, 1) 100%);
    width: 100%;
    height: 338px;
    object-fit: contain;
}

.menu li.l1 {
    font-size: 18px;
}

.menu .selected a {
    color: #002030;
}

#main {
    display: flex;
    position: relative;
    padding-bottom: 19px;
    div[style="clear: both"]{
        display: none;
    }
}

body:has(.subMenuContent:not[style="display:none"]) .mainContent {
    margin-top: 114px;
}

article:not(:has( div.appsInfoHolder)) {
    margin-left: calc(25% - 2px);
    line-height: 1.45;
    font-size: 18px;
    width: 75%;
}

article h2.lead {
    font-weight: normal;
    line-height: 1.3;
    margin-top: 0;
}

article p {
    padding-top: 6px;
    font-size: 18px;
}

article hr {
    border: 0;
    height: 1px;
    background: #77a3dd;
}

article h1 {
    font-size: 30px;
    font-weight: 700;
    /*margin-top: 24px;*/
    margin-bottom: 5px;
    line-height: 1.2;
}

article h2 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 20px;
    /*margin-bottom: 5px;*/
}

article h3 {
    font-size:18px;
    font-weight: 700;
    margin-top: 20px;
}

article em {
    font-weight: inherit;
}

article div label[for="nonE"]{
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    line-height: 1.45;
}

article .bibref {
    border-top: 1px solid #77a3dd;
    margin-top: 5px;
    padding-top: 8px;
}

article ul {
    list-style: disc outside;
    margin-left: 16px;
}

article li {
    padding-top: 6px;
}

article figure {
    margin: 24px 0;
}

article video {
    display: block;
    width: 100%;
    height: auto;
}

/* a video in an article starts on its own; until then a play button sits on the poster (added by the news page script) */
article .videoHolder {
    position: relative;
}

article .videoPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 32, 48, .35);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}

/* the triangle, a little right of center so that it looks centered */
article .videoPlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #002030;
    transform: translate(-38%, -50%);
}

article .videoPlay:hover,
article .videoPlay:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
}

/* when the poster has its own title in the middle, the button sits below it */
article figure.playLow .videoPlay {
    top: 76%;
}

@media only screen and (max-width: 720px) {
    article .videoPlay {
        width: 44px;
        height: 44px;
    }

    article .videoPlay::before {
        border-width: 8px 0 8px 13px;
    }
}

article figcaption {
    font-size: 14px;
    font-weight: 300;
    margin-top: 6px;
}

article blockquote {
    border-left: 3px solid #77a3dd;
    padding-left: 16px;
    margin: 16px 0;
}

/* the big news title is display text: set tighter than the 1.2 of the smaller article titles */
html body article.newsArticle h1 {
    line-height: 1.1;
}

/* long lines are hard to follow: news text keeps a readable measure, images keep the full width */
article.newsArticle p, article.newsArticle ul, article.newsArticle blockquote {
    max-width: 70ch;
}

.team {
    font-size: 12px;
    line-height: 1;
    display: grid;
    gap: 24px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    margin-top:8px;

    .member {
        position: relative;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        font-size: 12px;


        img {
            width: 100%;
            height: auto;
        }

        h3 {
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
            margin: 5px 0;
        }

        .jobTitle {
            display: block;
            line-height: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-weight: 300;
            margin-top: 2px;
        }

        .linkedin {
            background: url(/img/linkedin.svg.br);
            width: 16px;
            height: 16px;
            background-size: cover;
            vertical-align: baseline;
            margin-left: 1px;
            position: absolute;
            display: inline-block;
            right: 0;
            margin-top: 4px;
        }
    }

}

/****** DARK BG ******/
html.dark {
    background-color: #002030;
    color: white;
    overflow-x: hidden;
}

html.dark #intro .lead a {
    color: white;
}


html.dark .home #top {
    border-bottom: none;
}

html.dark #mapOut {
    border-top: 1px solid white;
}

html.dark .mapBlock {
    color: #77a3dd;
}

html.dark .mapBlock .l1 a {
    color: white;
}

html.dark .mapBlock .l1 a:hover {
    color: white;
}

html.dark .mapBlock .l2 a {
    font-weight: 100;
}

html.dark .mapBlock.tm {
    color: white;
}

.bannerContent > div.grid {
    padding: 0px;
    max-width: 1024px;
}

.bannerContent > div {
    max-height: calc(725px + 200px);
    height: 480px;
    z-index: 2;
    padding-top: 0;
}

.bannerContent > div .stickyInfo {
    max-height: 725px;
}

.bannerContent > div .stickyInfo .bg {
    max-height: 725px;
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 480px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    background-image: url("/img/home/bgInit.avif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bannerContent > div .mask {
    max-height: 725px;
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 480px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("/img/home/bgBlue.avif");
    background-position: center;

    -webkit-mask-image: linear-gradient(
            calc(var(--angle) * 1deg),
            transparent calc(var(--pct1) * 1%),
            #fff calc(var(--pct2) * 1%)
    );

}

.bannerContent .title h1 br {
    &.smallScreen {
        display: none;
    }

    &.normalScreen {
        display: inline;
    }
}

.demoContent .borderHolder, .clientContent .borderHolder, .contactContent .borderHolder {
    max-width: 1024px;
    margin: 0 auto;
    background: white;
}

.clientContent .borderHolder {
    margin-bottom: 59px;
}

a.backLink{
    text-align: right;
    position: relative;
    display: inline-block;
    padding-right: 5px;
    width: auto;
    padding-left: 22px;
    color: #002030;
    border: 1px solid #002030;
    background-color: transparent;
    text-transform: uppercase;

    &:hover{
        color: #77A3DD;
        border-color: #77A3DD;

        &:after {
            border-color: transparent #77A3DD transparent transparent;
        }
    }



    &:after {
        content: '';
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        border-color: transparent #002030 transparent transparent;
        pointer-events: none;
    }

}

a.btn {
    background: #77a3dd;
    border: 1px solid #77a3dd;
    box-sizing: border-box;
    min-width: 144px;
    width: fit-content;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.08s ease-in;
    -o-transition: 0.08s ease-in;
    -ms-transition: 0.08s ease-in;
    -moz-transition: 0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
    position: relative;
    z-index: 1;
    padding-inline: 18px;
}

a.btn.dark:hover {
    color: #002030;
}

a.btn.blue:hover {
    color: white;
}

a.btn:before {
    content: "";
    position: absolute;
    background: white;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
}

a.btn.blue:before {
    background: #002030;
}

a.btn:hover:before {
    top: 0;
}

a.btn.dark {
    background: #002030;
    color: white;
}

a.btn.small {
    width: auto;
    height: auto;
    padding: 4px 8px;
    font-size: 17px;
    line-height: 17px;
}

.white .btn.white {
    background: #002030;
    color: white;
    border: 1px solid #002030;
}

a.btn.white {
    background: white;
    color: #002030;
}


#mMenu {
    display: none;
}

#tryButton {
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -68px;
    z-index: 100;
}

#tryButton img {
    width: 66px
}

/*CONTACT FORM*/

.styledForm .cntCol {
    display: inline-block;
    width: calc(50% - 10px);
}

.styledForm .cntCol.full {
    width: calc(100% - 4px);
}

.styledForm .cntCol:nth-child(2) {
    margin-left: 10px;
}

.styledForm label {
    font-size: .75em;
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 0.5em;
}

#email2 {
    display: none;
}

.styledForm input[type=text], input[type=email], .styledForm textarea {
    border: 1px solid #69C;
    padding: 5px;
    margin: 0 0 5px;
    border-radius: 0;
    -webkit-appearance: none;
}

.styledForm input.required, .styledForm textarea.required {
    border-color: #933 !important;
    border-width: 2px !important;
}

.styledForm label.required {
    color: #933 !important;
}


.styledForm input[type=text], .styledForm input[type=email] {
    width: calc(100% - 12px);
}

.styledForm textarea {
    font-size: 18px;
    width: calc(100% - 12px);
    &::placeholder{
        color:rgba(0, 32, 48, 0.5);
    }
}

.styledForm input.err, .styledForm textarea.err {
    border-color: #c33;
}

.styledForm input[type=submit] {
    vertical-align: top;
    padding: 5px 10px;
    font-size: 18px;
    border: 1px solid #6699cc;

    background: #6699cc url('https://cdn.baseform.com/baseform.com/img/setaLogin.png') no-repeat right;
    text-align: left;
    color: white;

    width: calc(50% - 32px);
    margin-right: 4px;

    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    border-radius: 0;
    -webkit-appearance: none;
    cursor: pointer;
}

.styledForm input[type=submit]:hover {
    background-color: #002030;
}

.styledForm .cntSend {
    margin-top: 20px;
    text-align: right;
}

.styledForm #private {
    /*text-align: left;*/
    font-size: 16px;
    /*margin-top: 3px;*/
    width: 342px;
    display: inline-block;
    float: left;
    text-align: left;
}

.styledForm input, .styledForm textarea {
    font-family: Chivo, sans-serif;
}

article form .disclaimer {
    width: 47%;
    margin-right: 3%;
    vertical-align: bottom;
    display: inline-block;
    padding: 0 0 10px;
    text-align: left;
}

article form .hiddenCheckbox {
    display: none;
}

article form .checkbox {
    display: inline-block;
    cursor: pointer;
    line-height: 1.3;
    position: relative;
}

article form .checkbox span {
    width: 10px;
    height: 10px;
    border: 2px solid #002030;
    display: inline-block;
    margin-right: 5px;
    top: 2px;
    background: none;
    position: absolute;
    left: 0;
}

article form .checkbox.active span {
    background-size: 100%;
    background: url(/img/checked.svg.br) no-repeat;
}

article form input[type='checkbox'].err + label.checkbox {
    border: 2px solid #933;
}


article form .disclaimer p {
    display: inline-block;
    width: calc(50% - 25px);
    font-size: 10px;
    line-height: 1.2;
    vertical-align: top;
    margin-top: -1px;
    padding-top: 0;
}

.title .newsTitle {
    display: none;
}

.subMenuContent:not(.productNavigationBar) .grid {
    display: none;
    border-top: 1px solid rgba(119, 163, 221, 0.7);
}

.tmUl {
    width: 100%;
    color: #77A3DD;
    /*margin-top: 15px*/
}

.tmUl li {
    display: block;
}


.tmUl li:first-of-type {
    padding-left: 0;
}

.tmUl li:first-of-type:before {
    content: '';
}


article img, article iframe {
    max-width: 100%;
}

/* ===== Popup System (overlay + drawer + active state) ===== */

/* Overlay (backdrop) */
.popupOverlay {
    position: fixed;
    inset: 0; /* left:0; right:0; top:0; bottom:0; */
    background: rgba(0, 32, 48, 0.7);
    display: none;
    z-index: 10;
}

/* Drawer / Panel */
.popup {
    position: fixed;
    z-index: 12;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;                 /* start off-screen to the right */
    width: 338px;
    padding: 51px;
    background: rgba(119, 163, 221, 0.8);
    font-size: 16px;
    overflow: auto;
    transition: left 1s;

    /* Close button */
    .close {
        position: absolute;
        top: 18px;
        right: 18px;
        display: none;            /* becomes visible on small screens */
        width: 24px;
        height: 24px;
        background: url(/img/cross_white.svg.br) no-repeat center / cover;
        color: white;
        font-size: 307px;         /* irrelevant with bg image, but kept for compatibility */
        line-height: 1;
    }

    /* Title */
    .title {
        font-weight: 100;
        text-transform: uppercase;
        font-size: 30px;
        margin-bottom: 10px;
    }

    /* Privacy/link area */
    #private {
        font-size: 12px;
        margin-bottom: 10px;

        a {
            color: white;
            text-decoration: underline;
        }
    }

    /* Form */
    #cntForm {
        label {
            font-size: 12px;
            font-weight: 100;
            text-transform: uppercase;
        }

        .cntCol {
            display: inline-block;
            width: 100%;
            margin-bottom: 8px;

            &:nth-child(2) {
                margin-left: 0;
            }
        }

        .cntSend {
            margin-top: 0;
        }

        input[type=text],
        input[type=email],
        textarea {
            width: calc(100% - 2px - 16px);
            margin: 0;
            margin-top: 2px;
            padding: 8px;
            font-family: 'Chivo';
            font-weight: 100;
            font-size: .8em;
            outline: none;
            resize: vertical;
            border: 1px solid #69C;
            border-radius: 0;
            -webkit-appearance: none;

            &.err {
                border-color: #933;
                border-width: 2px;
            }
        }

        input[type=submit] {
            width: 100%;
            margin-top: 10px;
            padding: 5px;
            border: 1px solid #002030;
            background: #002030;
            color: white;
            font-family: 'Chivo';
            font-size: 16px;
            font-weight: 100;
            text-transform: uppercase;
            text-align: center;
            outline: none;
            float: none;
            border-radius: 0;
            -webkit-appearance: none;
        }

        /* Disclaimer / consent */
        .disclaimer {
            font-size: 12px;
            padding: 10px 0;

            a {
                color: white;
                text-decoration: underline;
            }

            label {
                display: inline-block;
                margin-top: -2px;
                font-family: 'Chivo';
                text-transform: none;
                font-weight: normal;
                font-size: 12px;

                br {
                    margin-bottom: 10px;
                }
            }
        }
    }

    /* Custom checkbox */
    .hiddenCheckbox {
        display: none;
    }

    .checkbox {
        display: inline-block;
        position: relative;
        cursor: pointer;
        line-height: 1.4;

        span {
            position: absolute;
            left: 0;
            top: 2px;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            background: none;
            border: 2px solid white;
        }

        &.active span {
            background: url(/img/checked_white.svg.br) no-repeat center / 100%;
        }
    }

    /* validate checkbox error (sibling selector) */
    input[type='checkbox'].err + label.checkbox {
        border: 2px solid #933;
    }
}

/* Global active state (prevents background scroll & reveals panel/overlay) */
html.popupActive {
    overflow-y: hidden;

    .popupOverlay {
        display: block;
    }

    .popup {
        left: calc(100% - 440px); /* slide in (drawer width + padding) */
    }
}


.white .mainContent.section .grid article:has(p[dir='ltr']) p:nth-last-child(-n + 2){
    width: calc(33.3% + 13px);
    display: inline-block;
    .name{
        font-weight: 700;
        font-size:14px;
        display: inline-block;
        vertical-align: middle;
        margin: 5px 0;
    }

    .position{
        font-size:12px;
        display: block;
        line-height: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 300;
    }
}


@media (max-width: 1023px) {
    .responsiveTm {
        display: block;

        .tmUl {
            li {

                /*    :before {*/
                /*        content: '|';*/
                /*        position: absolute;*/
                /*        left: 0;*/
                /*        top: 0;*/
                /*    }*/
                /*}*/
            }

        }
    }

    .mapBlockGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .section .grid {
        padding-inline: 30px;
    }
    body:has(.subMenuContent.section) .headContent--height, .headContent--height {
        height: 60px;
    }

    .headContent.section {
        padding-bottom: 0;
        height: 60px;

        & .grid {
            width: 100%; /* fill the header row: hamburger + logo left, buttons right */
            align-items: center;
            flex-direction: row-reverse;
            flex: 1;
            min-height: 0;

            .buttonGroup {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-top: 0;
                gap: 12px;
            }

            #top {
                position: static;
                gap: 12px;
                flex-direction: row;
                align-items: start;

                #mainMenu {
                    display: none;
                }

                .logo {
                    width: 138px;
                    height: 32px;
                }

                #hamburger-icon {
                    display: block;
                    width: 32px;
                    height: 24px;
                    transform: rotate(0deg);
                    transition: 0.5s ease-in-out;
                    cursor: pointer;
                    z-index: 1001;

                    span {
                        display: block;
                        position: absolute;
                        height: 4px;
                        width: 100%;
                        background: #77a3dd;
                        border-radius: 4.5px;
                        opacity: 1;
                        left: 0;
                        transform: rotate(0deg);
                        transition: 0.25s ease-in-out;

                        &:nth-child(1) {
                            top: 0px;
                        }

                        &:nth-child(2),
                        &:nth-child(3) {
                            top: 10px;
                        }

                        &:nth-child(4) {
                            top: 20px;
                        }
                    }

                    &.open {
                        span {
                            &:nth-child(1) {
                                top: 9px;
                                width: 0%;
                                left: 50%;
                            }

                            &:nth-child(2) {
                                transform: rotate(45deg);
                            }

                            &:nth-child(3) {
                                transform: rotate(-45deg);
                            }

                            &:nth-child(4) {
                                top: 9px;
                                width: 0%;
                                left: 50%;
                            }
                        }
                    }
                }

                #menu-overlay {
                    position: fixed;
                    inset: 0;
                    background: #002030;
                    color: #ffffff;
                    display: none;
                    z-index: 1000;
                    padding: 60px 24px 32px;
                    overflow: auto;

                    &.visible {
                        display: block;
                    }

                    .buttonGroup {
                        position: absolute;
                        top: 18px;
                        right: 30px;
                        .btnJobs{
                            display: none;
                        }
                        .customSelect {
                            z-index: 1002;
                            display: none;
                            border-color: #ffffff;

                            .selectTitle{
                                color: #ffffff;
                                background-color: #002030;
                            }

                            .selectPopup {
                                top: 22px;
                                color: #ffffff;
                                background-color: #002030;
                                border-color: #ffffff;

                                li{
                                    border-top-color: #ffffff;
                                }
                            }
                            .icon{
                                border-top-color: #ffffff;
                            }
                        }
                    }

                    .menu-col {
                        max-width: 720px;
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;
                        gap: 2rem;
                        align-items: center;

                        .mapBlock {
                            width: 100%;

                            ul {
                                list-style: none;
                                margin: 0;
                                padding: 0;

                                .l1 {
                                    /* top-level "category" link (acts as heading) */

                                    a {
                                        color: #ffffff;
                                        text-decoration: none;
                                        font-weight: 800;
                                        text-transform: uppercase;
                                        letter-spacing: 0.04em;
                                    }

                                    margin-bottom: 0.75rem;
                                }

                                .l2 {
                                    /* child links */

                                    a {
                                        color: #77A3DD;
                                        text-decoration: none;
                                        font-size: 1.125rem;
                                        line-height: 1.4;
                                        transition: color 180ms ease;

                                        &:hover,
                                        &:focus-visible {
                                            color: white;
                                            outline: none;
                                        }
                                    }
                                }

                                .l2 + .l2 {
                                    margin-top: 0.35rem;
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    .mapBlockGrid {
        /*grid-template-columns: 1fr;*/
        /*gap: 25px;*/
        display: none;
    }

    .mapBlock.tm a {
        display: inline-block;
        font-size: 1em;
    }


    .responsiveTm {
        display: block;
        margin-left: 0 !important;
    }

    article form .disclaimer {
        padding: 31px 0;
        width: 100%;
    }

    article .styledForm .checkbox {
        position: relative;
        padding-left: 31px;
    }

    article .styledForm span {
        width: 15px;
        height: 15px;
        position: absolute;
        left: 0;
    }

    article:not(:has( div.appsInfoHolder)) {
        width: 100%;
        margin-left: 0;
    }

    #menu {
        position: absolute;
    }

    #menu ~ article  {
        margin-top: 48px;
    }

    .subMenuContent:not(.productNavigationBar) .grid {
        display: none;
    }

    /* CONTACT FORM */
    .styledForm .cntCol {
        display: block;
        width: 100%;
    }

    .styledForm .cntCol:nth-child(2) {
        margin-left: 0;
    }

    .styledForm input[type=submit] {
        float: none;
        margin-right: 0;
        width: calc(100% - 22px);
    }

    .team .member {
        width: 100%;
        height: 100%;
    }

    .team {
        font-size: 31px;
    }

    article img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    article iframe {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .subMenuContent:not(.productNavigationBar) {
        right: 0;
        display: none;
        position: fixed;
        top: 61px;
        left: 0;
        background: rgba(255, 255, 255, .9);
        z-index: 2;
    }

    .mainContent .menu {
        display: none;
    }

    article {
        margin-left: 0;
        order: 3;
    }

    .menu {
        display: block;
        width: 100%;
        position: relative;
        height: auto;
        float: none;
        text-align: center;
        padding: 8px 0;
    }

    .menu li.l1 {
        font-weight: 100;
        font-size: 15px;
        padding: 0 14px 0 0;
        display: inline-block;
    }

    .menu li.l2 {
        font-size: 23px;
    }


    article h2.lead {
        margin-bottom: 8px;
    }

    #map {
        margin: 0 30px;
        padding-bottom: 46px;
    }

    .mapBlock.tm {
        width: 100%;
        color: #002030;
    }

    .mapBlock.tm .trademark {
        font-size: 1em;
    }

    .white .mapBlock.tm a {
        color: #002030;
    }

    .mapBlock.tm br {
        display: none;
    }

    .mapBlock:not(.tm) {
        width: 25%;
        margin-left: 0;
    }


    .bannerContent .title h1 br {
        &.normalScreen {
            display: none;
        }

        &.smallScreen {
            display: inline;
        }
    }


    .customSelect .selectTitle {
        /*line-height: 18px;*/
    }

    .customSelect:after {
        top: 7px;
    }

    #mainMenu {
        font-size: 15px;
    }

    .headContent.soloLogo {
        display: block;
    }

    #top {
        margin: 0;
        padding-block: 13px 8px;
        text-align: center;
    }


    .headContent .login {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-top: -10px;
    }


    #top #mainMenu {
        /*width: 100%;*/
        /*display: block;*/
        /*top: -4px;*/
        /*text-align: center;*/
        /*padding-left: 0;*/
        /*transform: none;*/
    }

    .statsContent .grid div.homeDataWrapper {
        ul {
            padding-block: 25px;
            flex-direction: column;
            gap: 24px;
            align-items: center;
            justify-content: space-between;


        }
    }

    .infoContent .grid div.homeDataWrapper {
        ul {
            flex-direction: column;
            padding-block: 30px;
        }
    }


    .popup {
        width: calc(100% - 102px) !important;

        .close {
            display: block;
        }

        /* Submit button inside popup at this breakpoint */

        #cntForm {
            input[type=submit] {
                font-size: 18px !important;
                line-height: 42px;
            }
        }
    }

    html.popupActive .popup {
        left: 0 !important; /* full slide-in on mobile */
    }
}


@media (max-width: 500px) {
    .section .grid {
        padding-inline: 30px;
    }

    .workforceContent.section .sectionTitle {
        font-size: 34px;
    }

    .workforceContent.section ul.itemList li.item .itemTitle {
        font-size: 20px;
    }

    .workforceContent.section ul.itemList li.item .itemDes {
        font-size: inherit;
    }

    .menu li.l1 {
        font-size: 15px;
    }



    .useCasesHolder .useCases {
        grid-template-columns: repeat(1, 1fr);
    }

    body:has(.subMenuContent.section) .headContent--height, .headContent--height {
        height: 60px;
    }

    .headContent.section {
        .grid {
            .buttonGroup {
                .customSelect, .btnJobs {
                    display: none;
                }
            }
            #top {
                #menu-overlay {
                    .buttonGroup .customSelect {
                        display: block;
                    }

                    .buttonGroup .btnJobs {
                        display: inline-block;
                    }

                    .menu-col {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 1rem;
                        align-items: center;
                    }
                }
            }
        }
    }

    .productNavigationBar {
        display: none;
    }

    .mapBlock.tm .trademark {
        margin-top: 15px;
    }
}



/* hamburger on light-theme pages (yellow/white); stays light blue on the dark home and over the open (dark) menu */
html:not(.dark) .headContent.section .grid #top #hamburger-icon:not(.open) span {
    background: #002030;
}

/* ===== Contact forms: what keyboard and screen reader users need, in the site's own look =====
   ContactForm (js/contact-form.js) adds the class "dpForm" to every form it takes care of: the popup, the forms in
   the articles (contact, subscribe, ...) and the job application. The look itself is the one of the rules above and of
   home.css: this only adds the new parts, in the palette (white, navy, amber) and with square corners. */

/* --- the popup drawer --- */

/* closed, the drawer is only out of sight: take it out of the tab order and away from screen readers too */
html:not(.popupActive) .popup {
    visibility: hidden;
    transition: left 1s, visibility 0s 1s;
}

html.popupActive .popup {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    html .popup {
        transition: none !important;
    }
}

/* the close button is a real button and is shown on every screen, so that the keyboard can reach it too */
html .popup button.close {
    display: block;
    padding: 0;
    border: 0;
    cursor: pointer;
    font-size: 0;
}

html .popup .title:focus {
    outline: none;
}

/* --- every form --- */

html form.dpForm .cntCol,
html .popup #cntForm.dpForm .cntCol {
    position: relative;
}

/* where the focus is: a thin ring (navy on the pages, white in the popup and on dark pages) */
html form.dpForm :focus-visible {
    outline: 2px solid #002030;
    outline-offset: 2px;
}

html.dark form.dpForm :focus-visible,
html .popup a:focus-visible,
html .popup button:focus-visible,
html .popup #cntForm input:focus-visible,
html .popup #cntForm textarea:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

html form.dpForm .dpNote,
html .popup #cntForm.dpForm .dpNote {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
}

/* A mistake is said in words and the field is outlined in amber (palette), without moving anything:
   the outline is a shadow (the border keeps its width) and the message is a small tag on the label line. */
html form.dpForm input[type].err,
html form.dpForm textarea.err {
    border: 1px solid #002030;
    box-shadow: 0 0 0 1px #002030;
}

html form.dpForm input[type=file].err {
    outline: 2px solid #002030;
    box-shadow: none;
}

/* amber is for the blue of the popup and for dark pages; on white and yellow pages it would not be seen */
html.dark form.dpForm input[type].err,
html.dark form.dpForm textarea.err,
html .popup #cntForm input[type].err,
html .popup #cntForm textarea.err {
    border: 1px solid #ffbb33;
    box-shadow: 0 0 0 1px #ffbb33;
}

html .dpForm .dpErr,
html .popup .dpErr {
    position: absolute;
    top: -1px;
    right: 0;
    margin: 0;
    padding: 1px 6px;
    background: #002030;
    color: #ffbb33;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    pointer-events: none;
}

html .dpForm .dpErr::before,
html .popup .dpErr::before {
    content: "!";
    margin-right: 5px;
    font-weight: 700;
}

/* what went wrong with the whole form: next to the button, where the eyes are after pressing it */
html .dpForm .dpAlert:not(:empty),
html .popup .dpAlert:not(:empty) {
    margin: 0 0 8px;
    text-align: left;
    padding: 5px 8px;
    background: #002030;
    color: #ffbb33;
    font-size: 12px;
    line-height: 1.4;
}

html .dpForm .dpAlert:not(:empty)::before,
html .popup .dpAlert:not(:empty)::before {
    content: "!";
    margin-right: 6px;
    font-weight: 700;
}

html .dpForm .dpStatus,
html .popup .dpStatus {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
}

html .dpForm .dpStatus:empty,
html .popup .dpStatus:empty {
    display: none;
}

/* the consent is a sentence above the button: small, like the rest of the fine print */
article form.dpForm .disclaimer,
html form.dpForm .disclaimer,
html .popup #cntForm.dpForm .disclaimer {
    display: block;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
}

article form.dpForm .disclaimer p.dpConsent,
html form.dpForm .disclaimer p.dpConsent,
html .popup #cntForm.dpForm .dpConsent {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
}

html form.dpForm .dpConsent a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* the thank you, in place of a form of the page */
html .dpDone h3 {
    margin: 0 0 8px;
    font-size: 1.6em;
    font-weight: 300;
    outline: none;
}

html .dpDone p {
    margin: 0 0 16px;
    line-height: 1.4;
}

/* ... and in the popup */
html .popup .dpDone h3 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 100;
    text-transform: uppercase;
}

html .popup .dpDone p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.4;
}

html .popup .dpBtn {
    width: 100%;
    padding: 5px;
    border: 1px solid #002030;
    border-radius: 0;
    background: #002030;
    color: #fff;
    font-family: 'Chivo';
    font-size: 15px;
    font-weight: 100;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
}

/* for screen readers only */
html em.dpSr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* on touch screens 16px keeps the browser from zooming into the page when a field is tapped */
@media (pointer: coarse) {
    html form.dpForm input[type=text],
    html form.dpForm input[type=email],
    html form.dpForm textarea,
    html .popup #cntForm input[type=text],
    html .popup #cntForm input[type=email],
    html .popup #cntForm textarea {
        font-size: 16px;
    }
}

/* what the server says about the job application (the page is reloaded with the answer) */
html .submissionError {
    margin: 20px 0;
    padding: 8px 12px;
    background: #002030;
    color: #ffbb33;
    font-size: 14px;
    line-height: 1.4;
}

html .submissionError::before {
    content: "!";
    margin-right: 8px;
    font-weight: 700;
}

html .submissionDone {
    margin: 20px 0;
    color: #002030;
    font-size: 1.4em;
    outline: none;
}

/* ===== Readability: from the audit of the localized pages (weights, leading, long words) =====
   One block, easy to find and to take back. The look is the same, only what was hard to read is easier. */

/* Chivo Thin (100, and 200 which is shown as 100: there is no such file) is a display weight. Under 20px it is hard to
   read, above all on dark and blue backgrounds: Light (300) keeps the look and can be read. */
html body .newsBlock .date,
html body .newsBody .date,
html body .newsBody .country,
html body article .date,
html body .section ul.itemList li.item .itemDes,
html body .section.useCasesContent ul.itemList li.item .case,
html body .mapBlock .l2 a,
html.dark body .mapBlock .l2 a,
html body .useCasesHolder .useCases .useCase .description {
    font-weight: 300;
}

/* a button is read, not looked at */
html body .btn.openPopup {
    font-weight: 400;
}

/* Lines of text set solid (line-height 1) touch each other when a translation needs two or three lines: a little air */
html body .section .sectionTitle,
html body .dataContent .title .quote,
html body .dataContent .title .question {
    line-height: 1.1;
}

html body .infoContent li.item {
    line-height: 1.15;
}

html body article h1 {
    line-height: 1.2;
}

/* a long word or address (licences, links) must not make the page scroll sideways on a phone:
   "anywhere" also lets a flex item (the article) become narrower than such a word */
html body article {
    overflow-wrap: anywhere;
}

/* titles that wrap, wrap in balanced lines (a long translation does not leave one word alone) */
html body .itemTitle,
html body .section .sectionTitle,
html body .newsBlock .title,
html body article h1 {
    text-wrap: balance;
}