*, ::after, ::before {
    box-sizing: border-box;
}

:root {
    --background-color: white;
    --main-container-bg_color: #159541;
    --bg-gradient-color-1: #C0B800;
    --bg-gradient-color-2: #009249;
    --bg-gradient-color-3: #006646;
    --bg-gradient-color-4: #00473f;
    --text-color: white;
    --accent-color: #eec02d;

    --icon-color: #083304;
    --icon-bg-color: var(--accent-color);
    --icon-shadow-color: white;

    --map-bg-lines-color: #bfc500;
    --map-fill-color: #449941;
    --map-stroke-color: white;

    font-size: 10px;
    --main-container-width: 72rem;

    --transition-delay: .5s;
    --transition-timing-function: ease-in-out;
}

@font-face {
    font-family: Nexa;
    src: url("../assets/fonts/NexaLight.otf");
    font-weight: normal;
}
@font-face {
    font-family: Nexa;
    src: url("../assets/fonts/NexaHeavy.otf");
    font-weight: bold;
}
@font-face {
    font-family: Nexa;
    src: url("../assets/fonts/NexaBlackItalic.otf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Signika;
    src: url("../assets/fonts/Signika-Light.ttf") format("woff2-variations");
    font-weight: 300;
}
@font-face {
    font-family: Signika;
    src: url("../assets/fonts/Signika-Regular.ttf") format("woff2-variations");
    font-weight: 400;
}
@font-face {
    font-family: Signika;
    src: url("../assets/fonts/Signika-Medium.ttf") format("woff2-variations");
    font-weight: 500;
}
@font-face {
    font-family: Signika;
    src: url("../assets/fonts/Signika-SemiBold.ttf") format("woff2-variations");
    font-weight: 600;
}
@font-face {
    font-family: Signika;
    src: url("../assets/fonts/Signika-Bold.ttf") format("woff2-variations");
    font-weight: 700;
}

body {
    font-family: Nexa, sans-serif;
    background: var(--background-color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 100vw;
    min-height: 100vh;
    margin: 0;

    --select-font-size: 1.5rem;
}


#main-container {
    display: flex;

    position: relative;

    width: min(var(--main-container-width), 100vw);

    min-height: 100vh;

    /*background-color: var(--main-container-bg_color);*/
    --radial-gradient-top: 31rem;
    --radial-gradient-right: 13.9rem;
    --radial-gradient:
        circle at top var(--radial-gradient-top) right var(--radial-gradient-right),
        transparent calc(.10 * var(--main-container-width)),
        var(--bg-gradient-color-2) calc(.24 * var(--main-container-width)),
        var(--bg-gradient-color-3) calc(.62 * var(--main-container-width)),
        var(--bg-gradient-color-3) calc(.68 * var(--main-container-width)),
        var(--bg-gradient-color-4) calc(1   * var(--main-container-width));
    background: -moz-radial-gradient(var(--radial-gradient));
    background: -webkit-radial-gradient(var(--radial-gradient));
    background: radial-gradient(var(--radial-gradient));

    margin: 0;

    overflow: hidden;

    transition: --bg-gradient-color-1 var(--transition-timing-function) var(--transition-delay);
}
#main-container::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    background-color: var(--bg-gradient-color-1);

    z-index: -1;

    transition: background-color var(--transition-timing-function) calc(var(--transition-delay) / 2);
}
@media(max-width: 720px) {
    #main-container {
        --bg-gradient-color-1: var(--bg-gradient-color-2);
    }
}
@media(max-width: 640px) {
    #main-container {
        --radial-gradient-top: 13rem;
        --radial-gradient-right: 50%;
    }
    #main-container::before {
        transition: unset;
    }
}


form {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;

    width: 100%;

    color: unset;
    font-size: var(--select-font-size);

    margin-top: 2rem;

    z-index: 2;
}
.select2-container {
    width: 30% !important;

    font-size: var(--select-font-size);

    transition: width var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    .select2-container {
        width: 80% !important;
    }
}


#mapa {
    position: absolute;
    right: 0;

    --width: 341px;
    width: var(--width);
    height: 312px;

    /*background-color: rgba(10, 24, 87, 0.22);*/

    margin-top: 12.5rem;
    margin-right: 3.2rem;

    transition: opacity, margin var(--transition-timing-function) var(--transition-delay);
}
#mapa > *{
    position: absolute;
    width: 100%;
    height: 100%;
}
#mapa > div {
    mask-image: var(--svg-image);
    -webkit-mask-image: var(--svg-image);

    --mask-size: contain;
    mask-size: var(--mask-size);
    -webkit-mask-size: var(--mask-size);
}
#mapa-linhas-fundo {
    background-color: var(--map-bg-lines-color);
}
#mapa-fundo {
    background-color: var(--map-fill-color);
}
#mapa-contorno {
    background-color: var(--map-stroke-color);
}
@media(max-width: 720px) {
    #mapa {
        opacity: 33%;
    }
}
@media(max-width: 640px) {
    #mapa {
        margin-top: 4rem;
        margin-right: calc(calc(100% - var(--width)) / 2);
    }
}


#content {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: calc(100% - calc(2 * var(--content-h-margin)));

    --content-h-margin: 0;
    margin-top: 10rem;
    margin-bottom: 7rem;

    z-index: 1;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    #content {
        --content-h-margin: 3rem;

        margin-left: var(--content-h-margin);
        margin-right: var(--content-h-margin);
    }
}

#mockup {
    position: absolute;
    opacity: 25%;
    width: 720px;
    height: 720px;
    z-index: -1;
}


#logo-auxilio-brasil {
    --width: 23rem;
    width: var(--width);
    margin-left: 7.5rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    #logo-auxilio-brasil {
        margin-left: calc(calc(100% - var(--width)) / 2);
    }
}
#logo-auxilio-brasil img {
    width: 100%;
}
#logo-auxilio-brasil-texto {
    text-align: left;
    line-height: 1;
    font-size: 5rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    margin: 0;
}
@media(max-width: 640px) {
    #logo-auxilio-brasil-texto {
        text-align: center;
        margin: 0 auto;
    }
}


#nome-agregacao {
    display: flex;
    align-items: end;

    max-width: 30rem;
    min-height: 17rem;

    color: var(--accent-color);
    font-size: 5rem;
    font-weight: bold;
    line-height: .88;
    text-align: left;

    --padding-y: 2rem;
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);

    margin-left: 7.5rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    #nome-agregacao {
        align-items: center;

        max-width: 100%;

        text-align: center;

        margin-left: auto;
        margin-right: auto;
    }
}

.texto-destaque {
    color: var(--accent-color);
    font-weight: bold;
}

.bloco-info {
    display: flex;
    align-items: center;

    font-size: 1.8rem;

    margin-bottom: 2.5rem;
}
.icon {
    display: flex;
    justify-content: end;

    --width: 10.5rem;
    --shadow-width-offset: 3rem;
    width: calc(var(--width) + var(--shadow-width-offset));
    min-width: var(--width);

    height: 12.5rem;

    background-color: var(--icon-bg-color);

    --border-radius: 2rem;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);

    margin-right: 2rem;
    margin-left: calc(-1 * var(--shadow-width-offset));

    --shadow: 0 1rem 1.5rem 0 var(--icon-shadow-color);
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);

    transition: all var(--transition-timing-function) var(--transition-delay);
}
.icon > .icon-wrapper {
    display: flex;
    align-items: center;

    width: var(--width);

    transition: padding-left var(--transition-timing-function) var(--transition-delay);
}
.icon > .icon-wrapper > .svg {
    width: var(--width);
    height: var(--height);

    -webkit-mask-image: var(--svg-image);
    mask-image: var(--svg-image);

    --mask-size: contain;
    -webkit-mask-size: var(--mask-size);
    mask-size: var(--mask-size);

    --mask-repeat: no-repeat;
    -webkit-mask-repeat: var(--mask-repeat);
    mask-repeat: var(--mask-repeat);

    background-color: var(--icon-color);

    margin-left: 3rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    .icon {
        justify-content: center;

        width: 10.5rem;
        height: 10.5rem;

        border-radius: var(--border-radius);

        margin-left: 0;
    }
    .icon > .icon-wrapper > .svg {
        margin-left: calc(calc(100% - var(--width)) / 2);
    }
}
@media(max-width: 480px) {
    .icon {
        display: none;
    }
}

.texto {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: 30rem;

    color: var(--text-color);

    margin-bottom: -0.8rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
@media(max-width: 640px) {
    .texto {
        max-width: 100%;
    }
}
.texto-primario {
    font-size: 1.9rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.texto-secundario {

}


.table-container {
    display: flex;
    justify-content: center;

    color: var(--text-color);

    margin-top: 3rem;
}
.table-wrapper {
    overflow: auto;
}
table {
    font-size: 1.5rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
th, td {
    text-align: center;

    padding: .5rem 1rem;

    transition: all var(--transition-timing-function) var(--transition-delay);
}
thead > tr {
    border-bottom: var(--text-color) 1px solid;
}
@media(max-width: 640px) {
    table {
        font-size: 1.2rem;
    }
    th, td {
        padding: .3rem 1rem;
    }
}
@media(max-width: 420px) {
    th, td {
        padding: .3rem;
    }
}


#observacao {
    text-align: center;

    font-size: 1.1rem;
    color: var(--text-color);

    margin-top: 5rem;
}


#links-externos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;

    width: 100%;

    margin-top: 10rem;
}

/* Corpo do botão*/
.botao-link-externo {
    display: flex;
    align-items: center;

    position: relative;

    --full-width: min(486px, 100%);
    --full-height: 150px;
    --border-width: 5px;

    --inner-width: calc(var(--full-width) - calc(2 * var(--border-width)));
    --inner-height: calc(var(--full-height) - calc(2 * var(--border-width)));

    --outer-border-offset: calc(var(--border-width) * -1);

    width: var(--inner-width);
    height: var(--inner-height);

    font-family: Signika, sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    color: #005f27;
    text-decoration: none;
    text-align: center;

    /*background-color: #e4e4e4;*/
    --linear-gradient:
        180deg,
        #f5f5f5 0%,
        #e1e1e3 58%;
    background: -moz-linear-gradient(var(--linear-gradient));
    background: -webkit-linear-gradient(var(--linear-gradient));
    background: linear-gradient(var(--linear-gradient));

    margin: var(--border-width);
    border-radius: var(--inner-height);
}
/* "Borda" do botão */
.botao-link-externo:before {
    content: "";

    position: absolute;
    top: var(--outer-border-offset);
    bottom: var(--outer-border-offset);
    left: var(--outer-border-offset);
    right: var(--outer-border-offset);

    --linear-gradient:
        193deg,
        white 0%,
        white 46%,
        #ababac 76%,
        #afafb0 100%;
    background: -moz-linear-gradient(var(--linear-gradient));
    background: -webkit-linear-gradient(var(--linear-gradient));
    background: linear-gradient(var(--linear-gradient));

    border-radius: var(--full-height);

    box-shadow: -1.5rem 2rem .9rem .5rem rgba(255, 255, 255, .25);

    z-index: -1;
}
/* Texto do botão */
.botao-link-externo > div {
    padding-left: 3rem;
}
/* Ícone animado de cursor*/
.botao-link-externo:after {
    content: url("../assets/images/cursor_hand.svg");

    position: absolute;
    right: -1.75rem;
    bottom: -3.5rem;

    opacity: 0;

    transition-property: all;
    transition-duration: .35s;
    transition-timing-function: ease-in-out;

    pointer-events: none;
}
.botao-link-externo:hover:after {
    right: .25rem;
    bottom: -1.5rem;

    opacity: 100;
}
@media(max-width: 546px) {
    .botao-link-externo {
        --full-height: auto;
        --border-radius: 2rem;
        --inner-h-padding: 2rem;
        --inner-v-padding: 1.5rem;

        flex-direction: column-reverse;

        border-radius: var(--border-radius);
    }
    .botao-link-externo:before {
        border-radius: var(--border-radius);
    }
    .botao-link-externo > div {
        padding: unset !important;
        margin: var(--inner-v-padding) var(--inner-h-padding) !important;
    }
    .botao-link-externo > img {
        max-width: calc(100% - calc(2 * var(--inner-h-padding)));
        max-height: 10rem;

        padding: unset !important;

        margin: unset !important;
        margin-top: var(--inner-v-padding) !important;
    }
}

#footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    margin-top: 15rem;
}

#hashtag {
    color: var(--text-color);
    font-size: 1.9rem;
    font-weight: bold;
    font-style: italic;
}

#logo-assinatura {
    padding: 1.5rem;
    width: 28.8rem;
}