@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;
    background-color: #F6FFFE;
}

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

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

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 {
    display: flex;
}

.column {
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

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

.c-white {
    color: #fff;
}

.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
}

.w70 {
    width: 70%!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
}

.p-13 {
    padding: var(--spacing-13)
}

.mb-6 {
    margin-bottom: var(--spacing-06);
}

.mb-8 {
    margin-bottom: var(--spacing-08);
}

.mb-13 {
    margin-bottom: var(--spacing-13);
}

.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
}

#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)
}


/* SECTIONS */

#objectives {
    height: 870px;
}

#objectives .container-01 {
    height: 100%;
}

.white-gradient {
    background: linear-gradient(90deg, #F6FFFE 53.72%, rgba(246, 256, 254, 0.95) 92.05%, rgba(246, 255, 254, 0) 98%)
}

#objectives h2 {
    margin: 0;
    line-height: var(--spacing-13);
}

#left-card {
    z-index: 2;
}

#left-card .card-header {
    column-gap: var(--spacing-05);
}

#left-card p {
    line-height: var(--spacing-10);
}

#objective-slider-container {
    padding: 100px 0
}

#objective-slider-container .prev {
    transform: rotate(90deg);
    width: 35px;
    height: 35px
}

#objective-slider-container .next {
    transform: rotate(-90deg);
    width: 35px;
    height: 35px
}

#objective-slider {
    padding-bottom: 2%;
    height: 635px;
    width: 100%;
    position: relative;
}

#movable {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    padding-left: 23px;
    transition: left 0.2s ease-in-out
}

#objective-controls {
    width: 65%;
}

.objective-card {
    background-color: var(--primary);
    color: var(--bright);
    border-radius: 10px;
    margin-left: 70px;
    width: 390px;
    height: 400px;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out
}

.objective-card h3 {
    color: var(--white);
}

.objective-card.active {
    width: 470px;
    height: 600px;
    opacity: 1;
    transition: opacity 0.15s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out
}

.objective-header {
    height: 40%;
    width: 100%;
}

.objective-header img {
    border-radius: 10px 10px 0 0;
}

.objective-content {
    padding: 3.33% 8.51% 8.33% 8.51%;
}

.objective-content h3 {
    margin-top: 0;
}

.objective-text {
    opacity: 0;
    transition: opacity 0.05s ease-in-out
}

.objective-card.active .objective-text {
    opacity: 1;
    transition: opacity 0.5s ease-in-out
}

.objective-content p {
    line-height: var(--spacing-08);
}

.stats-row {
    display: flex;
}

.stats-row>div {
    width: 50%;
    height: 630px;
    box-sizing: border-box;
}

.stats-row>div.text {
    padding-left: 5rem;
}

#family {
    width: 80px;
    height: 80px;
}

#rising {
    width: 100px;
}

#likes {
    margin-left: 50%;
    width: 143px;
}

.stats-row h2.exception {
    font-size: var(--spacing-12);
    margin-bottom: var(--spacing-10);
}

.f-100 {
    font-size: 80px;
    font-weight: 500;
    margin-left: 11px;
}

.percentage {
    font-weight: 700;
    font-size: 50px
}


/* #stats h2 {
    margin-bottom: 0;
} */


/*END SECTIONS */

#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
}

#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
    }
    .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
    }
    .grid-01 {
        padding-left: calc(100vw - 91%);
        padding-right: calc(100vw - 91%)
    }
    #sm-grid-exception {
        padding: 40px calc(100vw - 91%) 40px 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) {
    #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: 900px
    }
    #main-header {
        flex-direction: column;
    }
    #main-header>div:first-of-type {
        width: auto;
        height: 400px;
        padding: 0;
        margin: 0;
    }
    #main-header>div:last-of-type {
        width: 100%;
    }
    #main-header img {
        object-fit: contain;
        width: 100%;
    }
    .grid-01 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto
    }
    .sm-w100 {
        width: 100%!important
    }
    .stats-row {
        flex-direction: column;
    }
    .stats-row>div {
        width: 100%;
        height: 500px;
    }
    .stats-row:nth-of-type(2n)>div:first-of-type {
        order: 2;
    }
    .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
    }
    #donativos .grid-03{
        padding-top: 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)
    }
    .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
    }
}

@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%
    }
    .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: 1201px) and (max-width: 1500px) {
    #objective-slider-container {
        width: 600px!important;
    }
    .objective-card:first-of-type {
        margin-left: 40px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1350px) {
    .objective-card:first-of-type {
        margin-left: 24px;
    }
    .objective-card {
        margin-left: 64px;
    }
}

@media screen and (max-width:1200px) {
    #objectives,
    #objective-slider {
        height: auto;
    }
    #donation-button {
        text-align: center;
    }
    #donation-button a {
        font-size: var(--spacing-08);
    }
    #objectives>.container-01 {
        flex-direction: column
    }
    #objectives .p-13 {
        padding: var(--spacing-13) 0;
    }
    #objectives>.container-01>div {
        width: 100%!important;
    }
    #movable {
        padding-left: 0;
        width: 100%;
        position: initial;
        flex-direction: column;
        row-gap: 50px;
        justify-content: space-between;
    }
    .objective-card {
        width: 100%!important;
        height: auto!important;
        margin-left: 0;
    }
    #objective-controls {
        display: none;
    }
    .objective-header {
        height: 400px;
    }
    .objective-text {
        opacity: 1;
    }
    #family-text {
        width: 90%;
    }
}

@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
    }
    #main-header {
        max-width: 1350px;
    }
    #donation-button {
        text-align: center;
    }
    #donation-button a {
        font-size: var(--spacing-08);
    }
    #objectives {
        height: auto;
    }
    #objectives>.container-01 {
        flex-direction: column
    }
    #objectives>.container-01>div {
        width: 100%!important;
    }
    #movable {
        padding-left: 0;
        width: 100%;
        position: initial;
        justify-content: space-between;
    }
    .objective-card {
        width: 450px;
        height: 800px!important;
        margin: 0;
    }
    .objective-card h3 {
        font-size: var(--spacing-07)
    }
    .objective-text {
        opacity: 1;
    }
    #objective-controls {
        display: none;
    }
    #family-text {
        width: 80%;
    }
}

@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
    }
    .stats-row>div.text{
        padding-left: 4rem;
    }
    #taxa-sucesso {
        flex-direction: column;
    }
    #taxa-sucesso h2{
        margin-bottom: 0;
    }
    .doacao-subtitle{
        font-size: var(--spacing-07);
    }
    #myModal2 h2 {
        font-size: 25px
    }
    #myModal2 .member-column {
        padding: 0;
        width: 100%
    }
    .member-column ul {
        padding-left: 18px
    }
}