/* //// CHARACTER TILE ELEMENTS //// */
.galdefault{width:100%;}
.galdefault .charactertile{width:10%;height:25%;}
.gal4{width:50%;}
.gal4 .charactertile{width:50%;height:50%;}
.gal6{width:75%;}
.gal6 .charactertile{width:33.333%;height:50%;}
.gal8 .charactertile{width:25%;height:50%;}
.gal10 .charactertile{width:20%;height:50%;}
.gal12 .charactertile{width:25%;height:33.333%;}
.gal15 .charactertile{width:20%;height:33.333%;}
.gal18 .charactertile{width:16.666%;height:33.333%;}
.gal21 .charactertile{width:14.285%;height:33.333%;}
.gal24 .charactertile{width:12.5%;height:33.33%;}
.gal28 .charactertile{width:14.285%;height:25%;}
.gal32 .charactertile{width:12.5%;height:25%;}
.gal36 .charactertile{width:11.111%;height:25%;}
.gal40 .charactertile{width:10%;height:25%;}
.gal44 .charactertile{width:9.090%;height:25%;}
.gal50 .charactertile{width:10%;height:20%;}
.gal55 .charactertile{width:9.090%;height:20%;}
.gal60 .charactertile{width:8.333%;height:20%;}
.gal66 .charactertile{width:9.090%;height:16.666%;}
.gal72 .charactertile{width:8.333%;height:16.666%;}
/* ///////////////////////////////// */

/* //////// SIZING ELEMENTS //////// */
.masterdiv{min-width:80vmin;min-width:80dvmin;}
.characterstitle{width:100%;height:10%;}
.charactersbody{width:100%;height:90%;}
.filterbar{width:100%;height:10%;margin-top:1%;margin-bottom:1%;}
.charactersgallery{height:88%;}
.charactertile{padding:.6%;box-sizing:border-box;text-decoration:none;}
.charactertile:hover{padding: 0%;transition:.2s;}
.characterimage{width:100%;height:80%;max-height:80%;object-fit:contain;margin-bottom:0;padding-bottom:0;}
.charactername{width:100%;height:20%;max-height:20%;margin-top:0;padding-top:0;text-decoration:none;}
/* ///////////////////////////////// */

/* /////// FILTER TAG ELEMENTS /////// */
.f-tags{width:auto;max-width:85%;max-width:calc(85%-.5vmin);height:100%;flex-wrap:wrap;align-items:center;margin-left:.5vmin}
.f-tag{width:auto;height:33%;text-decoration:none;}
.f-svg{width:calc(100%-.5vmin);height:100%;cursor:pointer;margin-right:.5vmin;text-decoration:none;}
#f-settings{width:15%;min-width:15%;height:90%;cursor:pointer;}
/* /////////////////////////////////// */

/* /////// FILTERING ELEMENTS /////// */
#f-popup{width:100vw;width:100dvw;height:100vh;height:100dvh;backdrop-filter:blur(20px);background-color:rgba(0,0,0,.3);}
#f-menu{padding:2%;width:60vh;max-width:80vw;height:100vw;max-height:70vh;background-color:rgba(0,0,0,.3);}
#f-searchbar{width:100%;height:5%;padding:1% 0 1% 0;}
#f-search{width:80%;height:100%;outline:none;}
#f-clear{width:20%;height:100%;cursor:pointer;}
#f-tools{width:100%;height:5%;padding:1% 0 1% 0;}
.f-tool{width:50%;height:100%}
#f-visibility{width:55%;height:100%;border-right:1px solid white;}
#f-match{width:45%;height:100%;}
.f-option{width:46%;margin-left:2%;margin-right:2%;}
.f-tool input[type=radio]{display:none}
.f-item input[type=checkbox]{display:none;}
.f-item input:checked+label svg{background-color:rgba(255,255,255,.3);}
#f-visibility input:checked+label,#f-match input:checked+label{background-color:rgba(255,255,255,.3);}
#f-list{width:100%;height:85%;padding:0;margin:0;padding-top:1%;}
.f-item{width:50%;max-width:50%;height:8.09%;max-height:9.09%;padding-top:.5%;padding-bottom:.5%;box-sizing:border-box;text-decoration:none;}
svg{height:100%;text-decoration:none;}
text{text-decoration:none;}
.f-item label{width:95%;margin-left:5%;justify-content:start;}
/* ////////////////////////////////// */

/* ////////// MEDIA QUERIES ////////// */
@media only screen and (max-aspect-ratio: 157/100) 
    {.masterdiv{width:80vw;width:80dvw;height:80vh;height:80dvh;max-height:80vh;max-height:80dvh;}}
@media only screen and (max-aspect-ratio: 95/100)
    {.masterdiv{width:80vw;width:80dvw;height:90vh;height:90dvh;max-height:90vh;max-height:90dvh;}
    .characterstitle{width:100%;height:6%;}
    .charactersbody{width:100%;height:94%;}
    .filterbar{width:100%;height:5%;margin-top:1%;margin-bottom:1%;}
    .charactersgallery{height:93%;}
    .galdefault{width:100%;max-width:40vh;max-width:40dvh;}
    .galdefault .charactertile{height:10%;width:25%;}
    .gal4 .charactertile{height:50%;width:50%;}
    .gal6 .charactertile{height:33.333%;width:50%;}
    .gal8 .charactertile{height:25%;width:50%;}
    .gal10 .charactertile{height:20%;width:50%;}
    .gal12 .charactertile{height:25%;width:33.333%;}
    .gal15 .charactertile{height:20%;width:33.333%;}
    .gal18 .charactertile{height:16.666%;width:33.333%;}
    .gal21 .charactertile{height:14.285%;width:33.333%;}
    .gal24 .charactertile{height:12.5%;width:33.33%;}
    .gal28 .charactertile{height:14.285%;width:25%;}
    .gal32 .charactertile{height:12.5%;width:25%;}
    .gal36 .charactertile{height:11.111%;width:25%;}
    .gal40 .charactertile{height:10%;width:25%;}
    .gal44 .charactertile{height:9.090%;width:25%;}
    .gal50 .charactertile{height:10%;width:20%;}
    .gal55 .charactertile{height:9.090%;width:20%;}
    .gal60 .charactertile{height:8.333%;width:20%;}
    .gal66 .charactertile{height:9.090%;width:16.666%;}
    .gal72 .charactertile{height:8.333%;width:16.666%;}}
@media only screen and (max-aspect-ratio: 70/100)  
    {.galdefault{width:100%;max-width:40vh;max-width:40dvh;}}
/* /////////////////////////////////// */