.home-wrapper {
    text-align:center;
    padding-top:25px;
}

.home-wrapper h1 {
    position:absolute;
    left:-2323px;
    top:-2323px;
}

.home-logo a:visited,.home-logo a:link {
    display:block;
    cursor:default;
    text-indent:-9000px;
    cursor:pointer;
}


.home-logo {
    display: block;
    cursor: default;
    width: 600px;   /* 261 * 1.5 */
    height: 300px;  /* 119 * 1.5 */
    margin: 0 auto 20px auto;

    background-image: url("../images/logos/legion-header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.home-menu {
    order:-1;
    flex:0 0 450px;
    box-sizing:border-box;
    padding:0 20px 0 0;
    border-right:1px solid rgba(157,255,74,.14);
}

.home-navigation {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    width:min(920px, calc(100% - 36px));
    box-sizing:border-box;
    margin:16px auto 0;
    padding:15px 16px;
    border:1px solid rgba(157,255,74,.2);
    border-radius:9px;
    background:linear-gradient(135deg,rgba(13,27,17,.96),rgba(6,13,9,.98));
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 9px 24px rgba(0,0,0,.28);
    text-align:left;
}

.home-navigation-copy {
    flex:1 1 290px;
    min-width:210px;
}

.home-navigation-copy > span {
    color:#ffd25a;
    font-size:10px;
    font-weight:bold;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.home-navigation-copy h2 {
    margin:3px 0 3px;
    color:#fff;
    font-size:18px;
}

.home-navigation-copy p {
    margin:0;
    color:#aebcaf;
    font-size:12px;
    line-height:1.45;
}

#home-menu > .menu-buttons {
    display:grid;
    grid-template-columns:repeat(2,minmax(150px,1fr));
    gap:10px;
    padding:0;
}

#home-menu .menu-buttons > a,
#home-menu .menu-buttons > a:link,
#home-menu .menu-buttons > a:visited {
    display:flex;
    position:relative;
    align-items:flex-start;
    justify-content:flex-start;
    min-height:72px;
    box-sizing:border-box;
    padding:13px 30px 11px 61px !important;
    color:#f1f6f1 !important;
    font-size:14px;
    font-weight:bold;
    text-decoration:none !important;
    border:1px solid rgba(185,215,184,.3);
    border-left-width:4px;
    border-radius:6px;
    background:radial-gradient(circle at 28px 20px,rgba(157,255,74,.12),transparent 45px),linear-gradient(135deg,#17221a,#0c130e);
    box-shadow:0 4px 12px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.05);
    cursor:pointer !important;
    transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;
}

#home-menu .menu-buttons > a:nth-child(1) { border-left-color:#9dff4a; }
#home-menu .menu-buttons > a:nth-child(2) { border-left-color:#e8bd55; }
#home-menu .menu-buttons > a:nth-child(3) { border-left-color:#58c9df; }
#home-menu .menu-buttons > a:nth-child(4) { border-left-color:#b688f1; }

#home-menu .menu-buttons > a:nth-child(1)::after { color:#9dff4a; }
#home-menu .menu-buttons > a:nth-child(2)::after { color:#e8bd55; }
#home-menu .menu-buttons > a:nth-child(3)::after { color:#58c9df; }
#home-menu .menu-buttons > a:nth-child(4)::after { color:#b688f1; }

#home-menu .menu-buttons > a[href="?factions"]::after {
    content:"→";
    transform:none;
}

#home-menu .menu-buttons > a::after {
    content:"›";
    position:absolute;
    top:50%;
    right:11px;
    margin:0;
    color:#8ecb60;
    font-size:20px;
    font-weight:normal;
    line-height:1;
    transform:rotate(90deg);
}

#home-menu .menu-buttons > a > span.hassubmenu,
#home-menu .menu-buttons > a > span:not(.hassubmenu) {
    display:block;
    overflow:hidden;
    max-width:100%;
    color:#f3f7f2;
    font-size:14px;
    line-height:19px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#home-menu .menu-buttons > a > small {
    position:absolute;
    right:28px;
    bottom:11px;
    left:61px;
    overflow:hidden;
    color:#96a899;
    font-size:10px;
    font-weight:normal;
    line-height:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.home-menu-icon {
    position:absolute;
    top:13px;
    left:13px;
    width:36px;
    height:36px;
    border:1px solid rgba(191,255,137,.36);
    border-radius:8px;
    background-position:center;
    background-size:cover;
    box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 12px rgba(157,255,74,.1);
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

#home-menu .menu-buttons > a:nth-child(1) .home-menu-icon { background-image:url('../images/wow/icons/large/achievement_reputation_01.jpg'); }
#home-menu .menu-buttons > a:nth-child(2) .home-menu-icon { background-image:url('../images/wow/icons/large/inv_misc_enggizmos_20.jpg'); }
#home-menu .menu-buttons > a:nth-child(3) .home-menu-icon { background-image:url('../images/wow/icons/large/achievement_guildperk_everybodysfriend.jpg'); }
#home-menu .menu-buttons > a:nth-child(4) .home-menu-icon { background-image:url('../images/wow/icons/large/inv_misc_book_09.jpg'); }

#home-menu .menu-buttons > a:hover,
#home-menu .menu-buttons > a:focus-visible,
#home-menu .menu-buttons > a.open {
    color:#fff !important;
    border-color:rgba(205,238,194,.68);
    background:linear-gradient(135deg,#243429,#111c14);
    outline:none;
    transform:translateY(-2px);
    box-shadow:0 5px 13px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.08);
}

#home-menu .menu-buttons > a:hover .home-menu-icon,
#home-menu .menu-buttons > a:focus-visible .home-menu-icon,
#home-menu .menu-buttons > a.open .home-menu-icon {
    border-color:#c7ff93;
    box-shadow:0 0 0 2px rgba(0,0,0,.44),0 0 17px rgba(157,255,74,.34);
    transform:scale(1.05);
}

#home-menu .menu-buttons > a.open::after {
    color:#c7ff93;
    transform:rotate(-90deg);
}

#home-menu .menu-buttons span.hassubmenu {
    padding-right:0;
    background:none;
}

.home-search-label {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.home-shortcuts {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    width:min(920px, calc(100% - 36px));
    margin:18px auto 0;
    text-align:left;
}

.home-shortcuts a,
.home-shortcuts a:link,
.home-shortcuts a:visited {
    position:relative;
    display:flex;
    min-height:78px;
    box-sizing:border-box;
    flex-direction:column;
    justify-content:center;
    padding:11px 14px;
    overflow:hidden;
    isolation:isolate;
    color:#e8f4e8 !important;
    text-decoration:none;
    border:1px solid rgba(157,255,74,.17);
    border-radius:7px;
    background:#08100b;
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.26);
    transition:border-color .16s ease,transform .16s ease;
}

.home-shortcuts a::before {
    content:"";
    position:absolute;
    z-index:0;
    top:50%;
    right:14px;
    width:56px;
    height:56px;
    background-image:var(--shortcut-image);
    background-repeat:no-repeat;
    background-position:center;
    background-size:56px 56px;
    border-radius:6px;
    box-shadow:0 0 0 1px rgba(190,255,125,.22),0 5px 14px rgba(0,0,0,.5);
    opacity:.9;
    transform:translateY(-50%);
    transition:opacity .2s ease,transform .24s ease;
}

.home-shortcuts a::after {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    background:linear-gradient(90deg,rgba(5,10,7,.99) 0%,rgba(8,16,10,.94) 58%,rgba(7,13,9,.48) 78%,rgba(5,9,6,.08) 100%);
}

.home-shortcuts a:hover,
.home-shortcuts a:focus-visible {
    color:#fff !important;
    border-color:rgba(157,255,74,.46);
    transform:translateY(-1px);
    outline:none;
}

.home-shortcuts a:hover::before,
.home-shortcuts a:focus-visible::before {
    opacity:1;
    transform:translateY(-50%) scale(1.04);
}

.home-shortcuts strong {
    position:relative;
    z-index:1;
    max-width:72%;
    color:#bff779;
    font-size:15px;
    line-height:1.25;
    text-shadow:0 2px 4px #000;
}

.home-shortcuts small {
    display:block;
    position:relative;
    z-index:1;
    max-width:72%;
    margin-top:3px;
    color:#aebcaf;
    font-size:13px;
    line-height:1.3;
    text-shadow:0 1px 3px #000;
}

.home-features {
    width:min(920px, calc(100% - 36px));
    box-sizing:border-box;
    margin:18px auto 0;
    padding:16px;
    border:1px solid rgba(255,210,90,.22);
    border-radius:9px;
    background:linear-gradient(135deg,rgba(32,27,14,.9),rgba(8,16,11,.96) 52%,rgba(18,13,29,.9));
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.28);
    text-align:left;
}

.home-features-heading span {
    color:#ffd25a;
    font-size:10px;
    font-weight:bold;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.home-features-heading h2 {
    margin:3px 0 2px;
    color:#fff;
    font-size:19px;
}

.home-features-heading p {
    margin:0;
    color:#aebcaf;
    font-size:12px;
}

.home-feature-shortcuts {
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    margin:13px 0 0;
}

.home-feature-shortcuts a,
.home-feature-shortcuts a:link,
.home-feature-shortcuts a:visited {
    min-height:94px;
    padding:15px 18px;
}

.home-feature-shortcuts a::before {
    right:17px;
    width:64px;
    height:64px;
    background-size:64px 64px;
}

.home-feature-shortcuts strong {
    font-size:17px;
}

.home-feature-mythic {
    border-color:rgba(190,135,255,.36) !important;
    background:#120d19 !important;
}

.home-feature-mythic strong {
    color:#d1a6ff;
}

.home-feature-solo {
    border-color:rgba(168,231,109,.35) !important;
    background:#0c180f !important;
}

.home-feature-travel {
    border-color:rgba(90,176,255,.38) !important;
    background:#0b141b !important;
}

.home-feature-travel strong {
    color:#82c8ff;
}

.masterwow-connect {
    display:block;
    position:relative;
    width:min(920px, calc(100% - 36px));
    height:104px;
    margin:12px auto 18px;
    overflow:hidden;
    border:1px solid rgba(167,123,255,.30);
    border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.55);
    text-align:left;
    background:#07110e;
    transform-origin:center;
    will-change:opacity,transform,filter;
}
.masterwow-connect img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); will-change:transform,filter; }
.masterwow-connect::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,7,4,.96),rgba(2,7,4,.76) 48%,rgba(2,7,4,.18)); }
.masterwow-connect::before { content:""; position:absolute; z-index:2; top:-60%; bottom:-60%; left:-32%; width:20%; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,rgba(195,255,157,.26),transparent); transform:skewX(-18deg); }
.masterwow-connect-copy { position:absolute; z-index:1; left:20px; top:50%; transform:translateY(-50%); color:#fff; text-shadow:0 2px 4px #000; }
.masterwow-connect-copy strong { display:block; color:#bff779; font-size:18px; }
.masterwow-connect-copy small { display:block; margin-top:5px; color:#d2ddd4; font-size:13px; }
.masterwow-connect-action { position:absolute; z-index:1; right:20px; top:50%; transform:translateY(-50%); padding:9px 13px; color:#f0eaff; font-size:14px; font-weight:bold; border:1px solid rgba(194,167,255,.42); border-radius:5px; background:rgba(22,13,35,.78); }

.masterwow-connect.mw-connect-animated {
    animation:mwConnectCard 8s cubic-bezier(.22,.75,.2,1) infinite;
}

.masterwow-connect.mw-connect-animated img {
    animation:mwConnectImage 8s ease-in-out infinite;
}

.masterwow-connect.mw-connect-animated::before {
    animation:mwConnectShine 8s ease-in-out infinite;
}

.masterwow-connect.mw-connect-animated .masterwow-connect-action {
    animation:mwConnectAction 8s ease-in-out infinite;
}

@keyframes mwConnectCard {
    0%{opacity:0;transform:translateY(16px) scale(.975);filter:blur(5px);box-shadow:0 0 0 rgba(109,238,91,0)}
    12%,68%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 24px rgba(109,238,91,.10)}
    82%,100%{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(4px);box-shadow:0 0 0 rgba(109,238,91,0)}
}

@keyframes mwConnectImage {
    0%{transform:scale(1.08) translateX(1.5%);filter:saturate(.72) brightness(.72)}
    12%,68%{transform:scale(1.03) translateX(0);filter:saturate(1.08) brightness(1)}
    100%{transform:scale(1.08) translateX(-1.5%);filter:saturate(.72) brightness(.72)}
}

@keyframes mwConnectShine {
    0%,14%,60%,100%{left:-32%;opacity:0}
    24%{opacity:.9}
    44%{left:116%;opacity:0}
}

@keyframes mwConnectAction {
    0%,12%,56%,100%{transform:translateY(-50%) scale(1)}
    61%{transform:translateY(-50%) scale(1.06);box-shadow:0 0 18px rgba(177,128,255,.28)}
    67%{transform:translateY(-50%) scale(1)}
}

@media (max-width:700px) {
    .home-navigation { align-items:stretch; flex-direction:column; gap:13px; }
    .home-navigation-copy { flex:auto; min-width:0; }
    .home-menu { order:0; flex:auto; padding:13px 0 0; border-top:1px solid rgba(157,255,74,.14); border-right:0; }
    #home-menu > .menu-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-shortcuts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .home-feature-shortcuts { grid-template-columns:1fr; }
    .masterwow-connect-action { display:none; }
}

@media (max-width:900px) and (min-width:701px) {
    .home-feature-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-feature-travel { grid-column:1 / -1; }
}

@media (max-width:440px) {
    .home-navigation { width:min(920px, calc(100% - 24px)); padding:13px; }
    #home-menu > .menu-buttons { grid-template-columns:1fr; }
    .home-shortcuts { grid-template-columns:1fr; }
    .home-features { width:min(920px, calc(100% - 24px)); padding:13px; }
    .masterwow-connect { height:94px; }
    .masterwow-connect-copy { right:16px; left:16px; }
}

.home-search form {
    display:block;
    position:relative;
    width:425px;
    margin:0 auto;
}

.home-search input {
    width:100%;
    font-size:20px;
    color:black;
    padding:3px;
    margin:0;
    outline:0;
    border:1px solid #adadad;
    background:white url(../images/ui/form/input-textbox-bg.gif) repeat-x;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

.home-search a {
    display:block;
    position:absolute;
    right:-3px;
    top:4px;
    width:24px;
    height:24px;
    background:url(../images/header/search2.gif) 4px 4px no-repeat;
}

.home-oneliner {
    margin:0;
    padding-top:35px;
    color:#ccc;
    line-height:1.75em;
    font-size:12px;
}

.home-update-status {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 10px;
    margin:9px auto 0;
    color:#aebcaf;
    font-size:12px;
}

.home-update-status strong {
    color:#a8e76d;
}

.home-update-status > span:not(.home-update-dot) + span::before {
    content:"·";
    margin-right:10px;
    color:#637268;
}

.home-update-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#75db57;
    box-shadow:0 0 8px rgba(117,219,87,.75);
}

@media (max-width:440px) {
    .home-update-status {
        flex-direction:column;
        gap:4px;
    }

    .home-update-status > span:not(.home-update-dot) + span::before {
        content:"";
        margin:0;
    }
}

.home-featuredbox {
    font-size:13px;
    position:relative;
    text-align:left;
    width:415px;
    height:191px;
    margin:37px auto 10px auto;
    background:no-repeat;
    background-color:transparent;
}

.home-featuredbox-extended {
    width:515px;
}

.home-featuredbox-links a,.home-featuredbox-links var {
    position:absolute;
    display:block;
}

.home-featuredbox-links a {
    z-index:5;
}

.home-featuredbox-links var.active {
    background-color:white!important;
    opacity:.075!important;
    filter:alpha(opacity=7.5)!important;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}

.home-featuredbox-inner {
    padding:25px 0 0 26px;
    margin:0;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

.home-featuredbox li {
    line-height:2em;
}

.toplinks {
    background:black;
    padding:5px 2px;
    position:absolute;
    line-height:normal;
    height:auto;
    overflow:visible;
    right:0;
    top:0;
}

body, html {
    height:100%;
}

.home-footer {
    width:500px;
    margin:0 auto;
    text-align:center;
    font-size:11px;
    margin-top:40px;
}

.home-footer ul {
    margin:0;
    padding:0;
}

.home-footer li {
    display:inline;
    padding:0 6px;
    border-right:1px solid #333;
    background:none;
}

.home-footer li:last-child {
    border:0;
}