:root {
    --sweetspot-active-bg-color: #EFEFEF;
    --sweetspot-yellow-gradient: linear-gradient(142.74deg, #FFB648 -4.68%, #FECD1E 110.46%);
    --sweetspot-blue-gradient: linear-gradient(142.74deg, #216DB8 -4.68%, #60A6EC 110.46%);
    --sweetspot-pink-gradient: linear-gradient(142.74deg, #EA136D -4.68%, #F590BA 110.46%);
}

.sweetspot {
    background-image: url("https://img-6aa0.kxcdn.com/sweetspot/bg_top.png"),
    url("https://img-6aa0.kxcdn.com/sweetspot/bg_legends.png"),
    url("https://img-6aa0.kxcdn.com/sweetspot/bg_philanthropy.png"),
    url("https://img-6aa0.kxcdn.com/sweetspot/bg_equality.png"),
    url("https://img-6aa0.kxcdn.com/sweetspot/bg_family.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center -70px, center 1465px, center 4400px, center 6790px, center 8420px;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.04em;
    color: #474747;
}

body.lang-fr .sweetspot {
    background-position: center -70px, center 1575px, center 4570px, center 7120px, center 8760px;
}

body.lang-de .sweetspot {
    background-position: center -70px, center 1585px, center 4550px, center 7150px, center 8860px;
}

body.lang-de .sweetspot .td.big {
    width: 180px;
}

.hero-section {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 600px;
}

.hero-section__product-description {
    padding-top: 100px;
    padding-right: 40px;
}

.hero-section__product-title {
    margin-top: 40px;
    margin-bottom: 32px;
    font-weight: bold;
    font-size: 70px;
    line-height: 82px;
    color: #FFF;
}

.hero-section__text-content {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.04em;
}

.hero-section__image-container {
    display: flex;
    justify-content: center;
}

.hero-section__image {
    width: 100%;
    max-height: 480px;
}

.content-section {
}

.sweetspot__content-section-1 {
    padding-top: 32px;
    padding-bottom: 60px;
}

.sweetspot__content-section-2 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.sweetspot__content-section-3 {
    padding-top: 60px;
}

.sweetspot__content-section-4 {
    padding-top: 60px;
}

.content-section__headline {
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: bold;
    line-height: 40px;
    letter-spacing: 0.02em;
}

.content-section__headline--center {
    text-align: center;
}

.content-section__sub-headline {
    font-weight: bold;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.03em;
    text-transform: none;
    margin-bottom: 32px;
}

.footer__sub-headline {
    margin-bottom: 10px;
}

.content-section__text-content {
}

.content-section__cites-list {
    margin-bottom: 16px;
    list-style: initial;
}

.content-section__cite {
    font-style: normal;
}

.sweetspot__language-selector {
    position: absolute;
    top: 45px;
}

.language-selector__list {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
}

.language-selector__item {
    margin: 0;
    padding: 0 8px;
    border-right: 1px solid #474747;
}

.language-selector__item--last {
    border-right: none;
}

a.language-selector__link, a.language-selector__link:link {
    color: #474747;
}

a.language-selector__link--active, a.language-selector__link--active:link {
    color: #FFF;
}

.legends {
    margin-top: 132px;
}

.footer__legend {
    margin-top: 130px;
}

.footer__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, 1fr);
    gap: 10px 0;
    justify-content: center;
    list-style: none;
    margin-top: 120px;
}

.legends__card {
    padding: 10px;
    list-style: none;
    background: #FFF;
    box-shadow: 1px 16px 7px -14px rgba(0, 0, 0, 0.15), 0 15px 30px -2px rgba(0, 0, 0, 0.07);
    border-radius: 14px;
}

.legends__title {
    text-transform: capitalize;
    line-height: 40px;
    font-size: 28px;
    margin: 0 0 16px 0;
}

.legends__list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, 1fr);
    gap: 16px 0;
}

.legends__category {
    text-align: center;
    text-transform: capitalize;
    margin: 129px 0 32px;
}

.legends__item {
    display: grid;
    align-items: center;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    -ms-grid-columns: 32px 1fr;
    grid-template-columns: 32px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.legends__item--scrollable-mobile {
    grid-auto-columns: auto 1fr;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
}
.legends__item--aside {
    cursor: pointer;
    padding: 5px 0;
    width: unset;
    grid-template-columns: auto 1fr;
    gap: 8px;
}

.legends__item--selected {
    box-shadow: 0px 0px 16px 2px rgb(0 0 0 / 10%);
    border-radius: 30px;
    padding-left: 20px;
    transition: all 0.3s ease-in-out;
}

.table__icon-container {
    width: 24px;
    height: 24px;
}

.legends__icon-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    border-radius: 7px;
    background-color: rgb(241, 241, 241)
}

.legends__icon-badge--aside {
    height: 24px;
    width: 24px;
}

.legends__description-container {
    padding-top: 30px;
}

.legends__description-container--refugee-burden {
    font-size: 13px;
}

.footer__icon-badge {
    width: 88px;
    height: 88px;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 1px 16px 7px -14px rgba(0, 0, 0, 0.15), 0px 15px 30px -2px rgba(0, 0, 0, 0.07);
}

.table__icon-container svg {
    width: 100%;
    height: auto;
}

.legends__icon-badge--philanthropy, .table-section .footer__icon-badge--philanthropy {
    background: var(--sweetspot-yellow-gradient);
}

.legends__icon-badge--equality, .table-section .footer__icon-badge--equality {
    background: var(--sweetspot-blue-gradient);
}

.legends__icon-badge--family, .table-section .footer__icon-badge--family {
    background: var(--sweetspot-pink-gradient);
}

.legends__icon-badge path, .legends__icon-badge rect, .table__icon-container path, .table__icon-container rect {
    fill: #fff;
}

.legends__item--philanthropy path, .legends__item--philanthropy rect {
    fill: #FFB648;
}
.legends__item--equality path, .legends__item--equality rect {
    fill: #216DB8;
}
.legends__item--family path, .legends__item--family rect {
    fill: #EA136D;
}

.table-header .legends__icon-container--active path, .table-header .legends__icon-container--active rect {
    fill: #474747;
}

.legends__sort-container {
    width: 16px;
    height: 16px;
    color: #FFF;
}

.arrow--active {
    color: #474747;
}

.footer__item {
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-column-gap: 34px;
    grid-template-rows: auto;
    align-items: start;
    margin-bottom: 20px;
}

.legends__description {
    margin: 0;
    padding-left: 16px;
    text-transform: none;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.04em;
}

.legends__description--scrollable-mobile {
    padding-left: 0;
}

.legends__description--aside {
    text-align: left;
    padding: 0;
}

.content-section__image {
    position: absolute;
    height: auto;
}

.content-section__image--country {
    width: 160px;
    bottom: -180px;
    left: 0;
}

.content-section__image--elderly {
    width: 300px;
    bottom: -100px;
    right: 60px;
}

.table-section {
    background-color: #FFFFFF;
    box-shadow: 1px 16px 7px -14px rgba(0, 0, 0, 0.15), 0 15px 30px -2px rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    padding: 16px;
    height: min(max(570px, calc(100vh - 72px)), 860px);
}

.wrapper-table {
    height: 100%;
    overflow: scroll;
}

.table .nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 72px;
    list-style: none;
    background-color: var(--sweetspot-active-bg-color);
}

.bottom {
    justify-self: flex-end;
}

.table-top-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    padding-right: 112px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    color: #fff;
    font-weight: 400;
}

.table-tag {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 360px;
    height: 60px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #caadf5;
    border: 1px solid #FFF;
}

.table-tag.philanthropy {
    background-color: #FFB648;
}

.table-tag.equality {
    width: 300px;
    background-color: #216DB8;
}

.table-tag.family {
    width: 180px;
    background-color: #EA136D;
}

.table-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 50px;
    background-color: var(--sweetspot-active-bg-color);
    color: #474747;
    font-weight: 400;
    transition: top 1s ease;
}

.legend__hover-description {
    opacity: 0;
    min-width: 40px;
    color: white;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.2);
    position: absolute;
    top: 60px;
    z-index: 2;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.legend__hover-description--philanthropy {
    background: var(--sweetspot-yellow-gradient);
}

.legend__hover-description--equality {
    background: var(--sweetspot-blue-gradient);
}

.legend__hover-description--family {
    background: var(--sweetspot-pink-gradient);
}


.table-row .td:hover:not(.no-hover) .legend__hover-description {
    opacity: 1;
}

.table-row {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.table-header .table-row {
    height: 50px;
}


.table-row.bg-odd {
    background-color: #F5F5F5;
}

.table-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.td {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 60px;
    padding: 8px 1px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #FFF;
}

.td--total {
    font-weight: 600;
    width: unset;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.td--philanthropy {
    background: var(--sweetspot-yellow-gradient);
}

.td--equality {
    background: var(--sweetspot-blue-gradient);
}

.td--family {
    background: var(--sweetspot-pink-gradient);
}

.col-active {
    background-color: lavender;
    color: #474747;
}

.td.small {
    width: 40px;
    padding-right: 0px;
    padding-left: 0px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.td.big {
    padding: 5px 8px;
    width: 170px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: start;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: -webkit-left;
    text-align: -moz-left;
    text-align: left;
}

.table-header .td.big {
    align-items: center;
}

.text-bold {
    font-weight: 600;
}

.btn	{
    text-transform: uppercase !important;
    display: inline-block;
    font-weight: bold;
    padding: 11px 24px 10px;
    transition: none;
    color: #fff !important;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
    background: linear-gradient(149deg, #fecd1e, rgb(255, 72, 149));
    text-align: center;
    margin-top: 20px;
    line-height: 1;
    min-height: 40px;
    font-size:15px;
    border: none;
    cursor: pointer;
    align-self: center;
}

.btn:hover {
    transition: none;
    background: #e54085;
}

.hidden-table {
    display: none;
}

@media only screen and (min-width: 1920px){
    .sweetspot {
        background-size: 100% 767px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sweetspot {
        background-position: center -70px, center 1585px, center 4570px, center 7220px, center 8930px;
    }
    body.lang-fr .sweetspot {
        background-position: center -70px, center 1695px, center 4780px, center 7650px, center 9450px;
    }
    body.lang-de .sweetspot {
        background-position: center -70px, center 1775px, center 4890px, center 7700px, center 9500px;
    }
    .hero-section__product-title {
        font-size: 60px;
    }
    .content-section__image--elderly {
        right: 35px;
    }
    .td {
        width: 40px;
        font-size: 12px;
    }
    .td--total {
        width: unset;
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
    .td.small {
        width: 30px;
    }
    .table-tag {
        width: 240px;
    }
    .table-tag.equality {
        width: 200px;
    }
    .table-tag.family {
        width: 120px;
    }

}

@media only screen and (min-width: 320px) and (max-width: 360px){
    .td {
        width: 40px;
        font-size: 12px;
    }
    .td--total {
        width: unset;
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
    .td.small {
        width: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 991px) {
    a.language-selector__link--active, a.language-selector__link--active:link {
        color: #474747;
        font-weight: bold;
    }
    .hero-section__product-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 32px;
        line-height: 32px;
        color: #474747;
    }
    .content-section__headline {
        font-size: 24px;
        line-height: 32px;
    }
    .sweetspot__content-section-1 {
        padding-bottom: 32px;
    }
    .hero-section {
        padding-top: 20px;
    }
    .legends__mobile-container {
        height: 320px;
        -ms-overflow-y: scroll;
        overflow-y: scroll;
    }
    .legends__item--selected {
        background-color: var(--sweetspot-active-bg-color);
        border-radius: 5px;
    }
    .legends__item--selected .legends__icon-badge--selected {
        background-color: var(--sweetspot-active-bg-color);
    }
    .legends__card .legends__item--selected path, .legends__card .legends__item--selected rect {
        fill: white;
    }
    .sweetspot__content-section-3 {
        padding-top: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sweetspot {
        background-position: center 0, center 1695px, center 4590px, center 7080px, center 8710px;
        background-size: 210%, 150%, 150%, 150%, 150%;
    }
    body.lang-fr .sweetspot {
        background-position: center 0, center 1805px, center 4770px, center 7370px, center 9050px;
    }
    body.lang-de .sweetspot {
        background-position: center 0, center 1905px, center 4900px, center 7600px, center 9310px;
    }
    .content-section__image--elderly {
        width: 230px;
        bottom: 310px;
        right: 30px;
    }
    .legends__card {
        margin-bottom: 32px;
        height: unset;
    }
}

@media only screen and (max-width: 767px) {
    .sweetspot {
        background-position: center 0, center 2460px, center 5800px, center 9520px, center 11650px;
        background-size: 330%;
    }
    body.lang-fr .sweetspot {
        background-position: center 0, center 2735px, center 6240px, center 10500px, center 12880px;
    }
    body.lang-de .sweetspot {
        background-position: center 0, center 2940px, center 6490px, center 10950px, center 13490px;
    }

    .legends__card {
        margin-bottom: 32px;
        height: unset;
    }
    .footer__grid {
        padding-left: 0;
    }
    .footer__item {
        grid-template-columns: 58px 1fr;
        grid-column-gap: 20px;
    }
    .footer__icon-badge {
        width: 58px;
        height: 58px;
    }
    .legends__description-container {
        padding-top: 15px;
    }
}
@media only screen and (max-width: 380px) {
    .sweetspot {
        background-position: center 0, center 2595px, center 5930px, center 9950px, center 12240px;
        background-size: 330%;
    }
    body.lang-fr .sweetspot {
        background-position: center 0, center 2915px, center 6440px, center 11110px, center 13650px;
    }
    body.lang-de .sweetspot {
        background-position: center 0, center 3155px, center 6730px, center 11600px, center 14340px;
    }
}