@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);
:root {
    font-size: 16px;
    --primary: #0F1A44;
    --secondary: #005673;
    --bright: #3DE0CC;
    --white: #F6FFFE;
    --yellow: #FFC85E;
    --red: #DD4D5B;
    --black: #121212;
    --spacing-01: 0.63rem;
    --spacing-02: 0.76rem;
    --spacing-03: 0.88rem;
    --spacing-04: 1rem;
    --spacing-05: 1.06rem;
    --spacing-06: 1.13rem;
    --spacing-07: 1.25rem;
    --spacing-08: 1.4rem;
    --spacing-09: 1.5rem;
    --spacing-10: 1.63rem;
    --spacing-11: 1.97rem;
    --spacing-12: 2.39rem;
    --spacing-13: 2.63rem;
    --spacing-14: 3.98rem;
    --spacing-15: 4.19rem
}

.preload * {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important
}

body {
    font-family: Inter, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden
}

h1,
h2,
h3 {
    font-weight: 700
}

h1 {
    font-size: var(--spacing-15);
    line-height: var(--spacing-14)
}

h2 {
    font-size: var(--spacing-13);
    margin-top: 0
}

h3 {
    font-size: var(--spacing-10)
}

p {
    font-weight: 400;
    font-size: var(--spacing-04);
    margin: 0
}

ul {
    list-style: none
}

a {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    color: #fff
}

a.button {
    padding: 11px 25px;
    border-radius: 5px;
    font-weight: 500
}

a:visited {
    color: inherit
}

nav {
    height: 80px
}

nav>div {
    height: 100%
}

nav ul {
    padding: 0;
    margin: 0
}

nav li {
    font-size: var(--spacing-04);
    font-weight: 400;
    margin-right: 25px
}

nav li a {
    transition: color .2s ease-in
}

nav li a:hover {
    color: var(--bright)
}

header {
    min-height: calc(100vh - 80px)
}

.secondary {
    font-weight: 600;
    font-size: var(--spacing-03);
    line-height: var(--spacing-05)
}

.subtitles {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--spacing-01);
    line-height: var(--spacing-02)
}

.bg-primary {
    background-color: var(--primary);
    color: #fff
}

.bg-bright {
    background-color: var(--bright)
}

.bg-white {
    background-color: var(--white)
}

.bg-secondary {
    background-color: var(--secondary);
    color: #fff
}

.flex-01 {
    display: flex;
    justify-content: space-evenly;
    align-items: center
}

.flex-02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 45px
}

.flex-03 {
    display: flex;
    justify-content: left
}

.grid-01 {
    display: grid;
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    grid-template-rows: calc(50% - 15px) calc(50% - 15px)
}

.grid-02 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%
}

.grid-03 {
    display: grid;
    height: 600px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
    justify-items: stretch;
    align-items: stretch
}

.w47 {
    width: 47%!important
}

.w50 {
    width: 50%!important
}

.w53 {
    width: 53%!important
}

.h100 {
    height: 100%!important
}

.container-01 {
    margin: 0 9%
}

.hide {
    display: none
}

a.b-transparent {
    background-color: transparent;
    color: #fff;
    border: 2px solid var(--bright);
    font-weight: 400;
    transition: background-color .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out
}

.b-transparent:hover {
    color: var(--primary);
    background-color: var(--bright)
}

.b-yellow {
    background-color: var(--yellow);
    color: var(--primary);
    border: 1px solid var(--yellow);
    transition: background-color .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out
}

.b-yellow:hover {
    background-color: var(--primary);
    color: var(--yellow);
    border-color: var(--primary)
}

.b-bright {
    background-color: var(--bright);
    color: var(--primary);
    border: 1px solid var(--bright);
    transition: background-color .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out
}

.b-bright:hover {
    background-color: var(--primary);
    color: var(--bright);
    border-color: var(--primary)
}

.b-primary {
    background-color: var(--primary);
    color: #fff;
    font-weight: 600;
    border: 1px solid var(--primary);
    transition: background-color .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out
}

.b-primary:hover {
    background-color: var(--bright);
    color: var(--primary);
    border-color: var(--bright)
}

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.circle {
    border-radius: 50%
}

.m-0 {
    margin: 0
}

.c-primary {
    color: var(--primary)
}

.c-secondary {
    color: var(--secondary)
}

.c-bright {
    color: var(--bright)
}

.c-yellow {
    color: var(--yellow)
}

.c-clear {
    color: #fff
}

header>div {
    padding-bottom: 50px
}

header>div>div:first-of-type {
    width: 48%;
    padding-right: 7%;
    display: flex;
    justify-content: right
}

.sm-show {
    display: none
}

header img.sm-show {
    position: absolute;
    right: -2%;
    margin-bottom: 0
}

header img.sm-show:first-of-type {
    top: -100px;
    height: 225px;
    opacity: 0
}

header img.sm-show:last-of-type {
    top: 400px;
    height: 285px;
    opacity: 0
}

header>div>div:first-of-type {
    margin-bottom: 30px
}

header>div>div:first-of-type>div {
    width: 69%;
    margin-left: auto
}

header>div>div:last-of-type {
    width: 56%
}

header>div>div:last-of-type .relative {
    margin-bottom: 60px
}

header>.container-01 p {
    margin-top: 25px;
    line-height: var(--spacing-08);
    margin-bottom: 0
}

header>.container-01 a {
    margin-top: 34px
}

#mNav,
#mobileNav,
#navMobileAct {
    display: none
}

#mobileNav {
    width: 45px;
    height: 45px
}

#mobileNav img {
    position: absolute
}

#mNav {
    float: right;
    height: 85vh;
    width: 100%;
    background-color: var(--primary);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    padding-top: 110px
}

#mNav ul {
    padding: 0
}

#mNav li {
    padding-left: 40px;
    vertical-align: middle;
    border-top: 1px solid var(--bright);
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

#mNav li:active,
#mNav li:hover {
    background-color: var(--bright);
    color: var(--primary)
}

#mNav li:last-of-type {
    border-bottom: 1px solid var(--bright)
}

#mNav li a {
    margin: 20px 0 20px 0;
    font-size: var(--spacing-07);
    color: inherit
}

#mNav .b-primary a {
    margin: unset
}

#mNav .b-primary {
    margin: 0 40px;
    font-size: 20px;
    border: 2px solid var(--bright);
    border-radius: 5px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0;
    margin-top: 150px
}

#nav-exception {
    font-size: var(--spacing-06);
    color: var(--bright);
    font-weight: 500;
    transition: color .2s ease-in
}

#nav-exception:hover {
    color: #fff
}

#imgHeader {
    margin-top: 75px
}

#maoDireita {
    position: absolute;
    left: 60%;
    bottom: -28%;
    opacity: 0
}

#maoEsquerda {
    position: absolute;
    left: -16%;
    top: 14%;
    opacity: 0
}

#happy {
    display: none;
    position: absolute;
    left: 8%;
    top: 15%
}

#like {
    display: none;
    position: absolute;
    right: 15%;
    top: 35%
}

#firstButton {
    font-size: var(--spacing-06)
}

#valores {
    height: 600px;
    background-image: url("../../assets/Hands_valores.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 50%
}

#valores>div {
    padding-top: 136px;
    padding-bottom: 125px;
    height: calc(100% - 136px - 125px)
}

#valores .frame {
    display: block;
    width: 400px;
    height: 232.68px;
    margin-left: auto;
    margin-right: auto
}

#valores .md-w50:last-of-type {
    height: 100%
}

#valores .md-w50:last-of-type>div {
    padding-left: 14%;
    padding-right: 10%
}

.frame img {
    position: absolute;
    z-index: 2
}

#loosePhoto {
    position: absolute;
    bottom: 50px;
    right: -80px;
    z-index: 1
}

.relative {
    position: relative
}

#valores h2 {
    margin-bottom: 26px
}

#valores p:first-of-type {
    margin-bottom: 34px;
    line-height: var(--spacing-08)
}

#valores p:last-of-type {
    margin-top: 0;
    margin-bottom: 11px
}

#valores .flex-03 p {
    margin-left: 1.5%
}

#trabalho {
    padding-top: 100px;
    padding-bottom: 90px
}

#trabalho h2 {
    margin-top: 0;
    margin-bottom: 20px;
    line-height: var(--spacing-12)
}

#trabalho .md-container-01>p {
    margin-top: 0;
    margin-bottom: 45px
}

#trabalho .md-container-01>.flex-01 {
    height: 370px;
    margin-bottom: 40px
}

#trabalho div.w50:first-of-type {
    width: 100%
}

#trabalho .flex-01 .bg-primary>div {
    padding-left: 50px;
    padding-right: 75px
}

#trabalho .flex-01 h3 {
    margin-top: 63px;
    margin-bottom: 14px;
    font-size: var(--spacing-13)
}

#trabalho .flex-01 p {
    margin-top: 0;
    margin-bottom: 45px
}

#trabalho .grid-01 {
    row-gap: 30px;
    column-gap: 30px
}

.grid-item {
    padding: 50px 50px 50px 55px;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid rgba(15, 26, 68, .05);
    box-shadow: 2px 2px 10px 0 rgba(15, 26, 68, .05)
}

#trabalho .grid-01 h3 {
    margin-top: 0;
    font-size: var(--spacing-10);
    line-height: var(--spacing-11)
}

.grid-item p {
    margin-bottom: 0
}

.grid-icon-div {
    width: 27%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.grid-icon {
    width: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.grid-icon:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.grid-icon img {
    width: 50%
}

.grid-item>div:last-of-type {
    width: 60.9%
}

.grid-item h3 {
    margin-bottom: 0;
    line-height: var(--spacing-11)
}

.grid-item p {
    line-height: var(--spacing-08);
    margin-top: 21px
}

#grid-exception {
    padding: 40px 100px 40px 55px;
    background-color: var(--secondary);
    color: #fff
}

#grid-exception h3 {
    margin: 0
}

#grid-exception p {
    margin-top: 8px;
    margin-bottom: 35px
}

#grid-exception a {
    color: var(--yellow);
    border-bottom: 2px solid var(--yellow)
}

#apoiar>.container-01 h2 {
    margin-bottom: 35px
}

#apoiar>.container-01 p {
    margin-bottom: 68px
}

#apoiar .grid-02>div:nth-of-type(2) {
    padding: 133px 32% 141px 110px
}

#apoiar .grid-02>div:nth-of-type(2)>div {
    margin-bottom: 18px
}

#apoiar .grid-02>div:nth-of-type(2) h3 {
    margin-top: 0;
    margin-bottom: 4px
}

#apoiar .secondary {
    margin-top: 0;
    margin-bottom: 21px
}

#apoiar .grid-02>div:nth-of-type(2) a {
    margin-top: 39px
}

#apoiar .grid-02>div:nth-of-type(3) {
    padding: 170px 21%
}

#apoiar .grid-02>div:nth-of-type(3)>div h3 {
    margin: 0 0 20px 9px
}

#apoiar .grid-02>div:nth-of-type(3) img {
    width: 49px
}

#apoiar .grid-02>div:nth-of-type(3) p {
    margin-top: 0;
    margin-bottom: 40px
}

#apoiar .info {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center
}

#apoiar .info a {
    width: fit-content
}

#membros .flex-01 {
    padding-top: 125px;
    padding-bottom: 95px;
    align-items: initial
}

#membros .flex-01 h3 {
    margin-top: 0;
    margin-bottom: 5px
}

#membros .w47 {
    padding-right: 9%
}

#membros .w47 p {
    margin-bottom: 50px
}

#membros .w47 a {
    color: var(--primary)
}

#membros .w47 a:hover {
    color: var(--bright)
}

#membros .w53>div:first-of-type {
    padding: 0 5px 0 36px
}

#memberboard {
    display: flex;
    align-items: center
}

#board {
    width: 650px;
    height: 302px;
    display: flex;
    justify-content: center;
    align-items: center
}

.member-column {
    width: 33%;
    height: 100%
}

.member-column ul {
    height: 100%;
    list-style-type: disc;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.member-column li {
    margin-bottom: 8px
}

#venha {
    display: none
}

#parceiros {
    padding-top: 93px;
    padding-bottom: 23px;
    text-align: center
}

#parceiros h2 {
    margin-bottom: 18px
}

#parceiros p {
    margin-top: 0;
    margin-bottom: 30px
}

#partnerCarousel {
    width: 100%;
    height: 124px;
    background-color: #fff;
    margin: 0 auto
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(calc(-250px * 15))
    }
}

.slider {
    background: #fff;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px
}

.slider::after,
.slider::before {
    background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg)
}

.slider::before {
    left: 0;
    top: 0
}

.slider .slide-track {
    animation: scroll 70s linear infinite;
    display: flex;
    width: calc(250px * 15);
    height: 100%;
    align-items: center
}

#donativos .grid-03 {
    padding-top: 80px;
    padding-bottom: 90px
}

.donativo-item:first-of-type {
    background-image: url("../../assets/Hand\ \ \ left.svg");
    background-repeat: no-repeat;
    background-position: right bottom
}

.donativo-item:first-of-type,
.donativo-item:nth-of-type(2) {
    grid-row-start: 1;
    grid-row-end: 3
}

.donativo-item:first-of-type {
    padding: 56px 47px 0 48px
}

.donativo-item:first-of-type h2 {
    font-size: var(--spacing-15);
    line-height: var(--spacing-14)
}

.donativo-item:last-of-type,
.donativo-item:nth-of-type(2),
.donativo-item:nth-of-type(3) {
    background-color: #fff;
    border-radius: 4px;
    padding: 38px 25px 25px 25px;
    box-shadow: 2px 2px 10px 0 rgba(15, 26, 68, .05);
    border: 1px solid rgba(15, 26, 68, .05)
}

.donativo-item:last-of-type {
    grid-column-start: 3
}

.wrapper-01 {
    display: flex;
    flex-direction: column
}

#crowdfunding {
    cursor: pointer;
}

.stretch {
    align-self: stretch;
    justify-self: stretch
}

.wrapper-01>div:first-of-type {
    width: fit-content;
    padding: 11px 23px;
    margin-bottom: 20px
}

.wrapper-01>div:first-of-type p {
    font-weight: 700
}

.wrapper-01 .flex-03 {
    align-items: center;
    padding-left: 22px
}

.wrapper-01 .flex-03>div:last-of-type {
    margin-left: 18px;
    width: 75%
}

.doacao-01 {
    margin-bottom: 20px;
    flex-grow: 1;
    word-break: break-word;
    padding-right: 20px
}

.doacao-icon-div {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.doacao-icon {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%
}

img[src="assets/mbway.png"] {
    width: 70%
}

.doacao-icon:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.doacao-title {
    font-size: var(--spacing-10);
    font-weight: 700
}

.doacao-title-02 {
    font-size: var(--spacing-10);
    font-weight: 700;
    margin: 0 0 19px 0
}

.doacao-subtitle {
    font-size: var(--spacing-09);
    font-weight: 700
}

.doacao-text {
    font-size: var(--spacing-07)
}

.doacao-text-02 {
    line-height: var(--spacing-08)
}

.doacao-text-02:first-of-type {
    margin-bottom: 24px
}

.donativo-item a {
    font-weight: 700;
    border-bottom: 2px solid var(--primary);
    color: var(--primary)
}

#documents {
    height: 700px;
    display: flex
}

#documents>.flex-01 {
    align-self: center;
    width: 100%
}

#documents p {
    margin-bottom: 30px
}

#year__select {
    width: 200px
}

#year__select h3 {
    font-family: Inter, sans-serif;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer
}

.year__set {
    position: absolute;
    width: 100%;
    top: calc(10px + var(--spacing-10));
    left: 0;
    background-color: #fff;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 2px 20px 1px rgba(0, 0, 0, .2);
    display: none
}

.year__set::-webkit-scrollbar {
    width: 10px
}

.year__set::-webkit-scrollbar-thumb {
    width: 5px;
    background-color: #d9d9d9;
    outline: 1px solid #D9D9D9
}

.year__set ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column
}

.year__set li {
    cursor: pointer;
    font-size: var(--spacing-08);
    padding: 10px 0 10px 15px;
    transition: background-color .2s ease-in-out
}

.year__set li.active,
.year__set li:hover {
    background-color: var(--bright)
}

.select__arrow {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    top: 0;
    height: 100%;
    transform: rotate(180deg);
    transition: transform .2s ease-in-out
}

#year__select.active .select__arrow {
    transform: rotate(0)
}

.document__list {
    list-style: disc;
    color: var(--bright);
    display: flex;
    flex-direction: column;
    row-gap: 15px
}

.document__list--element {
    color: var(--bright);
    font-weight: 500;
    font-size: var(--spacing-07);
    height: var(--spacing-08)
}

.document__list--element a {
    color: var(--primary);
    transition: color .2s ease-in-out
}

.document__list--element a:hover {
    color: var(--secondary)
}

#documents>.container-01>div:last-of-type {
    display: flex;
    align-items: center;
    justify-content: center
}

#contactos>.flex-01 {
    padding-top: 142px;
    padding-bottom: 180px
}

#contactos .mapa iframe{
    padding-top: 80px;
}

#mapContainer {
    width: 80%;
    height: 100%;
    position: relative;
    margin: 0 auto
}

.mapRect {
    width: 100%;
    height: 100%;
    position: absolute;
    border-style: solid;
    border-width: 3px;
    border-radius: 8px
}

.mapRect:nth-of-type(2) {
    bottom: 1%;
    left: 1%;
    border-color: var(--yellow);
    z-index: 2
}

.mapRect:nth-of-type(3) {
    bottom: 3%;
    left: 3%;
    border-color: var(--bright);
    z-index: 1
}

#map {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    border-radius: 8px
}

#map canvas {
    width: 100%!important;
    height: 100%!important
}

.marker {
    background-image: url('../../assets/GPS\ Pin.svg');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer
}

#contactos .w53 {
    align-self: stretch
}

#contactos .w47 {
    padding-top: 3px;
    padding-left: 26px;
    align-self: stretch
}

#contactos .w47 h2 {
    margin-top: 0;
    margin-bottom: 25px
}

#contactos .w47>p {
    margin-bottom: 47px
}

#listacontactos {
    display: grid;
    height: 155px;
    grid-template-columns: 35px auto;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 23px;
    row-gap: 25px
}

#listacontactos p:first-of-type {
    font-size: var(--spacing-10)
}

#listacontactos p:last-of-type {
    line-height: var(--spacing-08)
}

#listacontactos div {
    display: flex;
    justify-self: center;
    align-items: center
}

footer {
    padding-bottom: 35px
}

footer nav .flex-01 {
    padding-top: 100px;
    padding-bottom: 45px;
    align-items: center;
    justify-content: space-between
}

#sm-nav {
    display: none
}

footer nav {
    height: fit-content
}

footer hr {
    margin: 0;
    background-color: var(--bright);
    border: 2px solid var(--bright);
    margin-bottom: 55px
}

#socialMedia {
    justify-content: center;
    margin-bottom: 72px
}

#socialMedia>div {
    width: 40px;
    height: 40px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

#socialMedia>div {
    position: relative
}

#socialMedia a {
    position: absolute;
    top: 0;
    left: 0
}

#socialMedia a>img:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none
}

footer>div:last-of-type {
    text-align: center
}

.flex-footer {
    display: flex;
    justify-content: center;
    height: 50px
}

.flex-footer span {
    margin-left: 5px
}

.flex-footer div:first-of-type p {
    margin-top: 16px;
    margin-right: 10px
}

#reclamacao {
    height: 100%
}

#reclamacao img {
    height: 100%
}

.modal {
    display: none;
    position: fixed;
    z-index: 5;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-color: #000;
    background-color: rgba(0, 0, 0, .4)
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    border: 4px solid var(--bright);
    width: 80%;
    height: 75%;
    border-radius: 8px;
    position: relative
}

.modal-content div {
    padding: 10px 21px 10px 20px
}

.modalHeader {
    display: flex;
    align-items: center;
    background-color: var(--primary);
    color: #fff;
    height: 15%;
    border-radius: 3px 3px 0 0
}

.modalHeader * {
    height: fit-content;
    margin: 0
}

.modalBody {
    max-height: 77.7%;
    display: block;
    flex-direction: column;
    justify-content: center;
    height: inherit;
    overflow: auto
}

.modalBody p {
    text-indent: 15px;
    margin-bottom: 12px;
    margin-top: 12px;
    line-height: var(--spacing-09)
}

.modalBody p a {
    color: var(--bright);
    font-weight: bolder;
    text-indent: initial;
    transition: color .2s ease-in-out
}

.modalBody p a:hover {
    color: var(--primary)
}

.modal strong {
    color: var(--secondary)
}

.close {
    color: var(--bright);
    font-weight: 700;
    right: 20px;
    top: 10px;
    font-size: 62px;
    position: absolute;
    transition: color .2s linear
}

.close:focus,
.close:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

#myModal2 .modal-content {
    background-color: var(--primary);
    color: #fff
}

#myModal2 .modalBody {
    height: 78%
}

#myModal2 .member-column {
    height: auto;
    margin: auto
}


@media screen and (min-width:650px) and (max-width:768px) {
    #mobileNav {
        right: 8.5vw
    }
}

@media screen and (max-width:768px) {
    .container-01 {
        margin: 0 24px
    }
    .sm-container-01 {
        margin: 0 24px
    }
    .grid-01 {
        padding-left: 24px;
        padding-right: 24px
    }
    .grid-item {
        flex-direction: column
    }
    .grid-icon-div {
        width: 100%;
        height: 128px
    }
    .grid-icon {
        width: 25%
    }
    .grid-item>div:last-of-type {
        width: 100%
    }
    #sm-grid-exception {
        padding: 40px 24px 40px 24px
    }
    #trabalho .flex-01 .bg-primary>div {
        padding-left: 24px;
        padding-right: 24px
    }
    #trabalho .grid-01 h3 {
        margin-top: 5%
    }
    #apoiar .grid-02>div:nth-of-type(2) {
        padding-left: 24px;
        padding-right: 24px
    }
    #apoiar .grid-02>div:nth-of-type(3) {
        padding-left: 24px;
        padding-right: 24px
    }
    .grid-03 {
        height: auto;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto
    }
    #donativos .grid-03>* {
        grid-row-start: unset;
        grid-column-start: unset;
        grid-row-end: unset
    }
    .donativo-item:last-of-type,
    .donativo-item:nth-of-type(2),
    .donativo-item:nth-of-type(3) {
        margin-left: 24px;
        margin-right: 24px
    }
    .mapRect {
        display: none
    }
}

@media screen and (min-width:769px) and (max-width:993px) {
    .container-01 {
        margin: 0 calc(100vw - 91%)
    }
    .sm-container-01 {
        margin: 0 calc(100vw - 91%)
    }
    #mobileNav {
        right: 7vw
    }
    #valores .lg-flex-01 {
        padding-top: 4%
    }
    #valores .md-w50:first-of-type {
        width: 80%;
        margin-left: auto;
        margin-right: auto
    }
    #valores .relative>img:first-of-type {
        bottom: 0
    }
    #trabalho .flex-01 .bg-primary>div {
        padding-left: calc(100vw - 91%);
        padding-right: calc(100vw - 91%)
    }
    .grid-01 {
        padding-left: calc(100vw - 91%);
        padding-right: calc(100vw - 91%)
    }
    #sm-grid-exception {
        padding: 40px calc(100vw - 91%) 40px calc(100vw - 91%)
    }
    #apoiar .grid-02>div:nth-of-type(2) {
        padding-left: calc(100vw - 91%);
        padding-right: calc(100vw - 91%)
    }
    #apoiar .grid-02>div:nth-of-type(3) {
        padding-left: calc(100vw - 91%);
        padding-right: calc(100vw - 91%)
    }
    .donativo-item:nth-of-type(2) {
        margin-left: 85px
    }
    .donativo-item:nth-of-type(3) {
        margin-right: 85px
    }
    .donativo-item:last-of-type {
        margin-right: 85px
    }
}

@media screen and (min-width:769px) and (max-width:1199px) {
    header img.sm-show {
        right: -5%;
        margin-bottom: 0
    }
    header img.sm-show:first-of-type {
        height: 225px
    }
    header img.sm-show:last-of-type {
        height: 285px
    }
    #donativos .grid-03 {
        height: unset;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto
    }
    .donativo-item:first-of-type {
        grid-row-start: unset;
        height: 360px;
        grid-column-end: 3;
        grid-column-start: 1;
        grid-row-end: 1
    }
    .donativo-item:nth-of-type(2) {
        grid-column-start: 1;
        grid-row-start: 1;
        grid-row-end: 3
    }
    .donativo-item:nth-of-type(3) {
        grid-row-start: 1;
        grid-column-start: 2
    }
    .donativo-item:last-of-type {
        grid-row-start: 2;
        grid-column-start: 2
    }
    .grid-icon {
        width: 70%
    }
    .grid-item h3 {
        margin-top: 0
    }
}

@media screen and (max-width:993px) {
    .sm-none {
        display: none!important
    }
    .sm-show {
        display: block
    }
    #mobileNav {
        display: block;
        opacity: 0;
        position: absolute;
        top: 30px;
        z-index: 3
    }
    #mobileNav img {
        width: 9vw;
        max-width: 45px
    }
    header .sm-show {
        margin-bottom: 22px
    }
    header {
        height: 712px
    }
    header>div {
        height: 712px;
        padding-bottom: 50px
    }
    header img {
        width: 35%
    }
    header>div>div:first-of-type {
        width: 100%;
        padding-right: 7%;
        justify-content: flex-start
    }
    header>div>div:first-of-type>div {
        margin-left: 0
    }
    #valores {
        height: auto
    }
    #valores>div {
        padding-top: 27%;
        padding-bottom: 14%
    }
    #valores .frame {
        margin-left: 0;
        margin-right: 0
    }
    #valores .md-w50:first-of-type div {
        width: 100%;
        height: 46vw
    }
    #valores .md-w50:first-of-type img:first-of-type {
        width: 80%
    }
    #valores .md-w50:first-of-type img:last-of-type {
        width: 80%;
        right: 0;
        height: auto
    }
    #valores .md-w50:last-of-type {
        margin-top: 35px
    }
    #valores .md-w50:last-of-type>div {
        padding-left: 0;
        padding-right: 0
    }
    .grid-01 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto
    }
    .sm-w100 {
        width: 100%!important
    }
    #trabalho .md-container-01>.flex-01 {
        flex-wrap: wrap;
        height: auto
    }
    #trabalho .flex-01>div:first-of-type {
        height: 385px
    }
    #trabalho .flex-01 a {
        margin-bottom: 55px
    }
    .grid-02 {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto
    }
    .grid-02>div:first-of-type,
    .grid-02>div:last-of-type {
        height: 400px
    }
    .grid-02>div:last-of-type {
        grid-row-start: 3
    }
    .grid-02 a {
        align-self: center
    }
    .grid-item {
        justify-content: left;
        padding-left: 26px;
        padding-right: 26px
    }
    .grid-item p {
        margin-bottom: 0
    }
    #grid-exception {
        display: none
    }
    #sm-grid-exception {
        background-color: var(--secondary);
        color: #fff
    }
    #sm-grid-exception p {
        margin-top: 8px;
        margin-bottom: 35px
    }
    #sm-grid-exception a {
        color: var(--yellow);
        border-bottom: 2px solid var(--yellow)
    }
    #apoiar p {
        line-height: var(--spacing-08)
    }
    #apoiar .grid-02>div:nth-of-type(2) {
        text-align: center
    }
    #apoiar .grid-02>div:nth-of-type(2) p:nth-of-type(2) {
        text-align: left
    }
    #apoiar .grid-02>div:nth-of-type(3) {
        text-align: center
    }
    #apoiar .flex-03 {
        display: initial
    }
    #apoiar .grid-02>div:nth-of-type(3) img {
        width: 14%
    }
    #apoiar .grid-02>div:nth-of-type(3) p {
        text-align: left
    }
    #membros .flex-01 {
        padding-top: 58px;
        padding-bottom: 40px;
        align-items: initial
    }
    #membros .w47 {
        width: initial!important;
        padding: 0;
        text-align: center
    }
    #membros * {
        text-align: left
    }
    #membros a {
        text-align: center
    }
    #membros .w47 a:last-of-type {
        color: var(--yellow);
        border-bottom: 2px solid var(--yellow);
        margin-top: 16px
    }
    #venha {
        display: inline-block
    }
    #membros .w53 {
        display: none
    }
    #parceiros p {
        text-align: left
    }
    .donativo-item:first-of-type {
        padding-right: 150px
    }
    .donativo-item:last-of-type {
        grid-column-start: initial
    }
    .doacao-01 {
        margin-bottom: 20px;
        flex-grow: 1;
        height: 150px
    }
    .doacao-icon {
        width: 100px
    }
    #contactos>.flex-01 {
        flex-wrap: wrap;
        flex-direction: column;
        padding: 45px 0
    }
    .blank {
        width: 100%;
        height: 379px;
        margin: auto;
        border-radius: 8px
    }
    #contactos .w53 {
        width: 100%!important;
        order: 2;
        margin-top: 58px
    }
    #mapContainer {
        width: 100%;
        height: 400px
    }
    #contactos .w47 {
        width: 100%!important;
        padding: 0
    }
    #contactos .mapa iframe{
        padding-top: 0px;
    }
}

@media screen and (max-width:1056px) {
    footer nav>.flex-01 {
        display: none
    }
    #sm-nav {
        display: block;
        padding-top: 50px
    }
    footer nav .flex-01 {
        padding-top: 100px;
        padding-bottom: 45px;
        align-items: center;
        justify-content: space-between
    }
    #sm-nav>div:first-of-type {
        text-align: left
    }
    #sm-nav>ul {
        display: grid;
        text-align: left;
        grid-template-columns: 45% auto;
        grid-template-rows: auto auto auto auto;
        row-gap: 20px;
        padding-top: 30px;
        margin-bottom: 50px
    }
}

@media screen and (min-width:993px) and (max-width:1200px) {
    .blank {
        margin: 0;
        width: 95%
    }
    #maoEsquerda {
        width: 18vw
    }
    #maoDireita {
        width: 18vw
    }
}

@media screen and (min-width:993px) and (max-width:1310px) {
    #apoiar .grid-02>div:nth-of-type(3) img {
        margin-top: 15px
    }
}

@media screen and (min-width:993px) and (max-width:1400px) {
    #loosePhoto {
        right: calc(30vw - 81%)
    }
    header .container-01 {
        padding-top: calc(100vw - 98%)
    }
    header>div>div:first-of-type>div {
        width: auto;
        margin-left: 0
    }
    #imgHeader {
        width: 95%
    }
    #valores>lg-flex-01 {
        height: 100%;
        padding: 0
    }
    #valores .md-w50:last-of-type {
        height: auto
    }
    #trabalho .md-container-01>.flex-01 {
        height: auto
    }
    #trabalho .flex-01 a {
        margin-bottom: 50px
    }
    #trabalho .md-container-01>.flex-01>.md-w50 {
        align-self: stretch;
        height: auto
    }
    .grid-item {
        flex-direction: column;
        padding: 50px;
        justify-content: unset
    }
    .grid-icon-div {
        width: 50%;
        height: unset
    }
    .grid-item>div:last-of-type {
        width: unset;
        margin-top: 30px
    }
    #trabalho .grid-01 h3 {
        text-align: center
    }
    #grid-exception h3 {
        text-align: unset!important
    }
}

@media screen and (min-width:993px) {
    .lg-flex-01 {
        display: flex;
        justify-content: space-evenly;
        align-items: center
    }
    .md-flex-01 {
        display: flex;
        justify-content: space-evenly;
        align-items: center
    }
    .md-w50 {
        width: 50%!important
    }
    .md-h100 {
        height: 100%
    }
    .md-container-01 {
        margin: 0 9%
    }
    #sm-grid-exception {
        display: none
    }
    #mNav {
        display: none!important
    }
}

@media screen and (min-width:1560px) {
     :root {
        font-size: 20px
    }
}

@media screen and (max-width:1400px) {
    #happy,
    #like {
        display: none
    }
}

@media screen and (max-width:650px) {
    header img.sm-show {
        right: 0
    }
    header {
        height: inherit!important
    }
    #donativos .grid-03>div:first-of-type {
        height: 560px
    }
    #mobileNav {
        right: 7vw
    }
    #firstButton {
        margin-bottom: 10px
    }
    #myModal2 h2 {
        font-size: 25px
    }
    #myModal2 .member-column {
        padding: 0;
        width: 100%
    }
    .member-column ul {
        padding-left: 18px
    }
}