html {
    font-family: "Poppins";
}

body, div#body {
    min-height: 100vh;
}

div#body {
    display: table;
    width: 100%;
}

#associado-fixed {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 10px;
    padding-left: 50px;
    background: #bdd748;
    color: white;
    z-index: 99;
    font-size: 12px;
}

#associado-fixed:before {
    content: "";
    position: absolute;
    background-color: white;
    width: 26px;
    height: 22px;
    top: 7px;
    left: 10px;
}

#associado-fixed:after {
    content: "";
    position: absolute;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 50%,
        white 50%,
        white 100%
    );
    width: 7px;
    height: 11px;
    top: 27px;
    left: 25px;
}

img#logo {
    width: 150px;
}

div#socials {
    position: absolute;
    top: 150px;
    right: 50px;
    z-index: 10;
}

div#socials a {
    display: block;
}

div#socials img {
    width: 30px;
    margin: 5px;
}

div#navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px calc(50% - 600px);
    align-items: center;
    position: relative;
    z-index: 2;
}

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

#menu-ham {
    display: none;
    font-size: 26px;
    font-weight: 700;
}

#navbar li {
    list-style-type: none;
    display: inline-block;
    font-size: 12px;
    color: rgb(132, 134, 137);
}

#navbar li:last-child {
    color: white;
    background-color: #bdd748;
    padding: 5px;
    padding-left: 30px;
    position: relative;
}

#navbar li:last-child:before {
    content: "";
    position: absolute;
    background-color: white;
    width: 16px;
    height: 12px;
    top: 7px;
    left: 7px;
}

#navbar li:last-child:after {
    content: "";
    position: absolute;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 50%,
        white 50%,
        white 100%
    );
    width: 7px;
    height: 11px;
    top: 15px;
    left: 13px;
}

#navbar li + li {
    margin-left: 30px;
}

#navbar li:not(:last-child).active {
    color: black;
    border-bottom: 2px solid #bdd748;
}

#banner {
    position: relative;
}

#banner > .banner {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s;
}

#banner > .banner.visible {
    opacity: 1;
    z-index: 1;
    position: relative;
}

#banner,
.banner,
.banner img {
    width: 100%;
    display: block;
}

.banner-text-box {
    position: absolute;
    top: 0;
    left: max(0px, calc(50% - 600px));
    max-width: 500px;
}

.banner a {
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
}

.banner a:before {
    content: "";
    position: absolute;
    left: calc(100% + 20px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 33px;
    border-radius: 2px;
    height: 0px;
    top: 7px;
}

.banner a:after {
    content: "";
    position: absolute;
    left: calc(100% + 50px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 2px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transform: rotate(135deg);
    transform-origin: 0;
    top: -2px;
}

.banner p {
    /* font-weight: bold; */
    margin: 0;
}

.banner-title {
    font-size: 92px;
    line-height: 92px;
}

.banner-text {
    font-size: 22px;
}

#banner-markers {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.banner-marker {
    width: 20px;
    height: 20px;
    background-color: rgb(192, 197, 196);
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.5s;
}

.banner-marker.active {
    background-color: #bdd748;
}

#services-home {
    background-color: rgb(235, 239, 237);
    padding: 50px calc(50% - 600px);
    display: flex;
    justify-content: space-between;
}

#services-header {
    padding-right: 50px;
}

#services-title {
    font-size: 26px;
}

#services-descr {
    margin-bottom: 50px;
    font-size: 14px;
    line-height: 2em;
}

.homeServiceButton {
    width: 35px;
    height: 35px;
    display: inline-block;
    background-color: rgb(192, 197, 196);
    vertical-align: middle;
    position: relative;
}

.homeServiceButton.active {
    background-color: #bdd748;
    cursor: pointer;
}

.homeServiceButton:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-color: transparent;
    border-left-color: white;
    border-top-color: white;
}

#prevService:after {
    top: 50%;
    left: 50%;
    transform: translate(-12%, -50%) rotate(-45deg);
}

#nextService:after {
    top: 50%;
    left: 50%;
    transform: translate(-62%, -50%) rotate(135deg);
}

#currentService {
    display: inline-block;
    margin: 0;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
}

#nextService {
    margin-left: 20px;
    margin-right: 30px;
}

#services-list {
    white-space: nowrap;
    overflow: clip;
    flex: 0 0 810px;
    max-width: 810px;
}

.homeServiceButton,
#currentService {
    user-select: none;
}

.service {
    display: inline-block;
    background-color: white;
    margin: 10px;
    padding: 20px;
    width: 250px;
    vertical-align: top;
    text-align: center;
    white-space: normal;
    position: relative;
    left: 0px;
    transition: left 0.5s, border-color 0.2s;
    border: 1px solid white;
    z-index: 2;
}

.service:hover {
    border-color: #bdd748;
}

.service-title {
    font-size: 20px;
    margin-top: 0;
}

.service-text {
    font-size: 12px;
    font-weight: 200;
}

.service a {
    font-size: 10px;
    margin-top: 50px;
    display: inline-block;
    border-bottom: 1px solid #bdd748;
}

.service > img {
    max-width: 100px;
}

#juntos {
    border-top: 2px solid #bdd748;
    border-bottom: 2px solid #bdd748;
    display: flex;
    justify-content: space-between;
    padding: 50px calc(50% - 600px);
}

#juntos > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 20px;
}

#juntos p {
    font-size: 56px;
    line-height: 1.5em;
    margin: 0;
}

#juntos a {
    font-size: 12px;
    margin-top: 20px;
    position: relative;
}

#juntos a:after {
    content: "";
    position: absolute;
    left: 104px;
    border-color: #bdd748;
    border-width: 2px 0px 0px 2px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transform: rotate(135deg);
    transform-origin: 0;
    top: 1.5px;
}

#juntos a:before {
    content: "";
    position: absolute;
    left: 80px;
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 25px;
    border-radius: 2px;
    height: 0px;
    top: 9px;
}

#juntos > div:last-child {
    flex: 0 0 700px;
    font-size: 0;
    margin: auto;
}

#juntos > div:last-child > img {
    width: 30%;
    vertical-align: top;
}

#juntos > div:last-child > img + img {
    margin-left: 5%;
}

@property --counter_anos {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@property --counter_protocolos {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@property --counter_cartoes {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@property --counter_formandos {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

#anos p.counter {
    transition: --counter_anos 2s;
    counter-set: counter_anos var(--counter_anos);
}

#protocolos p.counter {
    transition: --counter_protocolos 2s;
    counter-set: counter_protocolos var(--counter_protocolos);
}

#cartoes p.counter {
    transition: --counter_cartoes 2s;
    counter-set: counter_cartoes var(--counter_cartoes);
}

#formandos p.counter {
    transition: --counter_formandos 2s;
    counter-set: counter_formandos var(--counter_formandos);
}

#anos p.counter:after {
    content: counter(counter_anos);
}

#protocolos p.counter:after {
    content: counter(counter_protocolos);
}

#cartoes p.counter:after {
    content: counter(counter_cartoes);
}

#formandos p.counter:after {
    content: counter(counter_formandos);
}

#anos p.counter.visible {
    --counter_anos: var(--data-content);
    /* --counter_anos: attr(data-content number); */
    /* --counter_anos: 124; */
}

#protocolos p.counter.visible {
    --counter_protocolos: var(--data-content);
    /* --counter_protocolos: attr(data-content number); */
    /* --counter_protocolos: 29; */
}

#cartoes p.counter.visible {
    --counter_cartoes: var(--data-content);
    /* --counter_cartoes: attr(data-content number); */
    /* --counter_cartoes: 15000; */
}

#formandos p.counter.visible {
    --counter_formandos: var(--data-content);
    /* --counter_formandos: attr(data-content number); */
    /* --counter_formandos: 10000; */
}

#counters {
    padding: 50px calc(50% - 450px);
    display: flex;
    justify-content: space-between;
    text-align: center;
}

#counters > div {
    flex: 0 0 150px;
}

#counters p:not(:last-child) {
    font-size: 52px;
    font-weight: 100;
    margin: 0;
    line-height: 1em;
}

#counters p:last-child {
    font-size: 16px;
    border-top: 2px solid #bdd748;
    margin: 0;
    padding-top: 10px;
    margin-top: 10px;
}

#counters > div > img {
    height: 100px;
    padding-bottom: 20px;
}

#noticias {
    padding: 50px calc(50% - 450px);
    background-color: rgb(235, 239, 237);
    background-image: url("../storage/images/corner.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#noticias > a {
    font-size: 12px;
    position: relative;
}

#noticias > a:before {
    content: "";
    position: absolute;
    left: calc(100% + 10px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 25px;
    border-radius: 2px;
    height: 0px;
    top: 9px;
}

#noticias > a:after {
    content: "";
    position: absolute;
    left: calc(100% + 33px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 2px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transform: rotate(135deg);
    transform-origin: 0;
    top: 1.5px;
}

#noticias > p {
    font-size: 16px;
    max-width: 325px;
}

#noticias > div,
#media-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#media-list {
    margin: 0 150px;
}

.new {
    width: 280px;
    background-color: white;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    position: relative;
    font-size: 12px;
}

.new .new-date {
    margin-top: 50px;
    margin-bottom: 0px;
}

.new img {
    width: 100%;
}

.new a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 10px;
    border-bottom: 2px solid #bdd748;
}

#mapa-juntos {
    padding: 10px calc(50% - 450px);
}

#mapa-juntos > p:first-child {
    font-size: 36px;
    font-weight: 400;
    max-width: 275px;
    margin-bottom: 0;
    line-height: 1em;
}

#mapa-juntos > p:last-child {
    font-size: 14px;
    max-width: 640px;
}

#mapa-locais {
    background-color: rgb(235, 239, 237);
    padding: 50px calc(50% - 600px);
    padding-bottom: 200px;
}

#mapa-local {
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 20px;
    position: relative;
    user-select: none;
    transition: width 1s;
}

#mapa-local p {
    display: inline-block;
    font-size: 32px;
    font-weight: 300;
    margin: 0;
    vertical-align: bottom;
    line-height: 0.7;
    position: relative;
    transition: left 1s;
    left: 0px;
}

#mapa-local,
#mapa-prev,
#mapa-next {
    display: inline-block;
    vertical-align: bottom;
}

.map-button {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: rgb(192, 197, 196);
    vertical-align: middle;
    position: relative;
    user-select: none;
}

.map-button.active {
    background-color: #bdd748;
    cursor: pointer;
}

.map-button:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-width: 2px;
    border-color: transparent;
    border-left-color: white;
    border-top-color: white;
}

#mapa-prev:after {
    top: 50%;
    left: 50%;
    transform: translate(-12%, -50%) rotate(-45deg);
}

#mapa-next:after {
    top: 50%;
    left: 50%;
    transform: translate(-62%, -50%) rotate(135deg);
}

#mapa-images {
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 790px;
    margin: 20px 0;
    position: relative;
}

#mapa-images img {
    vertical-align: middle;
    width: 250px;
    height: 310px;
    object-fit: cover;
    position: relative;
    transition: left 1s;
    left: 0px;
}

#mapa-images img + img {
    margin-left: 20px;
}

#mapa-descr {
    position: relative;
    width: 790px;
}

#mapa-descr p {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s;
    margin: 0;
}

#mapa-descr p.active {
    position: relative;
    opacity: 1;
    z-index: 1;
}

#maps {
    position: absolute;
    top: 180px;
    right: calc(50% - 800px);
}

#maps svg {
    fill: white;
    stroke: #bdd748;
    stroke-width: 2px;
}

#maps svg path.active {
    fill: #bdd748;
}

#maps svg text {
    stroke: none;
    fill: rgb(192, 197, 196);
    font-size: 22px;
}

#maps svg text.active {
    fill: white;
}

#maps svg path,
#maps svg text {
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill 0.5s;
}

body:is(
        .formacao,
        .financiada,
        .formacao-modular,
        .emprego-digital,
        .empresas-dinamizar,
        .cursos-aprendizagem,
        .efa,
        .nao-financiada,
        .formacao-a-medida,
        .formacao-a-distancia,
        .catalogo
    )
    > div#body {
    background-image: url("../storage/images/formacao-linhas.png");
    background-repeat: no-repeat;
    background-position: 100% 100px;
    background-size: 250px;
}

#sobre-descr,
#formacao-descr,
#cartao-descr,
#associados-descr,
#media-descr {
    margin: 0px calc(50% - 600px);
    border-bottom: 1px solid #bdd748;
}

#sobre-descr > p {
    font-size: 14px;
    font-weight: 300;
    max-width: 700px;
}

#sobre-descr > p:first-child {
    font-size: 36px;
    font-weight: 500;
}

#sobre-menu,
#formacao-menu,
#formacao-financiada-menu,
#formacao-nao-financiada-menu,
#cartao-menu,
#associados-menu,
#cartao-descontos-menu,
#media-menu {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

#formacao-nao-financiada-menu,
#cartao-descontos-menu,
#media-menu {
    display: inline-flex;
}

#sobre-menu > *,
#formacao-menu > *,
#formacao-financiada-menu > *,
#formacao-nao-financiada-menu > *,
#cartao-menu > *,
#associados-menu > *,
#cartao-descontos-menu > *,
#media-menu > * {
    cursor: pointer;
}

#sobre-menu > *,
#formacao-menu > *,
#cartao-menu > *,
#associados-menu > *,
#media-menu > * {
    color: rgb(192, 197, 196);
}

#formacao-financiada-menu > *,
#formacao-nao-financiada-menu > *,
#cartao-descontos-menu > *,
#media-menu > * {
    margin: 0;
    padding: 2px 20px;
    border: 2px solid #bdd748;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    transition: background-color 0.2s;
    color: black;
    background-color: white;
}

#media-menu > * {
    margin-bottom: 25px;
}

#formacao-financiada-menu > * {
    flex: 1 1 0px;
}

#formacao-nao-financiada-menu > *,
#cartao-descontos-menu > *,
#media-menu > * {
    width: 200px;
}

#cartao-descontos-menu > * {
    flex: 0 0 calc(25% - 20px);
}

#cartao-descontos-menu.show-map {
    justify-content: flex-end;
    width: 100%;
}

#cartao-descontos-menu.show-map > * {
    flex: initial;
}

#cartao-descontos-menu {
    flex-wrap: wrap;
}

#formacao-content *[content] p {
    font-size: 14px;
    font-weight: 200;
    margin-top: 20px;
}

#formacao-content p.formacao-title {
    font-size: 32px;
    font-weight: 100;
    margin: 0;
    margin-bottom: 40px;
}

#formacao-content a {
    display: inline-block;
    background-color: #bdd748;
    padding: 2px 50px;
    font-size: 12px;
    font-weight: 400;
    margin-top: 30px;
    text-transform: uppercase;
}

#sobre-menu > *:after,
#formacao-menu > *:after,
#cartao-menu > *:after,
#associados-menu > *:after {
    content: ">";
    display: inline-block;
    transform: rotate(90deg);
    font-size: 20px;
    margin-left: 10px;
}

#sobre-menu > *.active,
#formacao-menu > *.active,
#cartao-menu > *.active,
#associados-menu > *.active {
    color: black;
}

#formacao-financiada-menu > *.active,
#formacao-nao-financiada-menu > *.active,
#cartao-descontos-menu > *.active,
#media-menu > *.active {
    background-color: #bdd748;
}

#formacao-content #formacao-financiada,
#formacao-content #formacao-nao-financiada,
#cartao-content #cartao-descontos {
    padding-top: 25px;
}

#sobre-content-holder,
#formacao-content-holder,
#formacao-financiada-content-holder,
#formacao-nao-financiada-content-holder,
#cartao-content-holder,
#associados-content-holder,
#cartao-descontos-content-holder,
#media-content-holder {
    overflow: hidden;
}

#cartao-descontos-content-holder[content="mapa"]
    #cartao-descontos-content {
    min-height: 200px;
}

#cartao-content-holder,
#associados-content-holder,
#media-content-holder {
    background-repeat: no-repeat;
    background-position: bottom right;
}

#cartao-content-holder[content="protocolos"],
#associados-content-holder[content="vantagens"] {
    background-image: url("../storage/images/vantagens-linhas.png");
    background-size: 35%;
}

#cartao-content-holder[content="descontos"],
#associados-content-holder[content="quotas"] {
    background-image: url("../storage/images/descontos-linhas.png");
    background-size: 45%;
}

#media-content-holder {
    background-image: url("../storage/images/media_linhas.png");
    background-color: rgb(233, 236, 229);
    background-size: 15%;
    min-height: 550px;
}

#sobre-content-holder {
    background-color: rgb(235, 239, 237);
}

#sobre-content,
#formacao-content,
#formacao-financiada-content,
#formacao-nao-financiada-content,
#cartao-content,
#associados-content,
#cartao-descontos-content,
#media-content {
    margin: 0px calc(50% - 600px);
    transition: height 1s, min-height 1s;
    height: 0;
    min-height: 0px;
    box-sizing: content-box;
}

#sobre-content,
#formacao-content,
#cartao-content,
#associados-content,
#media-content {
    border-top: 2px solid #bdd748;
}

#sobre-content > *,
#formacao-content > *,
#formacao-financiada-content > *,
#formacao-nao-financiada-content > *,
#cartao-content > *,
#associados-content > *,
#cartao-descontos-content > *,
#media-content > * {
    opacity: 0;
    transition: opacity 0.2s;
    padding: 50px 0px;
}

#sobre-content.visible > *,
#formacao-content.visible > *,
#formacao-financiada-content.visible > *,
#formacao-nao-financiada-content.visible > *,
#cartao-content.visible > *,
#associados-content.visible > *,
#cartao-descontos-content.visible > *,
#media-content.visible > * {
    opacity: 1;
}

#history {
    display: flex;
    justify-content: space-between;
}

#history > div:first-child > p:first-child {
    font-size: 22px;
    font-weight: 500;
    margin-top: 120px;
}

.historyButton {
    width: 35px;
    height: 35px;
    display: inline-block;
    background-color: rgb(192, 197, 196);
    vertical-align: middle;
    position: relative;
}

.historyButton.active {
    background-color: #bdd748;
    cursor: pointer;
}

.historyButton,
#history-counter {
    user-select: none;
}

.historyButton:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-color: transparent;
    border-left-color: white;
    border-top-color: white;
}

#prev-history:after {
    top: 50%;
    left: 50%;
    transform: translate(-12%, -50%) rotate(-45deg);
}

#next-history:after {
    top: 50%;
    left: 50%;
    transform: translate(-62%, -50%) rotate(135deg);
}

#next-history {
    margin-left: 20px;
    margin-right: 30px;
}

#history-counter {
    display: inline-block;
    position: relative;
}

p#history-counter:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2000px;
    border-top: 1px solid black;
    left: calc(100% + 20px);
}

#history > div:last-child {
    max-width: 790px;
    font-size: 0px;
    overflow: hidden;
    white-space: nowrap;
    flex: 0 0 790px;
}

#history > div {
    display: inline-block;
    vertical-align: top;
}

#history > div:last-child > div {
    width: 250px;
    padding: 20px;
    background: white;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    white-space: normal;
    position: relative;
    transition: left 0.5s;
    left: 0px;
}

#history > div:last-child > div + div {
    margin-left: 20px;
}

#history > div:last-child > div > p {
    font-size: 16px;
}

#history > div:last-child > div > p:first-child {
    font-size: 36px;
    font-weight: 100;
}

#history > div:last-child > div div {
    font-size: 12px;
    font-weight: 200;
}

#orgaos-sociais > div > p {
    font-size: 22px;
    font-weight: 500;
}

#orgaos-sociais > div > div {
    font-size: 12px;
    font-weight: 200;
    margin-bottom: 50px;
}

#orgaos-sociais b {
    font-weight: 500;
}

#estatutos > div > div {
    cursor: pointer;
    background-color: white;
    padding: 10px 40px;
    margin: 20px 0;
    border: 1px solid white;
    transition: border-color 0.2s;
    overflow: hidden;
    font-size: 0;
}

#estatutos > div > div:hover,
#estatutos > div > div.visible {
    border-color: #bdd748;
}

#estatutos > div > div > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

#estatutos > div > div > div:last-child {
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.5s, opacity 0.5s;
    margin: 0;
    padding: 0;
    font-size: initial;
}

#estatutos > div > div:not(.visible) > div:last-child * {
    margin: 0;
}

#estatutos > div > div.visible > div:last-child {
    opacity: 1;
}

#estatutos img {
    height: 40px;
}

#orgaos-medalhas {
    text-align: center;
}

#orgaos-medalhas > div {
    display: flex;
    gap: 20px;
    justify-content: center;
    text-align: center;
}

#orgaos-medalhas > div > div {
    max-width: 250px;
    background-color: white;
    height: 100%;
    padding-bottom: 20px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

#orgaos-medalhas > div > div:hover {
    border-color: #bdd748;
}

#orgaos-medalhas img {
    width: 100%;
}

#orgaos-medalhas p {
    font-size: 12px;
    font-weight: 200;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

#orgaos-medalhas p.titulo-medalha {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
}

#orgaos-medalhas div a {
    display: inline-block;
    margin-top: 20px;
    font-size: 10px;
    border-bottom: 1px solid #bdd748;
}

#orgaos-medalhas > a {
    display: inline-block;
    text-align: center;
    border-bottom: 1px solid #bdd748;
    margin: 50px auto;
}

#servicos-descr {
    padding: 50px calc(50% - 600px);
}

#servicos-descr p:first-child {
    font-size: 32px;
    font-weight: 500;
}

#servicos-descr a {
    max-width: 375px;
    display: inline-block;
    position: relative;
}

#servicos-descr a:before {
    content: "";
    position: absolute;
    left: calc(100% - 34px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 33px;
    border-radius: 2px;
    height: 0px;
    top: calc(100% - 13px);
}

#servicos-descr a:after {
    content: "";
    position: absolute;
    right: 0;
    border-color: #bdd748;
    border-width: 2px 2px 0px 0px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transform: rotate(45deg);
    top: calc(100% - 19px);
}

#servicos-list-container {
    position: relative;
    background-color: rgb(233, 236, 229);
    text-align: center;
}

div#servicos-list {
    display: flex;
    padding: 50px calc(50% - 405px);
    flex-wrap: wrap;
    align-items: baseline;
    text-align: center;
    justify-content: center;
}

#servicos-list-container > img {
    position: absolute;
    right: 0;
    z-index: 1;
    width: 50%;
    max-width: 500px;
}

#services-lines-1 {
    bottom: 100%;
}

#services-lines-2 {
    top: 0;
}

#servicos-junte-se-container {
    position: relative;
    margin: 80px 0;
    display: inline-block;
}

#servicos-junte-se-container > a {
    color: white;
    background-color: #bdd748;
    display: inline-block;
    padding: 10px;
    padding-left: 50px;
    position: relative;
    z-index: 2;
}

#servicos-junte-se-container > a:before {
    content: "";
    position: absolute;
    background-image: url("../storage/images/balao.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 100%;
    left: 10px;
    top: 0;
    background-position: center;
}

#servicos-junte-se-container:after {
    content: "";
    position: absolute;
    background-image: url("../storage/images/hexagono-pequeno.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 125px;
    height: 125px;
    left: 55%;
    top: 50%;
    background-position: center;
    transform: translateY(-50%);
}

img#formacao-linhas {
    position: absolute;
    top: 100px;
    right: 0;
}

div#formacao-nao-financiada-formacao-a-distancia > p:first-child {
    font-size: 32px;
    font-weight: 100;
}

div#formacao-nao-financiada-formacao-a-distancia > div > p {
    font-size: 12px;
    font-weight: 200;
}

div#formacao-nao-financiada-formacao-a-distancia > div > p:first-child {
    font-size: 18px;
    font-weight: 300;
}

div#formacao-descr > p:first-child,
div#cartao-descr > p:first-child,
div#associados-descr > p:first-child,
#media-descr > p:first-child,
#junte-se-a-nos-descr > p:first-child,
#contactos-1 > p:first-child {
    font-size: 12px;
    font-weight: 200;
    position: relative;
    display: inline-block;
}

div#formacao-descr > p,
div#cartao-descr > p,
div#associados-descr > p,
#media-descr > p,
#junte-se-a-nos-descr > p:nth-child(2),
#contactos-1 > p:nth-child(2) {
    font-size: 32px;
    font-weight: 500;
    margin-top: 0;
}

#junte-se-a-nos-descr p {
    font-size: 16px;
    font-weight: 300;
}

#junte-se-a-nos-descr strong {
    font-weight: 500;
}

div#formacao-descr > p:first-child:before,
div#cartao-descr > p:first-child:before,
div#associados-descr > p:first-child:before,
#media-descr > p:first-child:before,
#junte-se-a-nos-descr > p:first-child:before,
#contactos-1 > p:first-child:before {
    content: "";
    position: absolute;
    left: calc(100% + 15px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 33px;
    border-radius: 2px;
    height: 0px;
    top: 50%;
}

div#formacao-descr > p:first-child:after,
div#cartao-descr > p:first-child:after,
div#associados-descr > p:first-child:after,
#media-descr > p:first-child:after,
#junte-se-a-nos-descr > p:first-child:after,
#contactos-1 > p:first-child:after {
    content: "";
    position: absolute;
    left: calc(100% + 35px);
    border-color: #bdd748;
    border-width: 2px 2px 0px 0px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transform: translateY(-50%) rotate(45deg);
    top: 50%;
}

#vantagens-list-container {
    text-align: center;
}

#vantagens-list {
    display: inline-flex;
    justify-content: center;
    width: 810px;
    flex-wrap: wrap;
}

.vantagem {
    flex: 0 0 230px;
    margin: 20px;
}

.vantagem-title {
    font-size: 16px;
    font-weight: 500;
}

.vantagem-text {
    font-size: 12px;
    font-weight: 200;
}

.vantagem > img {
    max-width: 100px;
}

#cartao-descontos-mapa {
    padding-top: 25px;
}

#cartao-descontos-mapa > p {
    font-size: 14px;
    font-weight: 300;
}

#map {
    margin-top: 80px;
    margin-bottom: 200px;
}

.map-marker {
    font-size: 32px;
    color: #bdd748;
    transition: scale 0.2s;
    line-height: 20px;
}

.map-marker:hover {
    scale: 1.1;
}

.map-marker.active {
    color: rgb(54, 56, 61);
}

#cartao-descontos-categorias, #cartao-protocolos {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
    #cartao-descontos-categorias, #cartao-protocolos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.detail-card {
    position: relative;
    /*     width: 250px;
    height: 350px; */
    background-color: white;
    border: 1px solid rgb(132, 134, 137);
    transition: scale 1s, left 1s, top 1s, opacity 0.5s;
    transform-origin: top left;
    text-align: center;
    padding: 20px;
    padding-bottom: 45px;
    opacity: 1;
}

body > .detail-card {
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: 300px;
}

.detail-card.resizing:not(.animating) {
    transition: scale 1s, opacity 0.5s;
}

.detail-card.removing {
    opacity: 0;
}

.detail-card img {
    width: 100%;
}

.detail-card .title {
    font-size: 16px;
    font-weight: 500;
}

.detail-card .descr {
    font-size: 12px;
}

.detail-card .saber-mais {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    border-bottom: 3px solid #bdd748;
    bottom: 10px;
}

.detail-card.minimized {
    scale: 0.1;
}

.detail-fullpage {
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 43, 49, 0.95);
    background-image: url("../storage/images/junte-se-linhas.png");
    background-repeat: no-repeat;
    background-position: left center;
}

.detail-fullpage > div:not(.close) {
    max-width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-sizing: content-box;
    color: white;
}

.detail-fullpage .title {
    font-size: 42px;
    font-weight: 500;
    border-bottom: 3px solid #bdd748;
}

.detail-fullpage.visible {
    z-index: 100;
    opacity: 1;
}

.detail-fullpage .close {
    font-size: 32px;
    font-weight: 100;
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: white;
}

#media-detail {
    background-image: url("../storage/images/media_detalhe_linhas.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 15%;
    padding: 100px calc(50% - 600px);
}

#media-detail-date {
    font-size: 20px;
    font-weight: 300;
}

#media-detail-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 50px;
    border-bottom: 4px solid #bdd748;
    padding-bottom: 15px;
}

#media-detail-image-holder {
    text-align: center;
    padding-bottom: 50px;
}

#media-detail-link-hoder {
    text-align: right;
    padding-top: 50px;
}

#media-detail-link {
    display: inline-block;
    background-color: #bdd748;
    color: black;
    text-transform: uppercase;
    padding: 2px 50px;
    font-size: 14px;
    font-weight: 500;
}

.form {
    margin-top: 50px;
    padding-top: 10px;
    padding: 0 calc(50% - 450px)!important;
    padding-bottom: 50px!important;
}

#junte-se-a-nos,
#contactos-1,
#contactos-2 {
    padding: 0 calc(50% - 450px);
    padding-bottom: 100px;
}

/*#junte-se-a-nos*/
#associados-content-holder[content="adira"] {
    background-image: url("../storage/images/junte-se-linhas.png");
    background-repeat: no-repeat;
    background-position: center left;
}

.form > p:first-child {
    text-transform: uppercase;
    color: #bdd748;
    font-size: 22px;
}

.form > p:nth-child(2) {
    font-size: 16px;
    font-weight: 500;
}

.form,
#contactos-form {
    font-size: 16px;
}

.form label,
#contactos-form label {
    font-weight: 300;
    display: block;
    margin-bottom: 10px;
}

.form input,
#contactos-form input {
    border: 2px solid;
    width: 100%;
    padding: 10px;
}

.form input:user-invalid, .form input.error,
#contactos-form input:user-invalid, #contactos-form input.error {
    border-color: red;
}

#form-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#form-fields > div {
    display: inline-block;
    margin: 20px 0;
    width: 400px;
}

.form #users > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.form #users > div button {
    height: 30px;
}

#contactos-form #form-fields > div:not(:first-child, :nth-child(2)) {
    width: 900px;
}

.form button,
#contactos-form > button {
    display: inline-block;
    background-color: #bdd748;
    color: black;
    text-transform: uppercase;
    padding: 2px 50px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins";
    cursor: pointer;
    margin-top: 25px;
}

#contactos-1,
#contactos-2,
#contactos-map {
    background-repeat: no-repeat;
}

#contactos-1 {
    background-image: url("../storage/images/contactos-linhas-1.png");
    background-position: 0% 100%;
}

#contactos-2 {
    background-color: rgb(235, 239, 237);
    background-image: url("../storage/images/contactos-linhas-2.png");
    background-position: top left;
}

#contactos-map {
    background-image: url("../storage/images/contactos-linhas-3.png"),
        linear-gradient(
            rgb(235, 239, 237) 0%,
            rgb(235, 239, 237) 20%,
            white 20%
        );
    background-position: bottom right;
    padding: 0 calc(50% - 450px);
    padding-bottom: 100px;
}

#contactos-contactos {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 50px;
    justify-content: space-between;
    border-top: 4px solid #bdd748;
}

#contactos-contactos > * {
    flex: 1 1 45%;
}

#contactos-contactos p {
    font-weight: 300;
    font-size: 14px;
}

#contactos-contactos p.title {
    font-size: 24px;
    font-weight: 500;
}

#contactos-contactos strong {
    font-weight: 500;
}

#contactos-map > #map {
    width: 100%;
    height: 600px;
    margin: 0;
}

#footer-wrapper {
    display: table-row;
    height: 1px;
    vertical-align: bottom;
}

#footer {
    background-color: #2b2b31;
    color: white;
    text-align: center;
    padding: 10px calc(50% - 450px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border-top: 2px solid #bdd748;
    width: 100%;
}

#footer > div {
    text-align: left;
}

#footer-1 img {
    height: 100px;
}

#fale-connosco-footer {
    position: relative;
    display: inline-block;
}

#fale-connosco-footer:after {
    content: "";
    position: absolute;
    left: calc(100% + 50px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 2px;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    transform: rotate(135deg);
    transform-origin: 0;
    top: 3px;
}

#fale-connosco-footer:before {
    content: "";
    position: absolute;
    left: calc(100% + 20px);
    border-color: #bdd748;
    border-width: 2px 0px 0px 0px;
    width: 33px;
    border-radius: 2px;
    height: 0px;
    top: 15px;
}

#footer-2 p {
    margin: 5px 0px;
}

p#fale-connosco-footer {
    font-size: 20px;
}

div#footer-2 > p:nth-child(2) {
    font-size: 10px;
    margin-bottom: 15px;
}

div#footer-3 > p {
    font-size: 16px;
    margin: 0;
}

#footer-2 img {
    width: 25px;
    margin-right: 5px;
}

div#footer-3 ul {
    margin: 0;
    padding: 0;
}

div#footer-3 li {
    list-style-type: none;
    margin: 5px 0px;
    font-size: 10px;
    position: relative;
    padding-left: 25px;
}

div#footer-3 li:before {
    content: "";
    position: absolute;
    border-color: #bdd748;
    border-width: 3px 0px 0px 0px;
    width: 12px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

div#footer-fin {
    background-color: #2b2b31;
    color: white;
    padding: 50px calc(50% - 550px);
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

div#footer-fin div {
    margin: 10px;
}

div#footer-fin img {
    max-width: 500px;
    vertical-align: middle;
}

div#footer-fin p {
    margin: 0;
    padding: 20px 0;
}

@media screen and (max-width: 1440px) {
    #maps {
        right: calc(50% - 650px);
    }
}

@media screen and (max-width: 1024px) {
    #footer,
    div#navbar,
    #mapa-juntos {
        padding: 10px;
    }
    #mapa-locais {
        padding-bottom: 100px;
    }
    #services-home,
    #juntos,
    #counters,
    #noticias,
    #servicos-descr,
    #servicos-list {
        padding: 50px 10px;
    }
    #associado-fixed {
        display: none;
    }
    #sobre-descr,
    #sobre-content,
    #formacao-descr,
    #formacao-content,
    #cartao-descr,
    #cartao-content,
    #associados-descr,
    #associados-content,
    #cartao-descontos-content,
    #media-descr,
    #media-content {
        margin: 0 10px;
    }
    #formacao-financiada-content,
    #formacao-nao-financiada-content {
        margin: 0;
    }
    #maps {
        scale: 0.5;
        right: calc(50% - 579px);
        top: 330px;
    }
    #cartao-descontos-menu > * {
        flex: 0 0 calc(33% - 20px);
    }
    body > .detail-card {
        transform: translate(-50%, -25%);
    }
    div#maps {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    div#socials {
        display: none;
    }
    #services-list {
        flex: 0 0 540px;
        max-width: 540px;
    }
    #juntos {
        flex-wrap: wrap;
    }
    #navbar li {
        position: relative;
        z-index: 1;
        display: block;
        transition: max-height 0.5s, margin 0.5s;
        margin-left: 5px !important;
    }
    #navbar li:not(:last-child) {
        width: calc(100% - 30px);
    }
    div#navbar {
        align-items: start;
    }
    #navbar li:last-child {
        margin-top: 35px !important;
    }
    #navbar:not(:focus) li:not(:last-child):not(.active) {
        margin: 0px !important;
        max-height: 0px;
        overflow: hidden;
    }
    #navbar:not(:focus) li:not(:last-child).visible,
    #navbar:not(:focus) li:not(:last-child).active {
        max-height: 50px;
        margin: 5px !important;
    }
    #navbar #menu {
        position: relative;
    }
    #menu-ham {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        text-align: right;
        z-index: 0;
    }
    #menu-ham.visible {
        z-index: 2;
    }
    #history > div:last-child {
        max-width: 540px;
    }
    #vantagens-list {
        width: 100%;
    }
    #junte-se-a-nos,
    #contactos-1,
    #contactos-2 {
        padding: 10px;
        padding-bottom: 100px;
    }
    #form-fields > div,
    #contactos-form #form-fields > div:not(:first-child, :nth-child(2)) {
        width: 100%;
    }
    #media-list,
    #noticias > div {
        margin: 0;
        justify-content: space-around;
    }
    .detail-fullpage {
        overflow: scroll;
    }
    .detail-fullpage > div:not(.close) {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        overflow: scroll;
    }
    div#users > div > div {
        width: 100%;
    }
    #mapa-images {
        width: 100%;
    }
    #mapa-images img {
        width: 33%;
    }
    #mapa-descr {
        width: 100%;
    }
}

@media screen and (max-width: 425px) {
    .banner-title {
        font-size: 32px;
        line-height: 32px;
    }
    .banner-text {
        font-size: 13px;
    }
    #banner-markers {
        right: 5px;
        bottom: 5px;
        top: initial;
        left: initial;
        transform: none;
    }
    #services-home {
        flex-wrap: wrap;
    }
    #services-list {
        flex: 0 0 100%;
        max-width: 90vw;
    }
    #juntos > div:last-child {
        flex: 0 0 100%;
    }
    #footer {
        justify-content: space-around;
        gap: 50px 0px;
    }
    #counters,
    #history,
    #orgaos-medalhas > div,
    #sobre-menu,
    #formacao-menu,
    #formacao-financiada-menu,
    #formacao-nao-financiada-menu,
    #cartao-menu,
    #cartao-descontos-menu,
    #media-menu {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #navbar li {
        font-size: 16px;
    }
    #history > div:first-child > p:first-child {
        margin-top: 0;
    }
    #map {
        margin: 20px auto;
    }
    #cartao-descontos-menu > * {
        flex: 0 0 calc(50% - 20px);
    }
    #history > div:last-child {
        max-width: 250px;
    }
}