.responsive_page_frame {
	position: relative;
}

body.movescrolltocontent .responsive_page_frame {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
}

body.overflow_hidden,
body.overflow_hidden .responsive_page_frame {
	overflow: hidden;
	position: relative;
}

html.responsive {
	height: 100%;
}

html.responsive body {
	min-height: 100%;
	height: auto;
	position: relative;
}

html.responsive body.movescrolltocontent {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.responsive_page_content {
}

.partner_events .responsive_page_content {
    height: 100vh;
}

.responsive_page_menu_ctn {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	overflow: hidden;

	background: black;

	z-index: 30;
	width: 280px;
}

.responsive_page_frame:not(.in_menu_drag) .responsive_page_menu_ctn {
	transition: left 0.5s, right 0.5s;
}

.responsive_page_menu_ctn.mainmenu {
	left: -280px;
}

.responsive_page_menu_ctn.localmenu {
	right: -280px;
}

.responsive_page_frame.mainmenu_active .responsive_page_menu_ctn.mainmenu,
.responsive_page_frame.localmenu_active .responsive_page_menu_ctn.localmenu
{
	box-shadow: 0 0 7px 0 rgba( 0, 0, 0, 0.75 );
}

.responsive_page_frame.mainmenu_active .responsive_page_menu_ctn.mainmenu {
	left: 0;
}

.responsive_page_frame.localmenu_active .responsive_page_menu_ctn.localmenu {
	right: 0;
}

.responsive_page_content_overlay {
	visibility: hidden;
	opacity: 0;
	background: rgba( 0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 25;	/* on top of page and header */

	transition: visibility 0.5s, opacity 0.5s;
}

.responsive_page_frame.mainmenu_active .responsive_page_content_overlay,
.responsive_page_frame.localmenu_active .responsive_page_content_overlay {
	visibility: visible;
	opacity: 1.0;
	transition: visibility 0s, opacity 0.5s;
}

.responsive_page_menu {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mainmenu_contents {
	background: #171a21;
	font-size: 22px;
	position: relative;
	min-height: 100%;
}

.mainmenu_contents_items {

			font-family: "Motiva Sans", Sans-serif;
		font-weight: 200; /* thin */

		}

.responsive_page_menu_ctn.localmenu .responsive_page_menu {
	background: #171a21;
}

.responsive_page_menu_ctn.localmenu .localmenu_subarea {
	background: #192533;
	border-radius: 3px;
	padding: 10px;
	color: #bdbdbd;
	margin-bottom: 16px;
}

.responsive_page_menu_ctn.localmenu .localmenu_subarea .subheader {
	font-size: 1.2em;
	margin-bottom: 8px;
}

.mainmenu_contents .menuitem,
.mainmenu_contents .submenuitem,
.notification_submenu .popup_menu_item {
	display: block;
	padding: 0 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5em;

	text-decoration: none;

	cursor: pointer;
}

.mainmenu_contents .menuitem {
	position: relative;
	color: #bdbdbd;
	background: #171a21;
	transition: background 0.25s, color 0.25s;
}

.mainmenu_contents .menuitem.username {
	max-width: none;
}

.mainmenu_contents .menuitem,
.menuitem_submenu_wrapper .inner_borders,
.mainmenu .minor_menu_items {
	border-top: 1px solid #2f3138;
	border-bottom: 1px solid #000000;
}
.mainmenu .minor_menu_items {
	border-bottom: none;
}

.mainmenu_contents .menuitem.submenu_active {
	background: #192533;
	color: #ffffff;
}

.mainmenu_contents .menuitem .chevron {
	background-image: url( "" );
	background-size: 100% 100%;
	width: 20px;
	height: 12px;

	position: absolute;
	right: 12px;
	top: calc( 50% - 6px );

	transition: transform 0.25s;
}

.mainmenu_contents .menuitem.submenu_active .chevron {
	transform: rotate( 180deg );
	-webkit-transform: rotate( 180deg );
}

.menuitem_submenu_wrapper {
	overflow: hidden;
	background: #171a21;

	transition: height 0.5s, background 0.25s, color 0.25s;
}

.menuitem_submenu_wrapper.active {
	background: #192533;
}

.menuitem_submenu_wrapper .submenuitem, .notification_submenu .popup_menu_item {
	display: block;
	font-size: 0.75em;
	color: #ffffff;
	padding-left: 28px;
}

.notifications_item .notification_count_total_ctn {
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	line-height: 140%;
	padding: 0 8px;
	font-size: 0.75em;
	margin-left: 0.4em;
}

.notifications_item .notification_envelope {
	display: none;
	background-image: url("");
	background-size: 100% 100%;
	background-position: top left;
	width: 17px;
	height: 13px;
	vertical-align: middle;
}

.notifications_item .notification_count {
	vertical-align: middle;
}

.notifications_item .notification_count_total_ctn.has_notifications {
	color: #ffffff;
	background-color: #5c7e10;
}
.notifications_item .notification_count_total_ctn.has_notifications .notification_envelope {
	display: inline-block;
}

.mainmenu .notification_submenu .notification_icon,
.mainmenu .notification_submenu .header_notification_dropdown_seperator {
	display: none;
}

.mainmenu .minor_menu_items .menuitem {
	color: #8a8a8a;
	border: none;
	font-size: 0.75em;
}

.mainmenu_footer_spacer {
	height: 160px;
}

.mainmenu_footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 10px;
	white-space: normal;
	color: #8a8a8a;
	padding: 0 12px 24px 12px;
}

.mainmenu_footer .mainmenu_valve_links > a {
	color: #8a8a8a;
}

.responsive_menu_notifications .popup_menu_item {
	font-size: 16px;
}

.responsive_menu_notifications .popup_menu_item.active_inbox_item {
	color: #70ba24;
}

.responsive_local_menu_tab {
	display: none;
}

.responsive_local_menu_tab.active {
	display: block;
	background-color: rgba( 104, 157, 221, 0.6 );
	position: fixed;
	right: 0;
	top: 6px;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	width: 30px;
	height: 50px;
	z-index: 12; /* behind overlay, on top of page content */

	background-image: url( "" );
	background-repeat: no-repeat;
	background-position: 2px center;
	background-size: 110%;

	transition: opacity 0.5s;
	box-shadow: 0 0 30px 0 #6799e2;

	cursor: pointer;
}

.responsive_page_frame.with_header .responsive_local_menu_tab {
	top: 68px;
}

.responsive_page_frame.mainmenu_active .responsive_local_menu_tab,
.responsive_page_frame.localmenu_active .responsive_local_menu_tab
{
	opacity: 0;
}

.responsive_header {
	display: none;
	background: #171a21;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 20;
	box-shadow: 0 0 7px 0 rgba( 0, 0, 0, 0.75 );

	overflow: hidden;

	padding: 13px 8px;
}

@media screen and ( max-height: 360px )
{
	.responsive_header {
		position: absolute;
	}
}

#responsive_menu_logo,
#responsive_header_search_btn {
	position: absolute;
	top: 9px;
	cursor: pointer;
	width: 36px;
	height: 31px;
}

#responsive_menu_logo {
	left: 8px;
}

#responsive_header_search_btn {
	right: 8px;
}

.responsive_header_notification_badge_ctn {
	position: absolute;
	text-align: center;
	right: -26px;
	width: 60px;
	top: -4px;
}

.responsive_header_notification_badge {
	display: inline-block;
	background: #ca2842;
	color: #ffffff;
	padding: 0 4px;
	font-size: 11px;
	line-height: 17px;
	border-radius: 8px;
}

.responsive_header_notification_badge.no_notifications {
	display: none;
}

.responsive_header .responsive_header_logo img {
	vertical-align: middle;
}

.responsive_header .responsive_header_logo a {
	display: inline-block;
}

.localmenu_content {
	padding: 16px;
}

/* China Mobile Footer */

.mainmenu_socials_china {
	display: flex;
	align-items: center;
}

.mainmenu_social_box {
	margin-right: 25px;
	display: flex;
	align-items: center;
}

.mainmenu_line {
	height: 1px;
	background: #2f3138;
	margin: 15px 0;
}

.mainmenu_links_china {
	margin: 10px 0;
	line-height: 17px;
}

.mainmenu_footer a {
	color: #8a8a8a;
}

.mainmenu_footer a:hover {
	color: #FFFFFF;
}

.mainmenu_legal_china {
	font-size: 9px;
}

.mainmenu_legal_pwlegal {
	margin-top: 15px;
}

.mainmenu_logos_china {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.mainmenu_china_wechat_logo {
	width: 31px;
	height: 27px;
}

.mainmenu_china_weibo_logo {
	width: 30px;
	height: 26px;
}

.mainmenu_china_pw_logo {
	width: 68px;
	height: 23px;
	margin-right: 10px;
}

.mainmenu_china_valve_logo {
	width: 64px;
	height: 19px;
}

.mainmenu_footer_spacer.china_spacer {
	height: 330px;
}

/* reduce the event share dialog body's bottom margin */
.EventDisplay_Share_Dialog .DialogBodyText {
	margin-bottom: 10px;
}

@media screen and (max-width: 910px)
{
	/* these elements end up getting moved, but hide them in the main page while content is loading */
	html.responsive .responsive_page_content .responsive_local_menu {
		display: none;
	}
}

/*
.responsive_page_frame:not(.in_menu_drag) .responsive_header_content {
	transition: left 0.5s, right 0.5s;

}

.responsive_page_frame.mainmenu_active .responsive_header_content {
	left: 280px;
	right: -280px;
}
*/

.responsive_menu_user_area {
	padding: 24px 20px 12px 20px;
	box-shadow: inset 0 -4px 8px 0 #000000;

	background: -webkit-linear-gradient( 343deg, #24313f 0%,#171a21 33%);
	background: linear-gradient( 107deg, #24313f 0%,#171a21 33%);
}

.responsive_menu_user_persona {
	line-height: 36px;
	padding-bottom: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.responsive_menu_user_persona .playerAvatar {
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
}

.responsive_change_language_select {
	font-size: 24px;
}

.responsive_menu_cartwallet_area {
	font-size: 16px;
	line-height: normal;
	margin-top: 12px;
}


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

	html.responsive div#global_header {
		display: none;
	}

	html.responsive .responsive_page_menu_ctn {
		display: block;
	}

	html.responsive div.responsive_header {
		display: block;
	}

	html.responsive div.responsive_page_content {
		position: relative;
		z-index: 10;
	}

	html.responsive .responsive_page_frame.with_header div.responsive_page_content {
		padding-top: 62px;	/* the header overlaps this area */
	}

	/* we show a footer in the menu itself */
	html.responsive div#footer, html.responsive div#footer_spacer {
		display: none;
	}

	html.responsive .responsive_page_template_content {
		padding-bottom: 120px;
		min-height: calc( 100vh - 120px );
	}

	html.responsive .perf_timing_area {
		margin-top: -22px;
		position: relative;
		z-index: 30;
	}

	html.responsive .responsive_hidden {
		display: none;
	}

	html.responsive h2.nonresponsive_hidden {
		display: block;
	}

	html.responsive div.nonresponsive_hidden {
		display: block;
	}


}

	html.responsive.touch div#global_header {
		display: none;
	}

	html.responsive.touch .responsive_page_menu_ctn {
		display: block;
	}

	html.responsive.touch div.responsive_header {
		display: block;
	}

	html.responsive.touch div.responsive_page_content {
		position: relative;
		z-index: 10;
	}

	html.responsive.touch .responsive_page_frame.with_header div.responsive_page_content {
		padding-top: 62px;	/* the header overlaps this area */
	}

	/* we show a footer in the menu itself */
	html.responsive.touch div#footer, html.responsive.touch div#footer_spacer {
		display: none;
	}

	html.responsive.touch .responsive_page_template_content {
		padding-bottom: 120px;
		min-height: calc( 100vh - 120px );
	}

	html.responsive.touch .perf_timing_area {
		margin-top: -22px;
		position: relative;
		z-index: 30;
	}

	html.responsive.touch .responsive_hidden {
		display: none;
	}

	html.responsive.touch h2.nonresponsive_hidden {
		display: block;
	}

	html.responsive.touch div.nonresponsive_hidden {
		display: block;
	}


.perf_timing_area {
	/*display: none;*/
	margin-bottom: 0;
}

.perf_timing_data {
	width: auto;
}

.responsive_page_menu div.responsive_menu_only {
	display: block;
}

.responsive_page_menu span.responsive_menu_only {
	display: inline;
}

@media screen and (max-width: 910px)
{
	html.responsive span.nonresponsive_hidden {
		display: inline;
	}

	html.responsive img.nonresponsive_hidden {
		display: block;
	}

	html.responsive a.nonresponsive_hidden {
		display: block;
	}
}

.responsive_tab_control select {
	color: #ffffff;
	background: rgba(0,0,0,0.3);
	/*background: #3a6d8b;*/
    padding: unset;
	border: none;
	font-size: 16px;
	height: 24px;
	max-width: 98%;
	min-width: 250px;
			font-family: "Motiva Sans", Sans-serif;
		font-weight: 200; /* thin */

		}

.responsive_tab_control select option {
	background: #3a6d8b;
}

/* If the user has opted to "view desktop site", we add a button to the bottom of the footer
	to opt back in to the mobile site.  This is button repsonds to device width
	so that it's bigger on smaller screens and easier to tap when zoomed out */

html.force_desktop body #footer .responsive_optin_link {
	display: block;
	text-align: center;
	padding: 20px 0;
}

html.force_desktop body #footer_responsive_optin_spacer {
	height: 64px;
}

.responsive_optin_link .btn_medium > span {
	line-height: 150%;
}

@media screen and ( max-device-width: 640px )
{
	.responsive_optin_link .btn_medium > span {
		font-size: 22px;
	}

	html.force_desktop body #footer_responsive_optin_spacer {
		height: 75px;
	}
}

@media screen and ( max-device-width: 500px )
{
	.responsive_optin_link .btn_medium > span {
		font-size: 26px;
	}

	html.force_desktop body #footer .responsive_optin_link {
		padding: 25px 0;
	}

	html.force_desktop body #footer_responsive_optin_spacer {
		height: 91px;
	}
}

@media screen and ( max-device-width: 400px )
{
	.responsive_optin_link .btn_medium > span {
		font-size: 34px;
	}

	html.force_desktop body #footer .responsive_optin_link {
		padding: 40px 0;
	}

	html.force_desktop body #footer_responsive_optin_spacer {
		height: 133px;
	}

}

@media print
{
	html .responsive_page_menu_ctn.mainmenu,
	html .responsive_local_menu_tab,
	html .responsive_page_menu_ctn.localmenu,
	html .responsive_header {
		display: none;
	}
}

.responsive_fixonscroll_ctn  {
	position: fixed;
	left: 0;
	right: 0;
	background: #171a21;
	box-shadow: 0 2px 4px 0 #000000;
	z-index: 15;
}

.responsive_app_menu {
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.responsive_app_menu .menu_ellipses {
	width: 6px;
	height: 6px;
	background: #8A97A0;
	border-radius: 3px;
	margin-right: 3px;
}

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

	html.responsive:not(.legacy_mobile) .responsive_scroll_snap_start {
		scroll-snap-align: start;
		overflow: visible;
	}

	html.responsive:not(.legacy_mobile) .responsive_scroll_snap_ctn {
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	html.responsive div.responsive_tab_baseline {
        display: none;
    }


}

	html.responsive.tablet:not(.legacy_mobile) .responsive_scroll_snap_start {
		scroll-snap-align: start;
		overflow: visible;
	}

	html.responsive.tablet:not(.legacy_mobile) .responsive_scroll_snap_ctn {
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	html.responsive.tablet div.responsive_tab_baseline {
        display: none;
    }


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



}

html.responsive body.OverlayWindowPinned div.responsive_header {
	display: none;
}
html.responsive body.OverlayWindowPinned.responsive_page .responsive_page_frame.with_header div.responsive_page_content {
	padding-top: 0px;
}

html.responsive body.OverlayWindowPinnedView div.responsive_local_menu_tab {
	display: none;
}
html.responsive body.OverlayWindowPinnedView.responsive_page {
	overflow: hidden;
	background: none;
}