.index {
    flex: 1;
    margin-top: 5px;

}
.bg {
    background-color: #16171c;
}
.pager {
    flex: 1;
    padding-left: 10px;
    padding-right: -500px;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 25px;
}

.main {
    max-width: 95rem;
    margin: auto;
}

.navbar {
    margin-bottom: 35px;
}
.nav-tabs{
    --bs-nav-tabs-border-color: none;
}

table{
    border:none;
}
td{
    font-size: 15px;
    padding-bottom:10px;
}
th{
    padding-bottom:10px;
}
tr{
    width: 100%;
    --bs-border-color:  #575757;
}

#footer {
    position:absolute;
    bottom:0;
    width:100%;
}

.nounderline {
    text-decoration: none !important;
    text-blink: none !important;
}

a {
    color:inherit;
    text-decoration: none !important;
    padding: 0;
    margin: 0;
}
a:hover {
    text-decoration: none;
    background-color: transparent;
    color: inherit;
}

body {
    color: #fff;
    font-family: BarlowCondensed-Light;
    background-color: #23252a;
    display: flex;
    min-height: 100vh;
    flex-direction: column;

}

.container {
    max-width: 1200px;
}
.releases-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
}
.character-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 20px;
}
.gasha-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 12px;
    margin-right: 5px;
}
.sim-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-gap: 12px;
    margin-right: 5px;
}
.plate-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 15px;
}
.character-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.chara-listing.name {
    cursor: pointer;
}
@media (max-width: 1000px) {
    .bannerimage {
        width: 100%;
    } 
}
.specialeffect-thumb {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 175px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: 123px 123px;
}
.specialeffect-thumb > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.specialeffect-thumb > .charaskill {
    position: absolute;
    width: 175px;
    height: 175px;
    background-size: 175px 175px;
    transform: translate(0px, 0px);
    border-radius: 10px;
}
.specialeffect-thumb > .charaskill.variation {
    background-image: url('/assets/icons/T_ui_GashaThumb_bg06.webp');
}
.specialeffect-thumb > .charaskill.character {
    background-image: url('/assets/icons/T_ui_GashaThumb_bg05.webp');
}
.specialeffect-thumb  > .chImage {
    position: absolute;
    width: auto; /* Image width */
    height: 160px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: 35px;
    top: 10px;
}
.specialeffect-thumb  > .VrImage {
    position: absolute;
    width: 160px; /* Image width */
    height: 160px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: 5px;
    top: 10px;
}
.specialeffect-thumb > .charaImage {
    position: relative;
    width: 150px;
    height: 180px;
    overflow: hidden;
    transform: translate(0px, 10px);
    border-radius: 10px;
    background-size: 160px 160px;
    background-size: cover; /* Cover the container with the background image */
}
.specialeffect-thumb > .VaraImage {
    position: relative;
    width: 160px;
    height: 160px;
    overflow: hidden;
    transform: translate(0px, 10px);
    border-radius: 10px;
    background-size: 160px 160px;
}

.specialeffect-thumb > .specialTXT {
    position: absolute;
    width: 175px;
    height: 175px;
    background-size: 175px 175px;
    transform: translate(0px, 0px);
}
.specialeffect-thumb > .specialTXT.Vara {
    background-image: url('/assets/icons/vert_skill_title.webp');
}
.specialeffect-thumb > .specialTXT.Chara {
    background-image: url('/assets/icons/vert_character_title.webp');
}

.specialeffect-thumb > .soecialFrame {
    position: relative;
    width: 172px;
    height: 172px;
    background-size: 172px 172px;
    transform: translate(-0, 0);
}

.plate-thumb {
    position: relative;
    /*display: inline-block;*/
    width: 365px;
    margin-bottom: 0px;
    background-color: #0f0f17;
    background-repeat: no-repeat;
    background-size: 365px 62px;
}
.plate-thumb > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.plate-thumb > .plateIMG {
    position: relative;
    width: 365px;
    height: 62px;
    overflow: hidden;
    transform: translate(0px, 0px);
}

.plate-thumb > .Season {
    font-family: BarlowCondensed-Medium;
    position: absolute;
    text-align: left;
    overflow: hidden;
    transform: translate(75px, 15px);

    font-size: 14px;
    color: white;
    
    /* No webkit properties, just refined text-shadow */
    text-shadow: 
        -1px -1px 0 black,
         0px -1px 0 black,
         1px -1px 0 black,
        -1px  0px 0 black,
         1px  0px 0 black,
        -1px  1px 0 black,
         0px  1px 0 black,
         1px  1px 0 black;
}
.plate-thumb > .Descript {
    font-family: BarlowCondensed-Medium;
    position: absolute;
    text-align: left;

    overflow: hidden;
    transform: translate(75px, 35px);

    font-size: 14px;
    color: white;
    
    /* No webkit properties, just refined text-shadow */
    text-shadow: 
        -1px -1px 0 black,
         0px -1px 0 black,
         1px -1px 0 black,
        -1px  0px 0 black,
         1px  0px 0 black,
        -1px  1px 0 black,
         0px  1px 0 black,
         1px  1px 0 black;
}
@media (max-width: 365px) {
    .plate-thumb {
        width: 100%;
    } 
    .plate-thumb > .plateIMG {
        width: 100%;
    }
    .plate-thumb > .Season {
        width: 100%;
    } 
    .plate-thumb > .Descript {
        width: 100%;
    } 

}

.character-thumb {
    position: relative;
    /*display: inline-block;*/
    width: 125px;
    margin-bottom: 0px;
    background-color: #0f0f17;
    background-repeat: no-repeat;
    background-size: 123px 123px;
}
.character-thumb > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.character-thumb > .charaImage {
    position: relative;
    width: 125px;
    height: 125px;
    overflow: hidden;
    transform: translate(0px, 0px);
    border-radius: 10px;
}

.character-thumb > .charaSelect {
    position: absolute;
    width: 125px;
    height: 125px;
    background-size: 125px 125px;
    transform: translate(0px, 0px);
    border-radius: 10px;
}
.character-thumb > .Gashabackground {
    position: absolute;
    width: 125px;
    height: 125px;
    background-size: 125px 125px;
    transform: translate(0px, 0px);
    border-radius: 10px;
}
.character-thumb > .GashaFrame {
    position: absolute;
    width: 132px;
    height: 128px;
    background-size: 132px 128px;
    transform: translate(2px, -1px);
    border-radius: 10px;
}
.character-thumb > .GashaIcons {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    transform: translate(47px, 5px);
    border-radius: 10px;
}

.character-thumb > .GashaFrameChara {
    position: absolute;
    width: 132px;
    height: 128px;
    background-size: 132px 128px;
    transform: translate(-20px, -128px);
    border-radius: 10px;
}
.character-thumb > .raritystars {
    position: absolute;
    width: 125px;
    height: 20px;
    background-size: 125px 20px;
    transform: translate(2px, 88px);
    border-radius: 10px;
}
.character-thumb > .raritystarsCostume {
    position: absolute;
    width: 125px;
    height: 20px;
    background-size: 125px 20px;
    transform: translate(-120px, 102px);
    border-radius: 10px;
}
.character-thumb > .isNew {
    position: absolute;
    width: 45px;
    height: 19px;
    background-size: 45px 19px;
    background-image: url('/assets/icons/newicon.png');
    top: 2px;
    left: 75px;
    transform: rotate(0); /* Initial rotation */
    animation: isNewbounce 1s infinite;
}

@keyframes isNewbounce {
    0%, 100% {
        transform: rotate(0) translateZ(0) scale(1);
    }

    50% {
        transform: rotate(0) translateZ(-5px) scale(1.1);
    }
}


.costume-thumb {
    position: relative;
    display: inline-block;
    width: 125px;
    margin-bottom: 0px;
    background-color: #0f0f17;
    background-repeat: no-repeat;
    background-size: 123px 123px;
}
.costume-thumb > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.costume-thumb > .costumeIcon {
    position: relative;
    width: 125px;
    height: 125px;
    overflow: hidden;
    transform: translate(0px, 0px);
    border-radius: 10px;
}
.costume-thumb > .background {
    position: absolute;
    width: 125px;
    height: 125px;
    background-size: 125px 125px;
    transform: translate(0px, 0px);
    border-radius: 10px;
}
.costume-thumb > .RarityFrame {
    position: absolute;
    width: 132px;
    height: 128px;
    background-size: 132px 128px;
    transform: translate(-126px, -1px);
    border-radius: 10px;
}
.costume-thumb > .raritystarsCostume {
    position: absolute;
    width: 125px;
    height: 20px;
    background-size: 125px 20px;
    transform: translate(-120px, 102px);
    border-radius: 10px;
}
.costume-detail-container {
    display: flex;
    align-items: center;
}
.costume-detail {
    margin-left: 10px; /* Adjust the margin as per your preference */
}
.character-thumb > .raritystarsChara {
    position: absolute;
    width: 125px;
    height: 20px;
    background-size: 125px 20px;
    transform: translate(-18px, -36px);
    border-radius: 10px;
}
.character-thumb > .charaSelect1 {
    position: absolute;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-size: 125px 125px;
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-direction: alternate;
}

.character-thumb > .charaSelect2 {
    position: absolute;
    width: 125px;
    height: 125px;
    background-size: 125px 125px;
    border-radius: 10px;
    animation-name: fade;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-direction: alternate-reverse;
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.character-thumb > .charaSelect.Power {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Strike_BG.webp');
}
.character-thumb > .charaSelect.Speed {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Rapid_BG.webp');
}
.character-thumb > .charaSelect.Technique {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Technical_BG.webp');
}
.character-thumb > .charaSelect.Defense {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Assult_BG.webp');
}
.character-thumb > .charaSelect.Support {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Support_BG.webp');
}

.character-thumb > .charaSelect1.Power {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Strike_BG.webp');
}
.character-thumb > .charaSelect1.Speed {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Rapid_BG.webp');
}
.character-thumb > .charaSelect1.Technique {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Technical_BG.webp');
}
.character-thumb > .charaSelect1.Defense {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Assult_BG.webp');
}
.character-thumb > .charaSelect1.Support {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Support_BG.webp');
}
.character-thumb > .charaSelect2.Power {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Strike_BG.webp');
}
.character-thumb > .charaSelect2.Speed {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Rapid_BG.webp');
}
.character-thumb > .charaSelect2.Technique {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Technical_BG.webp');
}
.character-thumb > .charaSelect2.Defense {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Assult_BG.webp');
}
.character-thumb > .charaSelect2.Support {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Support_BG.webp');
}

.character-thumb > .charaRole {
    position: absolute;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    transform: translate(2px, 2px);
}

.character-thumb > .charaRole.Power {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Power_icon.webp');
}
.character-thumb > .charaRole.Speed {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Speed_icon.webp');
}
.character-thumb > .charaRole.Technique {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Technique_icon.webp');
}
.character-thumb > .charaRole.Defense {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Defense_icon.webp');
}
.character-thumb > .charaRole.Support {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Support_icon.webp');
}


.character-thumb > .charaRole1 {
    position: absolute;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    transform: translate(2px, 2px);
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-direction: alternate;
}

.character-thumb > .charaRole1.Power {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Power_icon.webp');
}
.character-thumb > .charaRole1.Speed {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Speed_icon.webp');
}
.character-thumb > .charaRole1.Technique {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Technique_icon.webp');
}
.character-thumb > .charaRole1.Defense {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Defense_icon.webp');
}
.character-thumb > .charaRole1.Support {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Support_icon.webp');
}

.character-thumb > .charaRole2 {
    position: absolute;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    transform: translate(2px, 2px);
    animation-name: fade;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-direction: alternate-reverse;
}

.character-thumb > .charaRole2.Power {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Power_icon.webp');
}
.character-thumb > .charaRole2.Speed {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Speed_icon.webp');
}
.character-thumb > .charaRole2.Technique {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Technique_icon.webp');
}
.character-thumb > .charaRole2.Defense {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Defense_icon.webp');
}
.character-thumb > .charaRole2.Support {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Support_icon.webp');
}

.zoom {
    transition: transform .2s;
    width: 120px;
}

.zoom:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}
.missionzoom {
    transition: transform .2s;
    width: 300px;
}

.missionzoom:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}
.gashazoom {
    transition: transform .2s;
    width: 125px;
}

.gashazoom:hover {
    -ms-transform: scale(1.01); /* IE 9 */
    -webkit-transform: scale(1.01); /* Safari 3-8 */
    transform: scale(1.01);
}
.character-thumb > .name {
    font-family: BarlowCondensed-Medium;
    width: 125px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(0px, 102px);
    border-radius: 0 0 10px 10px;
}

.bannername {
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 14px;
    text-align: left;
    transform: translate(0px, 0px);
}
.bannerzoom {
    transition: transform .2s;
    width: 190px;
}

.bannerzoom:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}

.btn {
    border:0;
    color: #fff;
    background-color: #313131;
}

#expand-box
{
    width: 100%;
    padding: 0;
    margin: 7px 0 0 0;
}

#expand-box-header
{
    margin: 0;
    padding: 0 0 3px 2px;
}

.image-header-top {
    width: 100%;
}
.image-header-top > img {
    margin-left: 0vw;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.navbar ul {
    margin: 0;
    padding: 0 !important;
}

ol {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}
.bg-dark {
    background-color: #1c1c1c !important;
}

.charaIcon {
    position: relative;
    display: inline-block;
    width: 275px; /* Container width */
    height: 350px; /* Container height */
    overflow: hidden; /* Hide anything that exceeds container dimensions */
    margin: auto;
    border-radius: 10px;
}
.charaIcon > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.charaIcon > .chImage {
    position: absolute;
    width: 450px; /* Image width */
    height: 450px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: -85px;
    bottom: 0px;
    border-radius: inherit; /* Inherit border-radius from the container */
}
.charaIcon > .vrImage {
    position: absolute;
    width: 375px; /* Image width */
    height: 359px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: -22px;
    bottom: -2px;
    border-radius: inherit; /* Inherit border-radius from the container */
}
.charaIcon > .chSelect {
    position: absolute;
    width: 275px;
    height: 350px;
    background-size: 100px 100px;
    transform: translate(0px, 0px);
    background-repeat: repeat !important;
    border-radius: 10px;
}

.charaIcon > .chSelect.Strike {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Strike_BG.webp');
}
.charaIcon > .chSelect.Rapid {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Rapid_BG.webp');
}
.charaIcon > .chSelect.Technical {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Technical_BG.webp');
}
.charaIcon > .chSelect.Assault {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Assult_BG.webp');
}
.charaIcon > .chSelect.Support {
    background-image: url('/assets/roles/t_ui_CharacterSelect_Support_BG.webp');
}

.charaIcon > .chRole {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    transform: translate(2px, 2px);
}

.charaIcon > .chRole.Strike {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Power_icon.webp');
}
.charaIcon > .chRole.Rapid {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Speed_icon.webp');
}
.charaIcon > .chRole.Technical {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Technique_icon.webp');
}
.charaIcon > .chRole.Assault {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Defense_icon.webp');
}
.charaIcon > .chRole.Support {
    background-image: url('/assets/roles/T_ui_CharacterSelect_Support_icon.webp');
}
.charaIcon > .name {
    font-family: BarlowCondensed-Medium;
    width: 275px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(0px, 320px);
}

.stroke {
    color: #fff;
    text-shadow:
            3px 3px 2px #000,
            -3px 3px 2px #000,
            -3px -3px 0 #000,
            3px -3px 0 #000;
}

.eventtype {
    position: absolute;
    width: 145px;
    height: 34px;
    background-size: 145px 34px;
    transform: translate(0px, 119px);
}
.eventtype.Drop {
    background-image: url('/assets/Event/T_ui_BannerL_title_01_jp.webp');
}
.eventtype.Battle {
    background-image: url('/assets/Event/T_ui_BannerL_title_02_jp.webp');
}

.eventtype.Mission {
    background-image: url('/assets/Event/T_ui_BannerL_title_03_jp.webp');
}
.eventtype.Guild {
    background-image: url('/assets/Event/T_ui_BannerL_title_04_jp.webp');
}
.eventtype.Dominate {
    background-image: url('/assets/Event/T_ui_BannerL_title_05_jp.webp');
}
.transparent-background {
    background-color: rgba(255, 255, 255, 0.0);
}


.image-container {
    position: relative;
    max-width: 100%;
    text-align: center; /* Center-align text within the container */
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.text-overlay {
    font-family: BarlowCondensed-Medium;
    position: absolute;
    top: -4px;
    left: 5px;
    font-size: 2.5em;
    color: white;
    padding: 10px;
    transform: translate(0%, 0%); /* Center horizontally */
    transform-origin: left; /* Set transform origin to the right edge */

/* Media query for smaller screens */
@media (max-width: 1000px) {
    font-size: 2.1em; /* Adjust font size for smaller screens */
}
@media (max-width: 860px) {
    font-size: 1.9em; /* Adjust font size for smaller screens */
    transform: translate(0, -8px); /* Center horizontally */
}
@media (max-width: 740px) {
    font-size: 1.3em; /* Adjust font size for smaller screens */
    transform: translate(-5px, -10px); /* Center horizontally */
}
/* Media query for even smaller screens */
@media (max-width: 480px) {
    font-size: 1em; /* Further adjust font size for smaller screens */
    transform: translate(-7px, -6px); /* Center horizontally */
}
}

.eventtyper {
    position: absolute;
    top: 10%;
    left: 1%;
    width: 500px;
    height: 101px;
    background-size: 500px 101px;
    background-repeat: no-repeat;
    transform: translate(0px, 0px);

}

@media (max-width: 1060px) {
    .eventtyper {
        width: 400px;
        height: 81px;
        background-size: 400px 81px;
        transform: translate(0px, -5px);
    }
}

@media (max-width: 860px) {
    .eventtyper {
        width: 350px;
        height: 71px;
        background-size: 350px 71px;
        transform: translate(0px, -5px);
    }
}

@media (max-width: 720px) {
    .eventtyper {
        width: 300px;
        height: 61px;
        background-size: 300px 61px;
        transform: translate(0px, -5px);
    }
}

@media (max-width: 640px) {
    .eventtyper {
        width: 250px;
        height: 51px;
        background-size: 250px 51px;
        transform: translate(0px, -5px);
    }
}

@media (max-width: 480px) {
    .eventtyper {
        width: 185px;
        height: 37px;
        background-size: 185px 35px;
        transform: translate(0px, -2px);
    }
}


.eventtyper.Drop {
    background-image: url('/assets/Event/T_ui_event_title_01.webp');
}
.eventtyper.Battle {
    background-image: url('/assets/Event/T_ui_event_title_02.webp');
}

.eventtyper.Mission {
    background-image: url('/assets/Event/T_ui_event_title_03.webp');
}
.eventtyper.BeginnerMission {
    background-image: url('/assets/Event/T_ui_event_title_06.webp');
}
.eventtyper.UICollaborative {
    background-image: url('/assets/Event/T_ui_event_title_07.webp');
}
.eventtyper.Guild {
    background-image: url('/assets/Event/T_ui_event_title_04.webp');
}
.eventtyper.Dominate {
    background-image: url('/assets/Event/T_ui_event_title_05.webp');
}
.text-overlay-end {
    font-family: BarlowCondensed-Medium;
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 2.5em;
    color: white;
    padding: 10px;
    transform: translate(0%, -5px); /* Center horizontally */
    transform-origin: center; /* Set transform origin to the right edge */

/* Media query for smaller screens */
@media (max-width: 1000px) {
    font-size: 2.1em; /* Adjust font size for smaller screens */
}
@media (max-width: 860px) {
    font-size: 1.9em; /* Adjust font size for smaller screens */
    transform: translate(0, 5px); /* Center horizontally */
}
@media (max-width: 740px) {
    font-size: 1.3em; /* Adjust font size for smaller screens */
}
/* Media query for even smaller screens */
@media (max-width: 480px) {
    font-size: 1em; /* Further adjust font size for smaller screens */
    transform: translate(0, 8px); /* Center horizontally */
}
}

.shopIcon {
    position: relative;
    display: inline-block;
    width: 200px; /* Container width */
    height: 374px; /* Container height */
    overflow: hidden; /* Hide anything that exceeds container dimensions */
    margin: auto;
    border-radius: 10px;
}
.shopIcon > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.shopIcon > .costumeImage {
    position: absolute;
    width: 275px; /* Image width */
    height: 264px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: -35px;
    bottom: 75px;
    border-radius: inherit; /* Inherit border-radius from the container */
}
.shopIcon > .costumestars {
    position: absolute;
    width: 125px;
    height: 20px;
    background-size: 125px 20px;
    transform: translate(-62px, 320px);
    border-radius: 10px;
}
.shopIcon > .emoteImage {
    position: absolute;
    width: 200px; /* Image width */
    height: 200px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    transform: translate(-100px, 92px);
    border-radius: inherit; /* Inherit border-radius from the container */
}
.shopIcon > .nameplateImage {
    position: absolute;
    width: 500px;          /* keep original if you like */
    height: 84px;
    background-size: cover; /* Cover the container with the background image */
    clip-path: inset(0 2px 0 340px); /* top right bottom left — hides left 50px */
    transform: translate(-420px, 130px);
    border-radius: inherit; /* Inherit border-radius from the container */
}
.shopIcon > .currencyImage {
    position: absolute;
    width: 180px; /* Image width */
    height: 180px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    transform: translate(-90px, 92px);
    border-radius: inherit; /* Inherit border-radius from the container */
}
.shopIcon > .EmoteTXT {
    position: absolute;
    width: 100px;
    height: 41px;
    background-size: 100px 41px;
    transform: translate(50px, 240px);
    background-repeat: no-repeat !important;
    border-radius: 10px;
    background-image: url('/assets/Event/emote_title.webp');
}
.shopIcon > .NameplateTXT {
    position: absolute;
    width: 150px;
    height: 61px;
    background-size: 150px 61px;
    transform: translate(25px, 220px);
    background-repeat: no-repeat !important;
    border-radius: 2px;
    background-image: url('/assets/Event/nameplate_title.webp');
}
.shopIcon >  .VoiceTXT {
     position: absolute;
     width: 100px;
     height: 41px;
     background-size: 100px 41px;
     transform: translate(50px, 240px);
     background-repeat: no-repeat !important;
     border-radius: 10px;
     background-image: url('/assets/Event/voice_title.webp');
 }
.shopIcon >  .CostumeTXT {
    position: absolute;
    width: 127px;
    height: 41px;
    background-size: 127px 41px;
    transform: translate(37px, 244px);
    background-repeat: no-repeat !important;
    border-radius: 10px;
    background-image: url('/assets/Event/costume_title.webp');
}
.shopIcon> .shopSelect {
    position: absolute;
    width: 200px;
    height: 374px;
    background-size: 200px 374px;
    transform: translate(0px, 0px);
    border-radius: 10px;
}

.shopIcon > .shopSelect.BASE {
    background-image: url('/assets/Event/T_ui_Shop_base_M_normal.webp');
}
.shopIcon > .shopSelect.DROP {
    background-image: url('/assets/Event/T_ui_Shop_base_M.webp');
}
.shopIcon > .shopSelect.COSTUME {
    background-image: url('/assets/Event/T_ui_Shop_base_M_premium.webp');
}
.shopIcon > .shopSelect.EMOTE {
    background-image: url('/assets/Event/T_ui_Shop_base_M_premium_emote.webp');
}
.shopIcon > .shopSelect.VOICE {
    background-image: url('/assets/Event/T_ui_Shop_base_M_premium_voice.webp');
}
.shopIcon > .shopSelect.NAMEPLATE {
    background-image: url('/assets/Event/T_ui_Shop_base_M.webp');
}

.shopIcon > .name {
    font-family: BarlowCondensed-Medium;
    width: 175px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(12px, 335px);
}
.shopIcon > .emotesay {
    font-family: BarlowCondensed-Medium;
    width: 175px;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(0px, 59px);
    rotate: -10deg;
}
.shopIcon > .emotesay2 {
    font-family: BarlowCondensed-Medium;
    width: 175px;
    overflow: hidden; /* Keeps the text confined within the container */
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(0px, 59px);
    rotate: -10deg;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    /* Enable text wrapping */

}

.shopIcon > .limit {
    font-family: BarlowCondensed-Medium;
    width: 178px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    transform: translate(10px, 20px);
}

.shopIcon > .totalss {
    font-family: BarlowCondensed-Medium;
    width: 178px;
    font-size: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: right;
    transform: translate(-5px, 230px);
}

.shopIcon > .cost {
    font-family: BarlowCondensed-Medium;
    width: 178px;
    font-size: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: right;
    transform: translate(11px, 291px);
}
.shopIcon > .costIcon {
    position: absolute;
    width: 45px; /* Image width */
    height: 45px; /* Image height */
    background-size: cover; /* Cover the container with the background image */
    left: 8px;
    bottom: 40px;
    border-radius: inherit; /* Inherit border-radius from the container */
}
.shopIcon > .emotetxtbg {
    position: absolute;
    width: 180px; /* Image width */
    height: 65px; /* Image height */
    background-size: cover; /* Cover the container with the background image */

    transform: translate(-90px, 44px);
    border-radius: inherit; /* Inherit border-radius from the container */
}

.shopIcon > .costumeOBTAIN {
    font-family: BarlowCondensed-Medium;
    width: 177px;
    height: 42px; /* Image height */
    font-size: 14px;
    padding: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    transform: translate(12px, 287px);
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
}
.shopIcon > .EmoteDESCRIPTS {
    font-family: BarlowCondensed-Medium;
    width: 177px;
    height: 60px; /* Uniform height */
    font-size: 14px;
    padding: 2px;
    /* Overflow handling for multi-line text */
    overflow: hidden; /* Hide any overflowing content */
    text-align: center;

    /* Flexbox for centering */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    text-align: center;

    /* Enable multi-line text wrapping */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Ensure long words wrap */
    word-break: break-word; /* Break long words at boundaries */

    /* Positioning */
    transform: translate(12px, 50px);
}

.shopIcon > .costumeUnique1Frame {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    transform: translate(14px, 215px);
}

.shopIcon > .costumeUnique1Frame.Technical {
    background-image: url('/assets/roleslots/role_slot_frame_technical.png');
}
.shopIcon > .costumeUnique1Frame.Strike {
    background-image: url('/assets/roleslots/role_slot_frame_strike.png');
}
.shopIcon > .costumeUnique1Frame.Rapid {
    background-image: url('/assets/roleslots/role_slot_frame_rapid.png');
}
.shopIcon > .costumeUnique1Frame.Support {
    background-image: url('/assets/roleslots/role_slot_frame_support.png');
}
.shopIcon > .costumeUnique1Frame.Assault {
    background-image: url('/assets/roleslots/role_slot_frame_assault.png');
}
.shopIcon > .costumeunique1bg {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    background-image: url('/assets/roleslots/slot_character_mask.png');
    transform: translate(14px, 215px);
}

.shopIcon > .CostumeUnique1mark {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    background-color: transparent;
   transform: translate(155px, 215px);
}
.shopIcon > .CostumeUnique1mark.HERO{
    background-image: url('/assets/roleslots/bigH.png');
}
.shopIcon > .CostumeUnique1mark.VILLAIN {
    background-image: url('/assets/roleslots/bigV.png');
}

.shopIcon > .costumeUnique2Frame {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    transform: translate(156px, 215px);
}

.shopIcon > .costumeUnique2Frame.Technical {
    background-image: url('/assets/roleslots/role_slot_frame_technical.png');
}
.shopIcon > .costumeUnique2Frame.Strike {
    background-image: url('/assets/roleslots/role_slot_frame_strike.png');
}
.shopIcon > .costumeUnique2Frame.Rapid {
    background-image: url('/assets/roleslots/role_slot_frame_rapid.png');
}
.shopIcon > .costumeUnique2Frame.Support {
    background-image: url('/assets/roleslots/role_slot_frame_support.png');
}
.shopIcon > .costumeUnique2Frame.Assault {
    background-image: url('/assets/roleslots/role_slot_frame_assault.png');
}
.shopIcon > .costumeunique2bg {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    background-image: url('/assets/roleslots/slot_character_mask.png');
    transform: translate(156px, 215px);
}

.shopIcon > .CostumeUnique2mark {
    width: 30px;
    height: 31px;
    background-size: 30px 31px;
    background-color: transparent;
    transform: translate(155.5px, 215px);
}
.shopIcon > .CostumeUnique2mark.HERO{
    background-image: url('/assets/roleslots/bigH.png');
}
.shopIcon > .CostumeUnique2mark.VILLAIN {
    background-image: url('/assets/roleslots/bigV.png');
}





.bg-dark {
    background-color: #1c1c1c !important;
}

.modal-dialog {
    max-width: 1240px;
    margin: 2rem auto;
}

#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#scrollToTopBtn:hover {
    background-color: #777;
}
.home-header {
    background: url('/assets/headerimage.webp') no-repeat left;
    width: auto;
    height: 40px;
    text-align: left;
    position: relative;
}

.home-name {
    position: absolute;
    top: 19px;
    left: 15px; /* Align text to the left edge of the container */
    transform: translateY(-50%);
    font-size: 35px;
    color: #000;
    text-shadow: 2px 2px 2px rgb(255, 255, 255); /* Solid drop shadow */
}
.homenews-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust the minmax value as needed */
    grid-gap: 15px;
}
.newbanners {
    max-height: 280px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .newbanners {
        max-height: 185px;
    }

}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .homenews-container {
        grid-template-columns: 1fr; /* Change to a single column layout on smaller screens */
    }

    .newszoom {
        max-width: none; /* Remove max-width on smaller screens */
    }
}

.imagelist {
    position: relative;
    display: inline-block;
    max-width: 350px;
    height: 180px;
    margin-left: 10px;
    margin-right: 10px;
}
.imagelist > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.imagelist .listtimes {
    width: 350px;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    bottom:-15px;
    position: absolute;

}
.imagelist .eventtimes {
    width: 350px;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    bottom:-6px;
    position: absolute;

}
.imagelist .listnames {
    width: 350px;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    top:-2px;
    position: absolute;
}

.newszoom {
    transition: transform .2s;
    width: 100%; /* Make the width 100% to fit the container */
    max-width: 365px; /* Set a max-width to maintain a reasonable size on larger screens */
}

.newszoom:hover {
    -ms-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}
.slot-wrapper {
    display: flex; /* Use flexbox to position items horizontally */
    align-items: center; /* Vertically align icon and text */
    gap: 10px; /* Add space between the icon and the text */
}

.slot-character-icon {
    position: relative;
    display: inline-block;
    width: 96px;
    margin-inline: 10px;
}
.slot-character-icon > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}
.slot-character-icon > .character {
    position: relative;
    width: 92px;
    height: 92px;
    transform: translate(3px, 3px);
}
.slot-mask {
    -webkit-mask-image: url('/assets/roleslots/slot_character_mask.png');
    mask-image: url('/assets/roleslots/slot_character_mask.png');
    background-size: contain;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 96px;
    height: 100px;
}
.slot-character-icon > .framing {
    width: 96px;
    height: 100px;
    background-size: 96px 100px;
}
.slot-character-icon > .framing.Technical {
    background-image: url('/assets/roleslots/role_slot_frame_technical.png');
}
.slot-character-icon > .framing.Strike {
    background-image: url('/assets/roleslots/role_slot_frame_strike.png');
}
.slot-character-icon > .framing.Rapid {
    background-image: url('/assets/roleslots/role_slot_frame_rapid.png');
}
.slot-character-icon > .framing.Support {
    background-image: url('/assets/roleslots/role_slot_frame_support.png');
}
.slot-character-icon > .framing.Assault {
    background-image: url('/assets/roleslots/role_slot_frame_assault.png');
}

.slot-character-icon > .mark {
    width: 96px;
    height: 100px;
    background-size: 96px 100px;
    background-color: transparent;
}
.slot-character-icon > .mark.HERO{
    background-image: url('/assets/roleslots/T_ui_RoleSlot_Mark_H.png');
}
.slot-character-icon > .mark.VILLAIN {
    background-image: url('/assets/roleslots/villainmark.png');
}
.slot-character-icon  > .select1 {
    position: absolute;
    width: 92px;
    height: 92px;
    background-size: 92px 92px;
    transform: translate(3px, 3px);
    animation-name: slotfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-direction: alternate;
}

.slot-character-icon > .select2 {
    position: relative;
    width: 95px;
    height: 95px;
    background-size: 95px 95px;
    transform: translate(0, 2px);
    animation-name: slotfade;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-direction: alternate-reverse;
}
@keyframes slotfade {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.text-box {
    min-width: 345px;
    max-width: 345px;
    height: 150px; /* Adjust as needed */
    overflow-y: auto; /* Ensures scrollable text if it exceeds the container */
    padding: 10px; /* Adds padding inside the text box */
    margin: 0;  /* Ensure no margin */
    line-height: 1.15; /* Adjust line-height as needed */
    color: white;
    background-color: #3d3d3d;
    text-align: left; /* Aligns text to the left */
}

  @media (max-width: 450px) {
    .text-box {
      min-width: auto; /* Remove fixed min-width for small screens */
    }
  }


  .missionItem {
    position: relative;
    /*display: inline-block;*/
    width:  75px;
    margin-bottom: 0px;
    background-color: #0f0f17;
    background-repeat: no-repeat;
    background-size: 75px 77px;
}
.missionItem > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.missionItem > .itemBG {
    position: relative;
    width: 75px;
    height: 77px;
    overflow: hidden;
    transform: translate(0px, 0px);
    background-image: url('/assets/Missions/T_ui_Mission_ItemBG.png');
    background-size: 75px 77px;

}
.missionItem > .item {
    position: absolute;
    width: 62px;
    height: 62px;
    overflow: hidden;
    transform: translate(-32px, -80px);

}
.missionItem > .nameplateBG {
  position: absolute;
  width: 250px;          /* keep original if you like */
  height: 42px;
  transform: translate(-219px, -68px);
  clip-path: inset(0 2px 0 190px); /* top right bottom left — hides left 50px */
}

.missionItem > .itemSTAR {
    position: absolute;
    width: 65px;
    height: 65px;
    overflow: hidden;
    transform: translate(-33px, -78px);

}
.missionItem > .itemEMB {
    position: absolute;
    width: 54px;
    height: 54px;
    overflow: hidden;
    transform: translate(-28px, -77px);

}
.missionItem > .itemEXP {
    position: absolute;
    width: 62px;
    height: 62px;
    overflow: hidden;
    transform: translate(-32px, -80px);

}
.missionItem > .itemCUR {
    position: absolute;
    width: 60px;
    height: 60px;
    overflow: hidden;
    transform: translate(-30px, -78px);

}
.missionItem > .itemCOS {
    position: absolute;
    width: 50px;
    height: 50px;
    overflow: hidden;
    transform: translate(-26px, -71px);

}
.missionItem > .costumeIcon {
    position: absolute;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transform: translate(-35px, -75px);
    background-size: 20px 20px;
}
.missionItem > .appealIcon {
    position: absolute;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transform: translate(-37px, -75px);
    background-size: 20px 20px;
}
.missionItem > .voiceIcon {
    position: absolute;
    width: 20px;
    height: 20px;
    overflow: hidden;
    transform: translate(-37px, -75px);
    background-size: 20px 20px;
}
.missionItem > .amountnum {
    position: absolute;
    width: 75px;
    height: 77px;
    overflow: hidden;
    transform: translate(0px, 56px);
    background-size: 75px 77px;
}



  .charaBanner {
    position: relative;
    /*display: inline-block;*/
    width:  575px;
    margin-bottom: 0px;
    background-color: #0f0f17;
    background-repeat: no-repeat;
    background-size: 123px 123px;
}
.charaBanner > div {
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    max-width: none;
}

.charaBanner > .charaImage {
    position: relative;
    width: 575px;
    height: 154px;
    overflow: hidden;
    transform: translate(0px, 0px);
    border-radius: 10px;
}

.charaBanner > .charaType {
    position: absolute;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    transform: translate(6px, 5px);
}
.charaBanner > .charaType.Character {
    background-image: url('/assets/icons/T_ui_GashaResult_character_icon_mark.png');
}
.charaBanner > .charaType.Variant {
    background-image: url('/assets/icons/T_ui_GashaResult_action_icon_mark.png');
}

.charaBanner > .ReleaseNew {
    position: absolute;
    width: 55px;
    height: 23px;
    background-size: 55px 23px;
    background-image: url('/assets/icons/newicon.png');
    top: 5px;
    left: 510px;
    transform: rotate(0); /* Initial rotation */
    animation: isNewbounce 1s infinite;
}

.Releasezoom {
    transition: transform .2s;
    width: 575px;
}
.Releasezoom:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}
.release {
    position: relative;
    transform: translate(-5px, 0px); /* Adjust for perfect centering */
    font-family: MHURMediumFont; 
    font-size: 16px;
    text-align: center !important; /* Corrected text alignment */
    background: linear-gradient(to top, white,rgb(126, 219, 255)); 
    -webkit-background-clip: text; 
    white-space: nowrap; /* Prevent text from wrapping */
    text-shadow: 
        -2px -2px 4px black,  /* Increased shadow size */
        2px -2px 4px black,   /* Increased shadow size */
        -2px 2px 4px black,   /* Increased shadow size */
        2px 2px 4px black;    /* Increased shadow size */
}
@media (max-width: 575px) {
    .charaBanner > .charaImage {
        width: 100%; /* Remove fixed min-width for small screens */
        height: auto;
    }
    .charaBanner {
        width: 100%; /* Remove fixed min-width for small screens */
        height: auto;
    }
    .charaBanner > .ReleaseNew {
        left: 89.5%;
        width: 35px;
        height: 14px;
        background-size: 35px 14px;
    }

  }

@font-face { font-family: 'Teko-Regular'; src: url('/fonts/Teko-Regular.ttf'); }
@font-face { font-family: 'Teko-Light'; src: url('/fonts/Teko-Light.ttf'); }
@font-face { font-family: 'BarlowCondensed-Medium'; src: url('/fonts/BarlowCondensed-Medium.ttf'); }
@font-face { font-family: 'BarlowCondensed-Light'; src: url('/fonts/BarlowCondensed-Light.ttf'); }
@font-face { font-family: 'MHURFont'; src: url('/fonts/byk_VsAcademy.ttf'); }
@font-face { font-family: 'MHURBasicFont'; src: url('/fonts/byk_font.ttf'); }
@font-face { font-family: 'MHURMediumFont'; src: url('/fonts/DIN_Next_W10_Medium.otf'); }
@font-face { font-family: 'MHURRegularFont'; src: url('/fonts/DIN_Next_W01_Regular.otf'); }
@font-face { font-family: 'MHURNameplates'; src: url('/fonts/byk-Name-Plate.otf'); }