@import url(https://fonts.googleapis.com/css2?family=Muli:wght@400;500;600;700&display=swap);

#cctt #vis1,
#iidd #vis1,
#llgg,
#p1 h2,
#p404 #vis1,
#ppqq #vis1,
#search-input,
#ttll #vis1,
#ttmm #vis1,
.dark,
a,
header a {
    color: var(--pt)
}#dsds:hover{
    background-image: linear-gradient(to right, rgb(30, 118, 150),#00366e);
    transition: .3s;
}#dsds
{background-image: linear-gradient(to right, rgb(37, 150, 190),#004a98);}
#Times,
#content,
#gtc,
#main4,
#myBtnContainer,
#sbar,
.bg3,
.bg5,
.bg8,
.bg8 a,
.btn.active img,
.ops,
.talents,
.teamflex,
.tlchild a div,
.tlft,
footer,
#Times .displayflex {
    box-shadow: var(--box)
}

#bg2,
#main4,
#vis1,
#Times .displayflex,
.tlchild a div {
    background: var(--css)
}

#Team,
#Times,
#Times .displayflex,
#set,
.AA,
.A_A,
.A_A1,
.agfd,
.divel .divp,
.divp:hover div,
.fxx,
.talentsflex,
.tlchild,
.tlchild0,
.tlft,
footer nav {
    display: flex
}

*,
body {
    margin: 0
}

#Team,
#Times,
#main4,
#sbar,
#set,
#tlA,
#tlB,
#tlC,
#tlD,
#tlS,
#tlSS,
.agbox,
.bg5,
.bg8,
.dpflex3,
.talents,
.teamflex,
.tlchild a div,
.tlft {
    border-radius: 5px
}

#main2,
#pers,
#tierlistbox a,
.agp,
.displayflex a,
.divp a,
.gth,
.teamflex a,
header {
    position: relative
}

#bkg,
#nome,
#p1 a img:nth-last-child(3),
#pers #imgg,
.ball,
.displayflex i,
.divel,
.divp a i,
.divp div,
.gth div,
.tlchild a div {
    position: absolute
}

#header-content,
header {
    display: flex;
    margin-bottom: 0
}#sdads{
    color: rgb(97, 97, 97);
}.dark #sdads{color:rgba(255, 255, 255, 0.856);}
#llgg div{color: rgb(97, 97, 97);}
.dark #llgg div{color: white;}
#bkg,
#nome {
    left: 15px;
    color: #f5f5f5;
    bottom: 15px
}

#Team .teamflex div:last-of-type,
#Times .displayflex,
#bg2,
#header-content,
#nome,
#p1 a,
#pers .titulos3,
#tierlistbox a,
.bg5,
.bgun,
.center,
.cookieConsentContainer .cookieButton div,
.displayflex h2,
.rollx a,
.rollx h3,
.talents h3:first-of-type,
.teamflex {
    text-align: center
}

#Times .displayflex h3 {
    font-size: min(17px, 3.3334vw);
    white-space: nowrap;
}

#Times .displayflex p {
    font-size: min(15px, 4vw);
}

.displayflex p {
    display: inline-block;
    opacity: 0.85;
    font-size: min(13px, 3.1vw);
}

.timesp p,
#timesp p {
    line-height: 1.5em;
}

#bhh,
.ball,
.dark .ball,
.divp .sieta,
header #llgg:hover {
    transition: .3s
}

#Times,
#main2,
.bg3,
.bg8 {
    padding: 20px
}


#main2,
#main4 {
    max-width: 1250px;
    min-width: 200px
}

#main2,
#main4,
.A_A,
.bg8,
.dpflex3 {
    margin: auto
}

#main4,
#p1,
#txt,
.divel .divp {
    text-align: justify
}

#imgg {
    right: 3%;
    margin-left: 1px;
    top: 80px;
    display: block
}

#p1 a,
#txt {
    vertical-align: top
}

#dsds,
#p1 a,
.tlft {
    overflow: hidden
}
#bg2{
    padding: 40px 0
}
header {
    padding: 25px 0
}

#pers,
#vis1 {
    text-align: right
}

#dpflex2,
.bg8 a {
    padding: 5px
}

.dpflex3,
a {
    text-decoration: none
}

#set,
.A_A1 a div {
    margin-top: 5px
}

#llgg,
.A_A,
.A_A1,
.titulos2,
.tlchild a div,
.tlchild0 {
    font-weight: 700
}

.btn{
    cursor: pointer
}

:root {
    --css: #fcfcfc;
    --background: #fff;
    --line: rgba(0, 0, 0, 0.212);
    --dest: #1953be;
    --pt: #424346;
    --box: rgba(0, 0, 0, 0.568) 0 0 2px
}

#Times,
#dpflex2,
#set,
.bg5,
.bg8,
.dpflex3,
.golden,
.pink,
.purple,
.teamflex,
.tlft,
body {
    background: var(--background)
}

* {
    box-sizing: border-box;
    padding: 0
}

#dendro {
    --dest: #92e978;
}

.dark#dendro {
    --dest: #3f7a0c
}

#cryo {
    --dest: #b0e0f3;
}

.dark#cryo {
    --dest: #3e91aa
}

#hydro {
    --dest: #76b1ff;
}

.dark#hydro {
    --dest: #0c4c9b;
}

#pyro {
    --dest: #ff755d
}

.dark#pyro {
    --dest: #b6453b
}

#geo {
    --dest: #ffda76
}

.dark#geo {
    --dest: #8f7538
}

#electro {
    --dest: #c897ff;
}

.dark#electro {
    --dest: #580483;
}

#anemo {
    --dest: #a0e0cd
}

.dark#anemo {
    --dest: #157a6f
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    font-family: 'Muli', sans-serif;
    color: var(--pt);
    font-size: min(20px, 4.2vw)
}

.tlchild {
    gap: 10px;
    padding: 15px 10px;
    flex-wrap: wrap;
    justify-content: center
}

.tlchild a div {
    right: -5px;
    top: 0;
    padding: 1px 5px
}

.A_A,
.A_A1,
.bg3 {
    overflow-x: auto
}

.tlchild0 {
    color: #000;
    font-size: min(20px, 5vw);
    min-width: 60px;
    justify-content: center;
    align-items: center
}

#vis1,
.bg5 h2,
.talents b,
header #llgg:hover {
    color: var(--dest)
}

.ponto {
    visibility: hidden
}

h1 {
    font-size: min(28.6px, 7vw);
}

header {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    font-size: min(18px, 5vw);
    background-color: var(--css);
    padding-right: 10%;
    justify-content: flex-end
}

#header-content {
    justify-content:flex-end;
    gap: 40px;
    align-items: center;
    z-index: 2
}


#Domingo,
#QuartaM,
#Quinta,
#SegundaM,
#Sexta,
#Sábado,
#TerçaM,
#bbg,
#btt,
#ex,
#ff,
#ib,
#vis1,
.Quarta,
.Segunda,
.Terça,
.bg2 input,
.dark #iw,
.dark .btn.active #ib,
.dark .dsss2,
.dsss,
.filterDiv,
.gth div,
.topnav,
.topnav #myLinks,
header input {
    display: none
}

#Sss,
#dpflex2,
#llgg,
#main4 .bg5,
#sbar,
#txt,
.ball,
.dark #ib,
.dark .dsss,
.dsss2,
.fd,
.mc2,
.rollx a,
.show,
.teamflex,
footer h3 {
    display: inline-block
}

footer #lfgg {
    font-size: 1.2em;
    font-weight: bold;
}

#llgg {
    font-size: 24px;font-weight: 800;
    letter-spacing: .3;
    margin-top: -2.5px
}

.cs {
    letter-spacing: 2px
}

footer a:hover,
header a:hover {
    color: var(--dest);
    transition: .3s
}

#nome img {
    background: #191919;
    border-radius: 50%;
    display: inline-block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: -15px;
    right: -15px;
}

#nome {
    font-size: min(7vw, 26px);
    background: #191919;
    padding: 12px;
}

#bkg {
    right: 15px;
    top: 15px;
    box-shadow: rgba(0, 0, 0, .164) 1px 1px 3px;
    border-radius: 5px 5px 5px 0
}

.opapyro {
    background: linear-gradient(-45deg, #da603b, #d44e37, #d44e37, #a11010)
}

.opaanemo {
    background: linear-gradient(-45deg, #a3e2d2, #a3e4d3, #96d4cf, #359185)
}

.opadendro {
    background: linear-gradient(-45deg, #64ee52, #9fe252, #7cd85f, #51a81f)
}

.opageo {
    background: linear-gradient(-45deg, #bda250, #bc9d4a, #a68d48, #9e8139)
}

.opahydro {
    background: linear-gradient(-45deg, #5d5bd3, #3c47e7, #4b66ff, #1f34a8)
}

.opaelectro {
    background: linear-gradient(-45deg, #a35bd3, #7e3ce7, #9f4bff, #761fa8)
}

.opacryo {
    background: linear-gradient(-45deg, #c8e8f3, #67d1d1, #56aacd, #65b9d6)
}

.ball,
.opacryo #bkg {
    background-image: linear-gradient(90deg, #c8e8f3, rgba(255, 255, 255, .055))
}

.opahydro #bkg {
    background-image: linear-gradient(90deg, #3673e6, rgba(255, 255, 255, .055))
}

.opadendro #bkg {
    background-image: linear-gradient(90deg, #cfff5f, rgba(255, 255, 255, .055))
}

.opageo #bkg {
    background-image: linear-gradient(90deg, #ffdf88, rgba(255, 255, 255, .055))
}

.opaelectro #bkg {
    background-image: linear-gradient(90deg, #d078ff, rgba(255, 255, 255, .055))
}

.opaanemo #bkg {
    background-image: linear-gradient(90deg, #c3fded, rgba(255, 255, 255, .055))
}

.opapyro #bkg {
    background-image: linear-gradient(90deg, #ff7944, rgba(255, 255, 255, .055))
}

#txt {
    font-size: min(15px, 3vw);
    margin-left: 20px
}

#pers .titulos3,
#nome div div p:last-of-type {
    background-image: linear-gradient(to right, white, white);
    font-weight: normal;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 2px;
    color: black;
    padding: 0px 8px;
    font-size: min(5vw, 20px);
    margin-top: 2px;
    display: inline-block;
}


.titulos {
    background-image: linear-gradient(to right, var(--background), rgba(255, 255, 255, 0));
}


#txt .titulos {
    display: inline;
    color: #fff
}

.dgd {
    margin: 8px 0
}

.titulos {
    font-size: min(28.875px, 6.5vw);
}

.titulos2 {text-align: center;
    font-size: min(40px, 7vw);
    padding: 20px 60px;color: var(--pt);
}.dark .titulos2{
    color: var(--pt);
    
}

.titulos4{
    font-size: 1.16em;
}
.titulos3 {margin-top: 12px;
    font-size: min(6vw, 35px)
}

#bbg {
    padding: 20px 10px;
    margin-bottom: -8px;
    font-weight: 400
}

.ball {
    height: 17px;
    left: 3px;
    width: 17px;
    bottom: 3px;
    border-radius: 50%
}

.dark .ball {
    left: 21px
}

#main4 {
    padding: 20px 20px 0
}

img {
    border-style: none
}

#p1 a {
    margin: 10px 2px;
    box-shadow: rgba(0, 0, 0, .473) 0 2px 5px;
    border-radius: 3px;
    width: 140px
}

#main4 .bg5 {
    margin-bottom: 20px
}

.bg5 img:hover,
.bg8 a:hover,
.bg_golden:hover,
.rollx a:hover h3,
table img:hover {
    opacity: 1;
    transition: .4s
}

.rollx a {
    margin: 0 15px
}

#p1 h2 {
    font-size: 20px;
    margin-top: 10px;
    padding-bottom: 10px
}

.displayflex h2,
.rollx h3 {
    max-width: 160px;
    margin: auto;
    opacity: 1;
    font-size: min(5vw, 22px)
}

.teamflex a p,
.tlchild p {
    line-height: 1.5em;
    font-size: min(13px, 3.1vw);
    font-weight: 400
}

.rollx {
    padding-bottom: 0;
    justify-content: center;
    display: flex;
    flex-wrap: wrap
}

.rollx img {
    height: 200px;
    width: auto;
    transition: .5s
}

.sds a:hover+.bg5 {
    background: #a30404
}

.sds {
    display: inline
}

.teamflex a p,
.tlchild p {
    opacity: .8
}

.teamflex a h3,
.tlchild a h2 {
    font-size: min(15px, 3.3334vw);
    font-weight: 400
}

.teamflex {
    max-width: 470px;
    width: 100%;
    padding: 15px
}

#Team h2 {
    opacity: 1
}

#Team {
    gap: 15px;
    justify-content: space-between;
    flex-wrap: wrap
}

#Times,
.AA,
.ftt {
    gap: 20px
}

#Team .teamflex div:last-of-type {
    display: flex;
    flex-wrap: nowrap;
    max-width: 400px;
    padding: 10px 0;
    border-radius: 10px;
    margin: auto;
    font-weight: 400;
    overflow: hidden;
    gap: 10px;
    font-size: min(16px, 3.3334vw);
    justify-content: space-evenly
}

#Times .displayflex {
    position: relative;
    flex-wrap: nowrap;
    max-width: 450px;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px;
    justify-content: space-around
}

.agbox hr{
    background: #fff
}

#Times {
    justify-content: flex-start;
    flex-wrap: wrap
}

#Team a img:first-of-type,
#Times a img:first-of-type,
.tlchild img {
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.mobile-container img {
    height: 12vw;
    width: auto;
    max-height: 41px;
    vertical-align: middle;
    margin-left: 10px
}

#bg2 {box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    font-size: min(20px, 5vw)
}






#vis1 {box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    z-index: 1;
    padding: 3px
}
.dark #vis1,.dark #bg2{border-bottom: 1px solid rgba(255, 255, 255, 0.151);box-shadow: none;}

.mobile-container {
    z-index: 3;
    position: fixed;
    border-radius: 10px;
    width: 100%
}

.bg_golden,
.bk_golden {
    background-image: linear-gradient(135deg, #6b5453, #bb9656)
}

.bg_purple,
.bk_purple {
    background-image: linear-gradient(135deg, #5b5381, #b788ca)
}

.bg_gray {
    background-image: linear-gradient(135deg, #50585e, #878d9d)
}

.bg_green {
    background-image: linear-gradient(135deg, #49565b, #5d966c)
}

.bg_blue,
.bk_blue {
    background-image: linear-gradient(135deg, #515478, #4a9db3)
}

.agbox hr {
    border: 0;
    height: 1px;
    margin: 0 20px
}

.bg_blue,
.bg_golden,
.bg_gray,
.bg_green,
.bg_purple {
    border-radius: 5px;
    text-align: center
}

#pers {
    border-top-right-radius: 5px;
    box-shadow: #a8a8a8 0 -.5px 3px;
    border-top-left-radius: 5px;
    color: #fff;
    min-height: 400px
}

#pers h2,
footer h2 {
    font-size: 1.1em
}

#txt a {
    color: rgba(255, 255, 255, .586)
}

#txt a:hover {
    color: #fff;
    transition: .3s
}

#tlA,
#tlB,
#tlC,
#tlD,
#tlS,
#tlSS {
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 35px;
    width: 35px;
    position: absolute;
    padding: 0;
    color: #000;
    top: -5px;
    right: -5px;
    font-size: 23px
}

#tlB {
    background: #00b3d3
}

#tlS {
    background: #ffaf68
}

#tlSS {
    background: #ff5353
}

#tlC {
    background: #89f989
}

#dpflex2 {
    border-radius: 6px
}

#dpflex2 a:hover {
    color: #fff;
    transition: .5s
}

.dpflex3 {
    line-height: 1.8em;
    padding: 30px
}

.dpflex3 img {
    height: max(2.4vw, 30px)
}

.bg5 {
    width: 100%;
    padding: 10px
}

#search-input,
.btn {
    background: rgba(0, 0, 0, 0)
}

#myBtnContainer,
#sbar {
    background: var(--background);
    width: 100%;
    max-width: 340px
}

.cs {
    display: inline-flex;
    border-radius: 50%;
    margin: 0 10px;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    font-size: 18px
}

#myBtnContainer {
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    margin-top: 5px;
    padding: 7px
}

.btn {
    border: none;
    opacity: .55
}

#set,
.ftdiv {
    padding: 40px 10px 10px
}

#search-input {
    display: block;
    font-weight: 700;
    height: 52px;
    padding-left: 44px;
    outline: 0;
    border: 0;
    font-size: min(15px, 3.3334vw);
    font-family: "DM Sans", sans-serif;
    width: 98%
}

#sbar {
    border-radius: 10px;
    height: 52px;
    position: relative
}

.golden,
.pink,
.purple {
    display: inline-block;
    position: relative
}

#char:hover .divel,
#texto,
.dark .btn.active #iw {
    display: block
}

.marcador {
    width: max(2vw, 30px);
    vertical-align: middle
}

.mc2 {
    font-size: min(29px, 8vw)
}

#ghg {
    width: 30%;
    min-width: 70px;
    max-width: 110px
}

.fd img {
    width: 30vw;
    max-width: 130px;
    border-radius: 50%
}

#bdd {
    border-bottom: 3px solid var(--dest)
}

#p1 a img:nth-last-child(3) {
    top: 2px;
    right: 2px;
    height: 32px;
    width: 32px;
    border-radius: 50%
}

.titulos2 i {
    margin-right: 2px
}

.ml {
    margin-left: -30px
}

.ftdiv {
    max-width: 890px;
    margin: auto
}

.st {
    display: inline-flex;
    max-width: 340px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

#set {
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    font-size: 19px
}

footer h3 {
    font-size: min(18px, 6vw)
}

footer img {
    width: 200px;
    height: 32.08px;
    margin: 0 0 10px -1px
}

footer p {
    font-size: min(17px, 4vw);
    line-height: 1.3em;
}
.dark footer {
    border-top: 1px solid rgba(0, 0, 0, .322)
}

#pers img {
    width: auto
}

.bgun img:first-of-type {
    border-bottom-left-radius: 20px;
    margin-bottom: -13px
}

@media only screen and (min-width:1018px) {
    .flexxa {
        margin: auto;
    }

    #imgg {
        height: 235px
    }

    .bgun img:first-of-type {
        width: 90px;
        height: 90px
    }

    .agbox {
        width: 450px
    }

    .talentsflex ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        cursor: pointer
    }

    div ::-webkit-scrollbar-track {
        background: #00000052
    }

    div .dark ::-webkit-scrollbar-track {
        background: #f1f1f1
    }

    div ::-webkit-scrollbar-thumb {
        background: var(--dest)
    }

    .talents {
        max-width: 306.67px;
        max-height: 620px
    }

    .overy {
        overflow-y: auto;
        max-height: 360px
    }

    #p1 .filterDiv:hover {
        opacity: .8;
        transition: .2s
    }

    .gth:hover div {
        display: block
    }

    #Team .teamflex a:hover,
    .tlchild a:hover {
        opacity: .7;
        transition: .3s
    }

    .displayflex a:hover,
    .rollx a:hover {
        opacity: 1
    }

    #set {
        display: none
    }

    .rollx a:hover img {
        height: 215px;
        width: auto
    }

    .rollx a {
        opacity: .8
    }

    #Times .flexxa a img:first-of-type {
        width: 116px;
        height: 116px;
    }

    #Times .flexxa h3,
    #Times .flexxa h4 {
        font-size: 20px;
    }

    #Times .flexxa {
        justify-content: center;
        gap: 70px;
    }

    #Times .flexxa p {
        font-size: 16px;
    }
}

.fa-hourglass-half {
    margin-left: 2.4px;
    margin-right: 3.4px
}

@media only screen and (max-width:500px) {
    .rollx img {
        height: 180px
    }

    .fa-hourglass-half {
        margin-left: 2.4px;
        margin-right: 2.4px
    }
}
.ftt{ justify-content: space-between;}
@media only screen and (max-width:1017px) {
    .titulos2{
    padding: 10px 15px;
    }
    .ftt,
    footer nav {
        justify-content: center
    }
    #imgg {
        height: 170px;
        top: 20px;
        right: 20px
    }

    #Times,
    .topnav {
        display: block
    }

    #vis1,
    .rollx {
        display: flex
    }

    #timesp,
    .timesp {
        padding-bottom: 15px
    }

    .ftdiv {
        max-width: 830px
    }

    .AA {
        gap: 10px
    }

    .agbox {
        width: 49%
    }

    #Times {
        padding: 15px
    }

    #Times .displayflex {
        max-width: none;
        margin: auto auto 15px
    }

    #Times .displayflex:last-of-type {
        margin-bottom: 0
    }

    .teamflex {
        width: 100%;
        max-width: none
    }

    #vis1 {
        justify-content: space-between;
        align-items: center
    }

    #brrr,
    header {
        display: none
    }

    .talentsflex {
        flex-wrap: wrap
    }

    #main2,
    #main4 {
        margin: 0px auto;
        padding: 10px;
        max-width: 800px
    }

    #p1 h2,
    .rollx h3 {
        opacity: 1
    }

    #Team .teamflex div:last-of-type {
        gap: 0
    }

    .bg8 a {
        min-width: 110px
    }

    .A_A1 .bg_golden {
        margin-right: 10px
    }

    .bg8 {
        padding: 15px
    }

    .ftt {
        padding: 5px
    }

    #p1 a {
        width: 140px
    }

    .rollx a {
        margin: 0 10px
    }

    .rollx {
        justify-content: space-between;
        flex-wrap: nowrap;
        overflow-x: auto
    }

    #p1 h2 {
        color: var(--pt);
        font-size: 17px
    }

    #tlA,
    #tlB,
    #tlD,
    #tlS {
        height: 30px;
        width: 30px;
        font-size: 20px
    }

    .bgun img:first-of-type {
        width: 80px;
        height: 80px
    }
}

@media only screen and (min-width:451px) {
    .bk_golden .bgun img:last-child {
        height: 20px;
        width: 78.17px
    }

    .bk_purple .bgun img:last-child {
        height: 20px;
        width: 63.63px
    }

    .bk_blue .bgun img:last-child {
        height: 20px;
        width: 49.08px
    }
}

@media only screen and (max-width:450px) {
    .bk_golden .bgun img:last-child {
        height: 17px;
        width: 66.45px
    }

    .bk_purple .bgun img:last-child {
        height: 17px;
        width: 54.08px
    }

    .bk_blue .bgun img:last-child {
        height: 17px;
        width: 41.72px
    }

    #Team a img:first-of-type,
    #Times a img:first-of-type,
    .tlchild img {
        width: 65px;
        height: 65px
    }

    .bgun img:first-of-type {
        width: 82px;
        height: 82px
    }

    .teamflex {
        padding: 10px 0
    }
}

@media only screen and (max-width:370px) {

    #Team a img:first-of-type,
    #Times a img:first-of-type,
    .tlchild img {
        width: 58px;
        height: 58px
    }

    .bgun img:first-of-type {
        width: 70px;
        height: 70px
    }
}



@media only screen and (min-width:704px) {
    .agovery {
        max-height: 120px;
        overflow-x: auto
    }
}

@media only screen and (max-width:818px) {

    #main2,
    #main4 {
        margin: 0px 10px 0
    }
}

@media only screen and (max-width:703px) {
    .agbox {
        width: 100%
    }

    .AA {
        gap: 20px
    }
}

@media only screen and (max-width:1250px) {
    #header-content {
        max-width: 970px;
        gap: 30px
    }
}

@media only screen and (max-width:320px) {
    #main2 {
        margin-left: 5px;
        margin-right: 5px;
        padding: 5px
    }

    #Times {
        padding: 15px 10px 10px
    }

    .bg8 {
        padding: 10px
    }
}
.dark #main2{border-bottom: 1px solid rgba(255, 255, 255, 0.151);}
#main2{border-bottom: 1px solid rgba(0, 0, 0, 0.411);}
@media screen and (max-width:481px) {
    #p1 a {
        width: 100%
    }

    #p1 {
        text-align: center
    }

    .index .filterDiv {
        width: 40%;
        max-width: 150px;
        margin: 10px
    }
}

@media only screen and (max-width:305px) {
    .tlchild0 {
        min-width: 45px
    }

    .index .filterDiv {
        width: 48%;
        max-width: 150px;
        margin: 0
    }

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

footer nav {
    font-size: 1.1em;
    max-width: 340px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.dark article p{
    color:#d1d1d1;
}
.agp b,
.dark .bg8 a {
    color: #fff
}
.dark header{
   background-color: #111113;border-bottom: 1px solid rgba(255, 255, 255, 0.151);
}
:root .dark {--pt: #ffffff;
    --css: #0f0f0f;
    --background: #111113;
    --line: rgba(255, 255, 255, 0.315);
    --dest: rgb(129, 194, 231);
    --box: #818181 0 0 2px
    
}

.cookieConsentContainer {
    z-index: 999;
    box-shadow: rgba(0, 0, 0, .63) 1px 1px 6px;
    width: 350px;
    min-height: 20px;
    box-sizing: border-box;
    padding: 30px;
    background: #232323;
    overflow: hidden;
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none
}

.cookieConsentContainer .cookieTitle div {
    font-family: OpenSans, arial, sans-serif;
    color: #fff;
    font-size: 22px;
    line-height: 20px;
    display: block
}

.cookieConsentContainer .cookieDesc p {
    margin: 10px 0 0;
    padding: 0;
    font-family: OpenSans, arial, sans-serif;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    display: block
}

.cookieConsentContainer .cookieDesc a {
    font-family: OpenSans, arial, sans-serif;
    color: #fff;
    text-decoration: underline
}

.cookieConsentContainer .cookieButton div {
    display: inline-block;
    font-family: OpenSans, arial, sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
    background: #000;
    box-sizing: border-box;
    padding: 15px 24px;
    transition: background .3s
}

.cookieConsentContainer .cookieButton div:hover {
    cursor: pointer;
    background: #3e9b67
}

@media (max-width:980px) {
    .cookieConsentContainer {
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important
    }
}

.dark .displayflex i {
    color: #51b80d
}

.displayflex i {
    color: #98ff53;
    top: -12px;
    font-size: min(22px, 5vw);
    right: -12px
}

.talentsflex {
    gap: 20px
}

.talents {
    font-size: min(14.5px, 4vw);
    background: var(--background);
    padding: 25px 15px 15px;
    width: 100%
}

.dark .talents p {
    color: #4d4d4d
}

.talents p {
    color: #e0e0e0;
    line-height: 1.5em
}

.talents h3 {
    font-size: min(16px, 3.8vw);
    line-height: 1em
}

.talents h3:first-of-type {
    font-size: min(18px, 5vw);
    margin-bottom: 4px;
    color: var(--dest)
}

.talents img {
    width: 45px;
    height: 45px
}

.overy h3:first-of-type {
    font-size: min(16.4px, 4vw);
    line-height: 1em;
    color: var(--pt);
    text-align: left
}

.dark .divp:hover,
.divp a:hover,
.opcional {
    color: #f5f5f5
}

.agfd {
    gap: 10px;
    justify-content: flex-start
}

.bgun {
    margin-left: -4px
}

.agbox {
    font-size: min(16px, 4vw);
    padding: 10px;
    position: relative
}

.best,
.opcional {
    border-radius: 3px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: -10px;
    font-size: min(16.5px, 4.5vw);
    right: -8px
}

.agfit {
    height: fit-content;
    padding-bottom: 25px
}

.best {
    padding: 2px 8px;
    background-image: linear-gradient(135deg, #39c20f, #39c20f)
}

.opcional {
    padding: 2px 6px;
    background: #272727;
    box-shadow: rgba(255, 255, 255, 0.562) 0.1px -0.1px 2px;
}

.divel,
.divp div {
    font-weight: 700;
    display: none;
    letter-spacing: 1.5px;
    width: 100%;
    font-size: 14.5px;
    z-index: -1;
    background: var(--background)
}

.agtitle h3:last-of-type {
    font-size: 1.2em;
    line-height: 1.1em
}

.agtitle {
    margin-top: 7px;
}

.agbox p:nth-last-of-type(1) {
    line-height: 1.4em;
    margin-top: 5px;
    color: white
}

#crr a:hover,
#crr:hover {
    background: #59b9d6
}

#ann a:hover,
#ann:hover {
    background: #0cb691
}

#dee a:hover,
#dee:hover {
    background: #40b41d;
    color: #fff
}

#elee a:hover,
#elee:hover {
    background: #8322b8
}

#gee a:hover,
#gee:hover {
    background: #be9b3b
}

#hyy a:hover,
#hyy:hover {
    background: #0977d1
}

#pyy a:hover,
#pyy:hover {
    background: #d3553e
}

.divp a {
    color: var(--pt);
    padding: 9px 12px
}

.divp a:hover {
    transition: none
}

.divp div {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    top: 15px;
    box-shadow: var(--box);
    left: 136.5px;
    border-radius: 0 5px 3px 3px
}

.divel .divp {
    padding: 9px 12px;
    justify-content: space-between
}

.dark .divel,
.dark .divp div {
    background: #f7f7f7
}

.divp:hover .sieta {
    transform: rotate(90deg);
    transition: .5s
}

.divp a i {
    top: 4px;
    right: 2px;
    color: #3991e4;
    font-size: 13.5px
}

.divp p {
    text-align: justify
}

.divp a:hover i {
    color: var(--pt);
    transition: .3s
}

.divel {
    padding-top: 15px;
    top: 20px;
    min-width: 136.5px;
    border-radius: 0 0 3px 3px
}

.py {
    background: #f85d36
}

.hy {
    background: #3664f8
}

.ge {
    background: #f8cb36
}

.an {
    background: #5dfab8
}

.de {
    background: #a2ff64
}

.el {
    background: #a626e2
}

.cr {
    background: #a5fffa
}

#myBtnContainer button {
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #00000000
}

.dark .btn.active {
    background: var(--pt)
}

.btn.active {
    border-radius: 50%;
    opacity: 1;
    color: #fff
}

.dark .btn.active img {
    background-color: #000000b0
}

.btn.active img {
    background-color: var(--background)
}

#ib,
#iw {
    border-radius: 0;
    padding: 7px
}

.vv img {
    width: 35px;
    height: 35px
}

.btn img {
    margin-bottom: -4px;
    padding: 5px;
    border-radius: 3px
}

#Times .displayflex a:hover {
    opacity: .7;
    transition: .2s
}

#Times .ge:hover a h4 {
    color: wheat;
    transition: .2s
}

.timesp h3 {
    font-size: min(24px, 6vw);
    margin-bottom: 10px
}

#timesp,
.timesp {
    width: 100%;
    padding-top: 5px;
}
.dark section h2,
#nome h1,
.agbox h2,
.agbox h3 {
    color: white;
}


.bg8 p,
#timesp {
    line-height: 1.5em;
}

.talents h4 {
    font-size: min(17px, 4.5vw);
}

p strong {
    color: white;
}

.dark p strong {
    color: black
}

.dark .agbox p strong {
    color: rgb(255, 255, 255)
}

.dark .opcional {
    box-shadow: none;
}

#nome p {
    font-size: min(16.5px, 4.5vw)
}

.agtitle p:last-of-type {
    margin-top: 2px;
    line-height: 1.2em
}

.agbox h4 {
    font-size: 1.17em;
}

.agtitle p:first-of-type {
    line-height: 1.4em;
}

#nome p:last-of-type {
    margin-top: 5px;
    font-size: min(4.5vw, 18px);
    padding: 2px 0px;
    border-radius: 2px;
    font-weight: 400;
}

#rg {
    background-image: linear-gradient(135deg, #6b5453, #cea969)
}

#rp {
    background-image: linear-gradient(135deg, #5b5381, #b788ca)
}

#sg {
    color: rgb(255, 236, 182);
}

#sp {
    color: rgb(236, 195, 255);
}

.agbox hr {
    margin-top: -12px;
    margin-bottom: 3px;
}

#nome #fc {
    display: inline-flex;
    flex-direction: column;
}

.talents p strong {
    color: var(--dest);
}


#das{padding: 80px 30px; background-color: #f3f3f3;}.boxer p{ font-size: .8em;margin-top: 10px;  color: #7a7a7a; text-align: justify;}.boxer hr{ border: 0px; height: 1px; background-color: #7a7a7a;}
.boxer{ width:354px; text-align: center;}.boxer:hover h3{color: var(--dest);transition: .3s;}.boxer img{ width:354px; background-color: white; height: 230px;    border-radius: 2px; }
.bxxx{ display: flex; flex-wrap: wrap; gap: 60px 20px; justify-content: space-between;}
@media only screen and (max-width:1141px) {
  .boxer{ width:100%; }
  .boxer p{text-align: center;}.boxer img{ max-width:554px; width: 65vw; height: auto;}#das{padding-top:90px ;padding-bottom: 60px ; padding-left: 10px; padding-right: 10px;}
}article p{color: #4e4e4e; line-height: 1.5em;}ul {
  display: block;
  list-style:none ;
}li{padding: 5px 0px;}ul a,p a,
ul p{color: #00C;}ul a:hover,ul p:hover,article a:hover{text-decoration: underline;}ul a{font-size: min(18.5px, 4vw);}
button{border: 0; background: none; cursor: pointer;}
#ppr{display: inline-block;}
#ppr2{display: none;}#indd{
  background-color: #FAFAFA;
}.dark #indd{
  background-color: #161618;box-shadow: none;border: 1px solid rgba(255, 255, 255, 0.151);
}.dark ul a,.dark ul p{color: #bebebe;}.dark .boxer p{color: #b9b9b9;}.dark article a{color: #a2c3ff;}.dark article b{color: white;}#main2 h3 a:hover{opacity: 0.7; transition: .2s;}
#indd{box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}.dark #das{background-color: #161618;border-bottom: 1px solid rgba(255, 255, 255, 0.151);}