html,body{
    margin:0;
    position:relative
}

html{
    --gold: rgba(190, 143, 3, 1)
}
.home-overlay{
    width:100vw;
    height:120vh;
    background:#000;
    position:absolute;
    top:0;
    z-index:-2;
    overflow:hidden;
    background-image:url(/assets/fabrictexture.png)
}
.home-overlay>div{
    width:100vw;
    height:inherit;
    mix-blend-mode:soft-light;
    opacity:.46;
    background:radial-gradient(70.34% 21.39% at 82.21% 58.17%,#053259,#001a37),linear-gradient(180deg,#0000 43.12%,#001126 102.44%)
}
header{
    width:100vw;
    height:15vh;
    display:flex;
    margig-left:5vw;
    margig-right:5vw;
    justify-content:space-around;
    border-width:0;
    border-style:solid;
    border-color:#aaaaaa0f;
    border-bottom-width:3px
}
header>section{
    flex:.1;
    height:100%
}
header>nav{
    flex:.6;
    height:100%
}
body > section, body > section > section, body > section > section > section{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
main{
    display:flex;
    flex-direction:row;
    width:100vw;
    min-height:20vh
}
nav{
    display:flex;
    justify-content:space-around;
    align-items:center
}
nav>a{
    color:#fff
}
.space{
    margin:1vmax
}
.space:is(.p1){
    margin:2vmax
}
.space:is(.p2){
    margin:4vmax
}
.space:is(.p3){
    margin:8vmax
}
blockquote{
    text-transform:uppercase;
    border-color:var(--gold);
    border-width:0;
    border-style:solid;
    border-left-width:4px;
    padding-left:1rem
}
#hero{
    position:absolute;
    right:-10vw;
    top:-22vh;
    scale:.7
}
#s0{
    align-items:baseline;
    color:#fff;
    padding-left:2vw
}
@media(min-width:500px){
    #s0>p,#s0>h1,#s0>h2{
        max-width:50vw
    }
}
@media(max-width:500px){
    #s0>p,#s0>h1,#s0>h2{
        max-width:80vw
    }
}
.glist{
    display:flex;
    border-color:var(--gold);
    border-width:1px;
    border-style:solid;
    border-left-width:0;
    border-right-width:0
}
.gold{
    color:var(--gold)
}
.bgold{
    border-radius:10px;
    border-style:solid;
    border-color:var(--gold);
    border-width:1px;
    box-shadow:0 4px 6.3px #00000029;
    text-transform:uppercase;
    background:linear-gradient(95.34deg,#dfae1c -7.86%,#be8f03 22.62%,#936818 103.37%);
    color:#fff;
    padding:.5rem;
    margin-right:1vmax
}
.opaque{
    background:transparent!important
}
#s1{
    margin-left:auto;
    margin-right:auto;
    width:90vw;
    height:60vh;
    background:radial-gradient(61.34% 167.46% at 80.06% 53.88%,#256ca9,#012d54 35.58%,#00203c);
    border:2px solid;
    border-color:#001f3c;
    border-radius:1rem;
    border-style:solid;
    padding:1vmax;
    color:#fff
}
#s1>section{
    width:100%;
    height:45vh;
    margin:2vmax;
    flex-direction:row;
    justify-content:space-evenly
}
#s1>section>div>ul,#s1>section>div>ul>li{
    padding:0;
    margin-left:.5vmax
}
#s1>section>div{
    width:max-content;
    padding:2vmax;
    min-height:35vh;
    border:2px solid rgba(8,62,113,1);
    background:#03305b7a;
    padding-top:0
}
#d3{
    background:transparent!important;
    border:transparent!important
}
#d3>p{
    font-size:large;
    max-width:23vw
}
.light{
    color:#000;
    align-items:baseline;
    padding-left:2vmax
}
.light>h1{
    color:#053259
}
#s2{
    overflow-x:hidden
}
#s2>main,#s2>main>section{
    gap:1rem;
    justify-content:space-between;
    align-items:center;
    width:100vw!important;
    height:40vh;
    max-width:100vw;
    overflow-x:hidden
}
#s2>main>section{
    position:relative;
    left:0;
    width:100%;
    max-width:100vw;
    height:40vh;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:1rem;
    overflow-x:hidden
}
#gold-awesome-thing>*{
    max-width:75%;
    color:#fff;
    margin-top:1rem;
    margin-bottom:0
}
#gold-awesome-thing>ul{
    margin:0
}
#s2>main>section>section{
    height:100%;
    display:flex;
    flex-direction:row;
    gap:1rem
}
#s2>main>section>section>div{
    height:100%;
    width:17vw;
    height:30vh;
    border-style:solid;
    border-color:gray;
    border-radius:1rem;
    border-width:1px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:.2rem;
    padding:1rem
}
#s2>main>section>section>div>img{
    aspect-ratio:1/1;
    width:5vw
}
#s2>main>section>section>div>div{
    width:90%;
    height:1px;
    background:#000000f0
}
#gold-awesome-thing{
    flex-shrink:0!important;
    width:30vw!important;
    height:40vh!important;
    background:linear-gradient(180deg,#d39f46,#9d6f18);
    border-top-left-radius:1rem!important;
    border-bottom-left-radius:1rem!important;
    padding:0 1rem;
    align-items:baseline;
    justify-content:left;
    flex-direction:column!important;
    display:flex
}
#arrowright{
    aspect-ratio:.5/1;
    width:2vmax
}
#s3{
    width:100vw;
    display:flex!important;
    flex-direction:row!important;
    gap:1vmax;
    margin-left:auto;
    margin-right:auto;
    margin-top:2vmax
}
#s3>div{
    display:flex!important;
    flex-direction:row!important;
    justify-content:space-evenly;
    padding:1vmin;
    gap:1vmin
}
#s4{
    margin-top:5vmax;
    background:radial-gradient(61.34% 167.46% at 80.06% 53.88%,#256ca9,#012d54 35.58%,#00203c);
    width:100vw;
    height:110vh;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center
}
#s4>h1{
    margin-top:0
}
#s4>main{
    display:flex;
    justify-content:center;
    gap:1rem
}
#s4>main>div{
    background:#03305b7a;
    width:15vw;
    height:70vh;
    border-radius:1rem;
    padding:1.25rem
}
#s4>main>div>div{
    display:flex;
    flex-direction:column
}
#s4>main>div>div{
    gap:1rem
}
#s4>main>div>div>b{
    font-weight:bolder
}
#s4>main>div>div:first-child{
    border-style:solid;
    border-width:0;
    border-bottom-width:1px;
    border-color:var(--gold);
    padding-bottom:1rem
}
#s4>main>div>div>img{
    aspect-ratio:1/1;
    width:5vmax
}
#s4>a{
    margin-top:2vmax;
    padding-left:1vmax;
    padding-right:1vmax
}
.simbol{
    width:7vmax;
    height:7vmax;
    aspect-ratio:1/1;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-self:start;
    transform:translateY(5vh);
    z-index:-2
}
.simbol>*{
    background:linear-gradient(180deg,#9d6f18,#d39f46);
    border-radius:1vmin
}
.simbol>#a{
    width:3vmax!important;
    height:3vmax!important;
    left:0!important;
    top:0!important
}
.simbol>#b{
    width:4vmax!important;
    height:4vmax!important;
    right:0!important;
    bottom:0!important;
    align-self:end
}
.inverse{
    transform:rotateY(180deg) translateY(-10vh);
    align-self:end
}
#sl{
    padding:0 5vw
}
#sl>main{
    padding:0 5vw;
    background-image:url(/assets/maturidade-documental.png);
    background-size:cover;
    position:absolute;
    border-radius:1.5vmax;
    border:2px solid;
    overflow:hidden;
    border-color:#647686;
    display:flex;
    flex-direction:column;
    color:#fff
}
#sl>main>p{
    margin:1rem auto
}
#sl>main>h1{
    margin:1rem auto 0;
    width:100%;
    text-align:left
}
#sl>main>section{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    height:30vh;
    gap:1rem
}
#sl>main>section>div{
    border:2px solid rgba(8,62,113,1);
    background:#03305b7a;
    width:23vw;
    height:100%!important
}
#sl>main>section>div{
    display:flex;
    flex-direction:column;
    flex-direction:center;
    align-content:center;
    border-radius:1vmax
}
#sl>main>section>div>*{
    margin:0 auto
}
#sl>main>section>div>*{
    width:80%;
    overflow:hidden
}
#sl>main>section>div>h2{
    margin-top:1vmin
}
#sl>main>section>div>ul{
    padding-left:10%
}
#sl>main>section>div>h1,#sl>main>section>div>h2{
    color:#d39f46
}
#main-size,#sl>main{
    width:70vw;
    height:55vh;
    padding:0 5vw
}
body>p,body>h3{
    margin:0 auto;
    text-align:center;
    font-size:xx-large;
    color:#053259
}
#e{
    margin-top:5vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:center
}
a{
    text-decoration:none
}
.separator{
    width:1vmin;
    height:1vmin;
    border-radius:1vmin;
    margin:auto 5px;
    background:var(--gold);
    aspect-ratio:1/1
}
@media(max-width:768px){
    #s4{
        margin-top:2rem;
        padding:1.5rem .5rem;
        height:200vh;
        min-height:max-content!important
    }
    #s4>main{
        flex-direction:column;
        align-items:center
    }
    #s4>main>div{
        max-width:90%;
        min-width:unset;
        width:90%;
        min-height:auto
    }
    #s4>main>div>div>img{
        width:10vmax
    }
}
@media(min-width:500px){
    h1{
        font-size:1.7rem
    }
    h2{
        font-size:1.2rem
    }
}
@media(max-width:500px){
    #s2>main{
        display:flex;
        flex-direction:column;
        height:max-content!important;
        width:max-content!important;
        margin-left:auto;
        margin-right:auto
    }
    #s2>main>section>img{
        transform:rotate(90deg)
    }
    h1{
        max-width:80%
    }
    #gold-awesome-thing{
        border-radius:1rem;
        padding:1rem!important;
        height:45vh!important
    }
    #gold-awesome-thing>ul{
        padding-left:1rem
    }
    #gold-awesome-thing>ul>*{
        width:inherit
    }
    #s2>main>section{
        position:static;
        display:flex;
        flex-direction:column;
        height:max-content;
        justify-items:left;
        overflow:hidden;
        width:max-content!important
    }
    #s2>main>section>section{
        flex-direction:column;
        justify-content:left!important;
        width:max-content!important;
        align-items:baseline!important
    }
    #s2>main>section>section>*{
        width:50vw!important;
        height:20vh!important
    }
    #s3{
        display:flex!important;
        flex-direction:column!important;
        gap:1vmax;
        margin-left:auto;
        margin-right:auto;
        margin-top:2vmax
    }
    #s3>div{
        display:flex;
        flex-direction:column;
        justify-content:left;
        padding:1vmin;
        gap:1vmin;
        border:none!important
    }
    #hero{
        position:absolute;
        right:-60vw;
        top:10vh;
        scale:.5;
        opacity:.5
    }
    nav{
        display:none
    }
    .home-overlay{
        height:120vh
    }
    h1{
        font-size:1.3rem
    }
    h2{
        font-size:1rem
    }
    #s0>div{
        display:flex;
        flex-direction:column;
        gap:1vmax
    }
    .glist{
        flex-direction:column;
        gap:1px;
        margin-left:auto;
        margin-right:auto;
        padding:1rem
    }
    .glist>*{
        margin:0;
        text-align:center
    }
    .glist>.separator{
        display:none
    }
    #s1>section{
        flex-direction:column!important;
        height:max-content!important;
        gap:1rem
    }
    #s1>h1{
        text-align:center
    }
    #s1>section>div{
        min-height:1px!important;
        width:90%!important
    }
    #d3>p{
        max-width:100vw
    }
    #s1{
        height:max-content!important;
        background:#012d54
    }
    #esq{
        display:none
    }
    #sl>main>section{
        flex-direction:column;
        overflow-y:auto
    }
    #sl>main>section>*{
        width:100%!important;
        height:max-content!important
    }
    .simbol{
        display:none
    }
}