@media screen and (max-width:1300px){
	.main {
		width: 1100px;
	}
	.banner {
		height: 214px;
	}
}

@media screen and (max-width:1200px){
	.main {
		width: 1000px;
	}
	.banner {
		height: 192px;
	}
}

@media screen and (max-width:1100px){
	.main {
		width: 900px;
	}
	nav .container > div > ul > li > a {
		padding: 20px 10px;
	}
	.banner {
		height: 170px;
	}
}

/* Althea responsive layer */
@media screen and (max-width: 1180px) {
	.main { width: min(100% - 32px, 1040px); }
	.topBar { padding-inline: 16px; }
	.topBarLogin input { width: 104px; }
	.feedContainer { grid-template-columns: minmax(0, 1fr) 290px; }
	.siteFrame { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
	.page_home .banner { min-height: min(580px, calc(100svh - 58px)); }
	.page_home .bannerExplore { width: min(760px, 100%); margin: 0; }
}

@media screen and (max-width: 920px) {
	.main { width: min(100% - 24px, 820px); }
	.topBar { position: relative; padding-inline: 12px; }
	.topBarInner { flex-wrap: wrap; padding: 8px 0; }
	.topBarLinks { flex: 1 1 auto; }
	.topBarRight { display: contents; }
	.topBarLogin { order: 3; width: 100%; margin-left: 0; }
	.topBarLogin > div { flex: 1 1 0; }
	.topBarLogin input { width: 100%; }
	.siteFrame { display: block; }
	.siteNav { position: sticky; top: 0; margin-top: 12px; padding: 8px 10px; }
	.siteNav .container { display: flex; min-height: 54px; flex-wrap: wrap; align-items: center; }
	.sideNavMobileTitle { display: inline-flex; align-items: center; gap: 8px; }
	.navToggle { display: inline-flex; }
	.siteNav .navBrand { width: 46px; height: 46px; margin: 0; }
	.siteNav .navBrand img { width: 44px; height: 44px; }
	.siteNav .navContents { display: none; flex-basis: 100%; align-items: stretch; padding: 8px 0 6px; }
	.siteNav .navContents.is-open { display: block; }
	.navAccordion { padding-top: 6px; }
	.page_home .banner { min-height: 620px; }
	.bannerExploreLinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bannerExploreLinks a:nth-child(even) { border-right: 1px solid rgba(129, 174, 205, .14); }
	.bannerExploreLinks a:nth-child(3) { border-right: 0; }
	.bannerExploreLinks a:nth-child(n+4) { border-top: 1px solid rgba(129, 174, 205, .14); }
	.bannerExploreLinks a:last-child { grid-column: auto; }
	.heroLoginFields { flex-wrap: wrap; }
	.heroLoginFields > div { flex: 1 1 180px; }
	.feedContainer { grid-template-columns: 1fr; }
	.mainContentPanel > .leftPane { padding: 12px; }
	.rightPane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.search_widget #name_suggestion { left: 0; right: auto; z-index: 20; }
	.monsterGrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media screen and (max-width: 640px) {
	body { font-size: 15px; }
	.main { width: min(100% - 18px, 600px); }
	.topBarInner { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
	.topBarBrand { grid-column: 1; grid-row: 1; width: 42px; height: 42px; margin: 0; flex-basis: 42px; }
	.topBarBrand img { width: 40px; height: 40px; }
	.topBarLinks { grid-column: 2; grid-row: 1; justify-content: end; }
	.topBarLinks a { padding-inline: 7px; }
	.topBarActions { grid-column: 1 / -1; grid-row: 3; justify-content: stretch; margin: 0; }
	.topBarActions a { flex: 1 1 0; }
	.topBarPlay, .topBarOnline { min-height: 40px; padding-inline: 9px; }
	.topBarLogin { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto repeat(2, minmax(0, 1fr)); width: 100%; }
	.topBarLogin .topBarAccountButton { min-height: 42px; }
	.topBarLogin input { height: 42px; font-size: 16px; }
	.topBarAccount { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 42px; }
	.downloadPanelBody { grid-template-columns: 1fr; padding: 23px; }
	.downloadPanelIcon { width: 62px; height: 62px; border-radius: 16px; }
	.downloadPrimary { grid-column: 1 / -1; width: 100%; }
	.siteNav { max-height: calc(100vh - 12px); border-radius: 11px; }
	.navToggle { min-height: 44px; padding-inline: 14px; }
	.navAccordion summary, .navRegister, .navAccountLink { min-height: 48px; }
	.navGroupLinks a { min-height: 44px; }
	.navActions { grid-template-columns: 1fr; }
	.siteNav .navCta, .siteNav .navOnline { min-height: 44px; }
	.navLoginField input { height: 44px; font-size: 16px; }
	.navLogin button { min-height: 44px; }
	.banner { min-height: 130px; padding-inline: 18px; }
	.page_home .banner { min-height: 650px; padding: 24px 0 30px; }
	.page_home .bannerLogo { width: min(320px, 86vw); }
	.bannerActions { align-items: stretch; }
	.bannerActions .btn { width: 100%; }
	.textAction { width: 100%; text-align: center; }
	.bannerExplore { width: 100%; margin: 0; }
	.bannerExploreLinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bannerExploreLinks a { min-height: 58px; padding: 9px 10px; }
	.bannerExploreLinks a:nth-child(3) { border-right: 1px solid rgba(129, 174, 205, .14); }
	.bannerExploreLinks a:nth-child(even) { border-right: 0; }
	.bannerExploreLinks a:nth-child(n+3) { border-top: 1px solid rgba(129, 174, 205, .14); }
	.heroLogin { width: 100%; }
	.heroLoginFields { display: grid; grid-template-columns: 1fr 1fr auto; }
	.heroLoginFields > div { min-width: 0; }
	.heroLoginFields button { min-width: 100px; }
	.feedContainer { margin-top: 18px; }
	.rightPane { grid-template-columns: 1fr; }
	.leftPane { overflow: hidden; }
	.feedContainer > .leftPane, .feedContainer > .rightPane, .leftPane > *, .rightPane > * { max-width: 100%; }
	.leftPane > table, .leftPane form table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	th, td { padding: 11px 10px; }
	form select, form input[type="submit"] { width: 100%; min-height: 44px; margin: 0 0 8px; }
	.leftPane input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .leftPane select, .leftPane textarea { max-width: 100%; font-size: 16px; }
	.ThreadTable .avatar { width: 105px; }
	footer.well { grid-template-columns: 1fr; }
	.footerLinks { gap: 12px 18px; }
	.bestiarySearch > div { flex-direction: column; }
	.bestiarySearch button { width: 100%; }
	.monsterCardIcon { width: 68px; height: 68px; }
	.monsterCardIcon img { width: auto; height: auto; max-width: 64px; max-height: 64px; }
	.monsterVitals { grid-template-columns: 1fr; }
	.attackGrid { grid-template-columns: 1fr; }
	.defenseGrid { grid-template-columns: 1fr; }
	.resistanceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.monsterLevelControl { grid-template-columns: 1fr; }
	.sectionHeading { display: block; }
	.sectionHeading > p { margin-top: 8px; text-align: left; }
}

@media screen and (max-width: 640px) {
	.page_characterprofile .item_tooltip { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 500; width: auto; max-width: none; transform: translateY(8px); }
	.page_characterprofile .item_tooltip::after { display: none; }
	.page_characterprofile #piv_flex .itm:hover .item_tooltip,
	.page_characterprofile #piv_flex .itm:focus .item_tooltip { transform: translateY(0); }
}

@media screen and (max-width: 640px) {
	.heroLoginFields { grid-template-columns: 1fr; }
	.heroLoginFields button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
