@charset "UTF-8";
html {
	font-family: sans-serif
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline
}
audio:not([controls]) {
	display: none;
	height: 0
}
[hidden], template {
display:none
}
a {
	background-color: transparent
}
a:active, a:hover {
	outline: 0
}
abbr[title] {
	border-bottom: 1px dotted
}
dfn {
	font-style: italic
}
mark {
	background: #ff0;
	color: #000
}
img {
	height: auto;
	border: 0 none;
	max-width: 100%
}
svg:not(:root) {
	overflow: hidden
}
figure {
	margin: 1em 40px
}
hr {
	box-sizing: content-box
}
pre {
	overflow: auto
}
code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em
}
button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0
}
button {
	overflow: visible
}
button, html input[type=button], input[type=reset], input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}
button[disabled], html input[disabled] {
	cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
input {
	line-height: normal
}
input[type=checkbox], input[type=radio] {
	box-sizing: border-box;
	padding: 0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
	-webkit-appearance: textfield;
	box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em
}
legend {
	border: 0;
	padding: 0
}
textarea {
	overflow: auto
}
optgroup {
	font-weight: 700
}
.row {
	max-width: none;
	margin-left: auto;
	margin-right: auto
}
.row:after, .row:before {
	content: ' ';
	display: table;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1
}
.row:after {
	clear: both
}
.row.collapse>.column, .row.collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.row .row {
	margin-left: -1.2rem;
	margin-right: -1.2rem;
	max-width: none
}
@media screen and (min-width:62em) {
.row .row {
	margin-left: -2.2rem;
	margin-right: -2.2rem
}
}
.row .row.collapse {
	margin-left: 0;
	margin-right: 0
}
.row.expanded {
	max-width: none
}
.row.expanded .row {
	margin-left: auto;
	margin-right: auto
}
.column, .columns {
	width: 100%;
	float: left;
	padding-left: 1.2rem;
	padding-right: 1.2rem
}
@media screen and (min-width:62em) {
.column, .columns {
	padding-left: 2.2rem;
	padding-right: 2.2rem
}
}
.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
	float: right
}
.column.end:last-child:last-child, .end.columns:last-child:last-child {
	float: left
}
.column.row.row, .row.row.columns {
	float: none
}
.row .column.row.row, .row .row.row.columns {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0
}
.small-1 {
	width: 8.33333%
}
.small-push-1 {
	position: relative;
	left: 8.33333%
}
.small-pull-1 {
	position: relative;
	left: -8.33333%
}
.small-offset-0 {
	margin-left: 0
}
.small-2 {
	width: 16.66667%
}
.small-push-2 {
	position: relative;
	left: 16.66667%
}
.small-pull-2 {
	position: relative;
	left: -16.66667%
}
.small-offset-1 {
	margin-left: 8.33333%
}
.small-3 {
	width: 25%
}
.small-push-3 {
	position: relative;
	left: 25%
}
.small-pull-3 {
	position: relative;
	left: -25%
}
.small-offset-2 {
	margin-left: 16.66667%
}
.small-4 {
	width: 33.33333%
}
.small-push-4 {
	position: relative;
	left: 33.33333%
}
.small-pull-4 {
	position: relative;
	left: -33.33333%
}
.small-offset-3 {
	margin-left: 25%
}
.small-5 {
	width: 41.66667%
}
.small-push-5 {
	position: relative;
	left: 41.66667%
}
.small-pull-5 {
	position: relative;
	left: -41.66667%
}
.small-offset-4 {
	margin-left: 33.33333%
}
.small-6 {
	width: 50%
}
.small-push-6 {
	position: relative;
	left: 50%
}
.small-pull-6 {
	position: relative;
	left: -50%
}
.small-offset-5 {
	margin-left: 41.66667%
}
.small-7 {
	width: 58.33333%
}
.small-push-7 {
	position: relative;
	left: 58.33333%
}
.small-pull-7 {
	position: relative;
	left: -58.33333%
}
.small-offset-6 {
	margin-left: 50%
}
.small-8 {
	width: 66.66667%
}
.small-push-8 {
	position: relative;
	left: 66.66667%
}
.small-pull-8 {
	position: relative;
	left: -66.66667%
}
.small-offset-7 {
	margin-left: 58.33333%
}
.small-9 {
	width: 75%
}
.small-push-9 {
	position: relative;
	left: 75%
}
.small-pull-9 {
	position: relative;
	left: -75%
}
.small-offset-8 {
	margin-left: 66.66667%
}
.small-10 {
	width: 83.33333%
}
.small-push-10 {
	position: relative;
	left: 83.33333%
}
.small-pull-10 {
	position: relative;
	left: -83.33333%
}
.small-offset-9 {
	margin-left: 75%
}
.small-11 {
	width: 91.66667%
}
.small-push-11 {
	position: relative;
	left: 91.66667%
}
.small-pull-11 {
	position: relative;
	left: -91.66667%
}
.small-offset-10 {
	margin-left: 83.33333%
}
.small-12 {
	width: 100%
}
.small-offset-11 {
	margin-left: 91.66667%
}
.small-up-1>.column, .small-up-1>.columns {
	width: 100%;
	float: left
}
.small-up-1>.column:nth-of-type(1n), .small-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-1>.column:nth-of-type(1n+1), .small-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.small-up-1>.column:last-child, .small-up-1>.columns:last-child {
	float: left
}
.small-up-2>.column, .small-up-2>.columns {
	width: 50%;
	float: left
}
.small-up-2>.column:nth-of-type(1n), .small-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-2>.column:nth-of-type(2n+1), .small-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.small-up-2>.column:last-child, .small-up-2>.columns:last-child {
	float: left
}
.small-up-3>.column, .small-up-3>.columns {
	width: 33.33333%;
	float: left
}
.small-up-3>.column:nth-of-type(1n), .small-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-3>.column:nth-of-type(3n+1), .small-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.small-up-3>.column:last-child, .small-up-3>.columns:last-child {
	float: left
}
.small-up-4>.column, .small-up-4>.columns {
	width: 25%;
	float: left
}
.small-up-4>.column:nth-of-type(1n), .small-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-4>.column:nth-of-type(4n+1), .small-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.small-up-4>.column:last-child, .small-up-4>.columns:last-child {
	float: left
}
.small-up-5>.column, .small-up-5>.columns {
	width: 20%;
	float: left
}
.small-up-5>.column:nth-of-type(1n), .small-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-5>.column:nth-of-type(5n+1), .small-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.small-up-5>.column:last-child, .small-up-5>.columns:last-child {
	float: left
}
.small-up-6>.column, .small-up-6>.columns {
	width: 16.66667%;
	float: left
}
.small-up-6>.column:nth-of-type(1n), .small-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.small-up-6>.column:nth-of-type(6n+1), .small-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.small-up-6>.column:last-child, .small-up-6>.columns:last-child {
	float: left
}
.small-collapse>.column, .small-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.small-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.small-uncollapse>.column, .small-uncollapse>.columns {
	padding-left: 1.2rem;
	padding-right: 1.2rem
}
.small-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.small-pull-0, .small-push-0, .small-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
.xs-1 {
	width: 8.33333%
}
.xs-push-1 {
	position: relative;
	left: 8.33333%
}
.xs-pull-1 {
	position: relative;
	left: -8.33333%
}
.xs-offset-0 {
	margin-left: 0
}
.xs-2 {
	width: 16.66667%
}
.xs-push-2 {
	position: relative;
	left: 16.66667%
}
.xs-pull-2 {
	position: relative;
	left: -16.66667%
}
.xs-offset-1 {
	margin-left: 8.33333%
}
.xs-3 {
	width: 25%
}
.xs-push-3 {
	position: relative;
	left: 25%
}
.xs-pull-3 {
	position: relative;
	left: -25%
}
.xs-offset-2 {
	margin-left: 16.66667%
}
.xs-4 {
	width: 33.33333%
}
.xs-push-4 {
	position: relative;
	left: 33.33333%
}
.xs-pull-4 {
	position: relative;
	left: -33.33333%
}
.xs-offset-3 {
	margin-left: 25%
}
.xs-5 {
	width: 41.66667%
}
.xs-push-5 {
	position: relative;
	left: 41.66667%
}
.xs-pull-5 {
	position: relative;
	left: -41.66667%
}
.xs-offset-4 {
	margin-left: 33.33333%
}
.xs-6 {
	width: 50%
}
.xs-push-6 {
	position: relative;
	left: 50%
}
.xs-pull-6 {
	position: relative;
	left: -50%
}
.xs-offset-5 {
	margin-left: 41.66667%
}
.xs-7 {
	width: 58.33333%
}
.xs-push-7 {
	position: relative;
	left: 58.33333%
}
.xs-pull-7 {
	position: relative;
	left: -58.33333%
}
.xs-offset-6 {
	margin-left: 50%
}
.xs-8 {
	width: 66.66667%
}
.xs-push-8 {
	position: relative;
	left: 66.66667%
}
.xs-pull-8 {
	position: relative;
	left: -66.66667%
}
.xs-offset-7 {
	margin-left: 58.33333%
}
.xs-9 {
	width: 75%
}
.xs-push-9 {
	position: relative;
	left: 75%
}
.xs-pull-9 {
	position: relative;
	left: -75%
}
.xs-offset-8 {
	margin-left: 66.66667%
}
.xs-10 {
	width: 83.33333%
}
.xs-push-10 {
	position: relative;
	left: 83.33333%
}
.xs-pull-10 {
	position: relative;
	left: -83.33333%
}
.xs-offset-9 {
	margin-left: 75%
}
.xs-11 {
	width: 91.66667%
}
.xs-push-11 {
	position: relative;
	left: 91.66667%
}
.xs-pull-11 {
	position: relative;
	left: -91.66667%
}
.xs-offset-10 {
	margin-left: 83.33333%
}
.xs-12 {
	width: 100%
}
.xs-offset-11 {
	margin-left: 91.66667%
}
.xs-up-1>.column, .xs-up-1>.columns {
	width: 100%;
	float: left
}
.xs-up-1>.column:nth-of-type(1n), .xs-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-1>.column:nth-of-type(1n+1), .xs-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.xs-up-1>.column:last-child, .xs-up-1>.columns:last-child {
	float: left
}
.xs-up-2>.column, .xs-up-2>.columns {
	width: 50%;
	float: left
}
.xs-up-2>.column:nth-of-type(1n), .xs-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-2>.column:nth-of-type(2n+1), .xs-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.xs-up-2>.column:last-child, .xs-up-2>.columns:last-child {
	float: left
}
.xs-up-3>.column, .xs-up-3>.columns {
	width: 33.33333%;
	float: left
}
.xs-up-3>.column:nth-of-type(1n), .xs-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-3>.column:nth-of-type(3n+1), .xs-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.xs-up-3>.column:last-child, .xs-up-3>.columns:last-child {
	float: left
}
.xs-up-4>.column, .xs-up-4>.columns {
	width: 25%;
	float: left
}
.xs-up-4>.column:nth-of-type(1n), .xs-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-4>.column:nth-of-type(4n+1), .xs-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.xs-up-4>.column:last-child, .xs-up-4>.columns:last-child {
	float: left
}
.xs-up-5>.column, .xs-up-5>.columns {
	width: 20%;
	float: left
}
.xs-up-5>.column:nth-of-type(1n), .xs-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-5>.column:nth-of-type(5n+1), .xs-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.xs-up-5>.column:last-child, .xs-up-5>.columns:last-child {
	float: left
}
.xs-up-6>.column, .xs-up-6>.columns {
	width: 16.66667%;
	float: left
}
.xs-up-6>.column:nth-of-type(1n), .xs-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.xs-up-6>.column:nth-of-type(6n+1), .xs-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.xs-up-6>.column:last-child, .xs-up-6>.columns:last-child {
	float: left
}
.xs-collapse>.column, .xs-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.xs-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.xs-uncollapse>.column, .xs-uncollapse>.columns {
	padding-left: 1.2rem;
	padding-right: 1.2rem
}
.xs-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.xs-pull-0, .xs-push-0, .xs-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
@media screen and (min-width:25em) {
.sm-1 {
	width: 8.33333%
}
.sm-push-1 {
	position: relative;
	left: 8.33333%
}
.sm-pull-1 {
	position: relative;
	left: -8.33333%
}
.sm-offset-0 {
	margin-left: 0
}
.sm-2 {
	width: 16.66667%
}
.sm-push-2 {
	position: relative;
	left: 16.66667%
}
.sm-pull-2 {
	position: relative;
	left: -16.66667%
}
.sm-offset-1 {
	margin-left: 8.33333%
}
.sm-3 {
	width: 25%
}
.sm-push-3 {
	position: relative;
	left: 25%
}
.sm-pull-3 {
	position: relative;
	left: -25%
}
.sm-offset-2 {
	margin-left: 16.66667%
}
.sm-4 {
	width: 33.33333%
}
.sm-push-4 {
	position: relative;
	left: 33.33333%
}
.sm-pull-4 {
	position: relative;
	left: -33.33333%
}
.sm-offset-3 {
	margin-left: 25%
}
.sm-5 {
	width: 41.66667%
}
.sm-push-5 {
	position: relative;
	left: 41.66667%
}
.sm-pull-5 {
	position: relative;
	left: -41.66667%
}
.sm-offset-4 {
	margin-left: 33.33333%
}
.sm-6 {
	width: 50%
}
.sm-push-6 {
	position: relative;
	left: 50%
}
.sm-pull-6 {
	position: relative;
	left: -50%
}
.sm-offset-5 {
	margin-left: 41.66667%
}
.sm-7 {
	width: 58.33333%
}
.sm-push-7 {
	position: relative;
	left: 58.33333%
}
.sm-pull-7 {
	position: relative;
	left: -58.33333%
}
.sm-offset-6 {
	margin-left: 50%
}
.sm-8 {
	width: 66.66667%
}
.sm-push-8 {
	position: relative;
	left: 66.66667%
}
.sm-pull-8 {
	position: relative;
	left: -66.66667%
}
.sm-offset-7 {
	margin-left: 58.33333%
}
.sm-9 {
	width: 75%
}
.sm-push-9 {
	position: relative;
	left: 75%
}
.sm-pull-9 {
	position: relative;
	left: -75%
}
.sm-offset-8 {
	margin-left: 66.66667%
}
.sm-10 {
	width: 83.33333%
}
.sm-push-10 {
	position: relative;
	left: 83.33333%
}
.sm-pull-10 {
	position: relative;
	left: -83.33333%
}
.sm-offset-9 {
	margin-left: 75%
}
.sm-11 {
	width: 91.66667%
}
.sm-push-11 {
	position: relative;
	left: 91.66667%
}
.sm-pull-11 {
	position: relative;
	left: -91.66667%
}
.sm-offset-10 {
	margin-left: 83.33333%
}
.sm-12 {
	width: 100%
}
.sm-offset-11 {
	margin-left: 91.66667%
}
.sm-up-1>.column, .sm-up-1>.columns {
	width: 100%;
	float: left
}
.sm-up-1>.column:nth-of-type(1n), .sm-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-1>.column:nth-of-type(1n+1), .sm-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.sm-up-1>.column:last-child, .sm-up-1>.columns:last-child {
	float: left
}
.sm-up-2>.column, .sm-up-2>.columns {
	width: 50%;
	float: left
}
.sm-up-2>.column:nth-of-type(1n), .sm-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-2>.column:nth-of-type(2n+1), .sm-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.sm-up-2>.column:last-child, .sm-up-2>.columns:last-child {
	float: left
}
.sm-up-3>.column, .sm-up-3>.columns {
	width: 33.33333%;
	float: left
}
.sm-up-3>.column:nth-of-type(1n), .sm-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-3>.column:nth-of-type(3n+1), .sm-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.sm-up-3>.column:last-child, .sm-up-3>.columns:last-child {
	float: left
}
.sm-up-4>.column, .sm-up-4>.columns {
	width: 25%;
	float: left
}
.sm-up-4>.column:nth-of-type(1n), .sm-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-4>.column:nth-of-type(4n+1), .sm-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.sm-up-4>.column:last-child, .sm-up-4>.columns:last-child {
	float: left
}
.sm-up-5>.column, .sm-up-5>.columns {
	width: 20%;
	float: left
}
.sm-up-5>.column:nth-of-type(1n), .sm-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-5>.column:nth-of-type(5n+1), .sm-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.sm-up-5>.column:last-child, .sm-up-5>.columns:last-child {
	float: left
}
.sm-up-6>.column, .sm-up-6>.columns {
	width: 16.66667%;
	float: left
}
.sm-up-6>.column:nth-of-type(1n), .sm-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.sm-up-6>.column:nth-of-type(6n+1), .sm-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.sm-up-6>.column:last-child, .sm-up-6>.columns:last-child {
	float: left
}
.sm-collapse>.column, .sm-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.sm-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.sm-uncollapse>.column, .sm-uncollapse>.columns {
	padding-left: 1.2rem;
	padding-right: 1.2rem
}
.sm-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.sm-pull-0, .sm-push-0, .sm-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
}
@media screen and (min-width:48em) {
.md-1 {
	width: 8.33333%
}
.md-push-1 {
	position: relative;
	left: 8.33333%
}
.md-pull-1 {
	position: relative;
	left: -8.33333%
}
.md-offset-0 {
	margin-left: 0
}
.md-2 {
	width: 16.66667%
}
.md-push-2 {
	position: relative;
	left: 16.66667%
}
.md-pull-2 {
	position: relative;
	left: -16.66667%
}
.md-offset-1 {
	margin-left: 8.33333%
}
.md-3 {
	width: 25%
}
.md-push-3 {
	position: relative;
	left: 25%
}
.md-pull-3 {
	position: relative;
	left: -25%
}
.md-offset-2 {
	margin-left: 16.66667%
}
.md-4 {
	width: 33.33333%
}
.md-push-4 {
	position: relative;
	left: 33.33333%
}
.md-pull-4 {
	position: relative;
	left: -33.33333%
}
.md-offset-3 {
	margin-left: 25%
}
.md-5 {
	width: 41.66667%
}
.md-push-5 {
	position: relative;
	left: 41.66667%
}
.md-pull-5 {
	position: relative;
	left: -41.66667%
}
.md-offset-4 {
	margin-left: 33.33333%
}
.md-6 {
	width: 50%
}
.md-push-6 {
	position: relative;
	left: 50%
}
.md-pull-6 {
	position: relative;
	left: -50%
}
.md-offset-5 {
	margin-left: 41.66667%
}
.md-7 {
	width: 58.33333%
}
.md-push-7 {
	position: relative;
	left: 58.33333%
}
.md-pull-7 {
	position: relative;
	left: -58.33333%
}
.md-offset-6 {
	margin-left: 50%
}
.md-8 {
	width: 66.66667%
}
.md-push-8 {
	position: relative;
	left: 66.66667%
}
.md-pull-8 {
	position: relative;
	left: -66.66667%
}
.md-offset-7 {
	margin-left: 58.33333%
}
.md-9 {
	width: 75%
}
.md-push-9 {
	position: relative;
	left: 75%
}
.md-pull-9 {
	position: relative;
	left: -75%
}
.md-offset-8 {
	margin-left: 66.66667%
}
.md-10 {
	width: 83.33333%
}
.md-push-10 {
	position: relative;
	left: 83.33333%
}
.md-pull-10 {
	position: relative;
	left: -83.33333%
}
.md-offset-9 {
	margin-left: 75%
}
.md-11 {
	width: 91.66667%
}
.md-push-11 {
	position: relative;
	left: 91.66667%
}
.md-pull-11 {
	position: relative;
	left: -91.66667%
}
.md-offset-10 {
	margin-left: 83.33333%
}
.md-12 {
	width: 100%
}
.md-offset-11 {
	margin-left: 91.66667%
}
.md-up-1>.column, .md-up-1>.columns {
	width: 100%;
	float: left
}
.md-up-1>.column:nth-of-type(1n), .md-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-1>.column:nth-of-type(1n+1), .md-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.md-up-1>.column:last-child, .md-up-1>.columns:last-child {
	float: left
}
.md-up-2>.column, .md-up-2>.columns {
	width: 50%;
	float: left
}
.md-up-2>.column:nth-of-type(1n), .md-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-2>.column:nth-of-type(2n+1), .md-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.md-up-2>.column:last-child, .md-up-2>.columns:last-child {
	float: left
}
.md-up-3>.column, .md-up-3>.columns {
	width: 33.33333%;
	float: left
}
.md-up-3>.column:nth-of-type(1n), .md-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-3>.column:nth-of-type(3n+1), .md-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.md-up-3>.column:last-child, .md-up-3>.columns:last-child {
	float: left
}
.md-up-4>.column, .md-up-4>.columns {
	width: 25%;
	float: left
}
.md-up-4>.column:nth-of-type(1n), .md-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-4>.column:nth-of-type(4n+1), .md-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.md-up-4>.column:last-child, .md-up-4>.columns:last-child {
	float: left
}
.md-up-5>.column, .md-up-5>.columns {
	width: 20%;
	float: left
}
.md-up-5>.column:nth-of-type(1n), .md-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-5>.column:nth-of-type(5n+1), .md-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.md-up-5>.column:last-child, .md-up-5>.columns:last-child {
	float: left
}
.md-up-6>.column, .md-up-6>.columns {
	width: 16.66667%;
	float: left
}
.md-up-6>.column:nth-of-type(1n), .md-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.md-up-6>.column:nth-of-type(6n+1), .md-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.md-up-6>.column:last-child, .md-up-6>.columns:last-child {
	float: left
}
.md-collapse>.column, .md-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.md-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.md-uncollapse>.column, .md-uncollapse>.columns {
	padding-left: 1.2rem;
	padding-right: 1.2rem
}
.md-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.md-pull-0, .md-push-0, .md-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
}
@media screen and (min-width:62em) {
.lg-1 {
	width: 8.33333%
}
.lg-push-1 {
	position: relative;
	left: 8.33333%
}
.lg-pull-1 {
	position: relative;
	left: -8.33333%
}
.lg-offset-0 {
	margin-left: 0
}
.lg-2 {
	width: 16.66667%
}
.lg-push-2 {
	position: relative;
	left: 16.66667%
}
.lg-pull-2 {
	position: relative;
	left: -16.66667%
}
.lg-offset-1 {
	margin-left: 8.33333%
}
.lg-3 {
	width: 25%
}
.lg-push-3 {
	position: relative;
	left: 25%
}
.lg-pull-3 {
	position: relative;
	left: -25%
}
.lg-offset-2 {
	margin-left: 16.66667%
}
.lg-4 {
	width: 33.33333%
}
.lg-push-4 {
	position: relative;
	left: 33.33333%
}
.lg-pull-4 {
	position: relative;
	left: -33.33333%
}
.lg-offset-3 {
	margin-left: 25%
}
.lg-5 {
	width: 41.66667%
}
.lg-push-5 {
	position: relative;
	left: 41.66667%
}
.lg-pull-5 {
	position: relative;
	left: -41.66667%
}
.lg-offset-4 {
	margin-left: 33.33333%
}
.lg-6 {
	width: 50%
}
.lg-push-6 {
	position: relative;
	left: 50%
}
.lg-pull-6 {
	position: relative;
	left: -50%
}
.lg-offset-5 {
	margin-left: 41.66667%
}
.lg-7 {
	width: 58.33333%
}
.lg-push-7 {
	position: relative;
	left: 58.33333%
}
.lg-pull-7 {
	position: relative;
	left: -58.33333%
}
.lg-offset-6 {
	margin-left: 50%
}
.lg-8 {
	width: 66.66667%
}
.lg-push-8 {
	position: relative;
	left: 66.66667%
}
.lg-pull-8 {
	position: relative;
	left: -66.66667%
}
.lg-offset-7 {
	margin-left: 58.33333%
}
.lg-9 {
	width: 75%
}
.lg-push-9 {
	position: relative;
	left: 75%
}
.lg-pull-9 {
	position: relative;
	left: -75%
}
.lg-offset-8 {
	margin-left: 66.66667%
}
.lg-10 {
	width: 83.33333%
}
.lg-push-10 {
	position: relative;
	left: 83.33333%
}
.lg-pull-10 {
	position: relative;
	left: -83.33333%
}
.lg-offset-9 {
	margin-left: 75%
}
.lg-11 {
	width: 91.66667%
}
.lg-push-11 {
	position: relative;
	left: 91.66667%
}
.lg-pull-11 {
	position: relative;
	left: -91.66667%
}
.lg-offset-10 {
	margin-left: 83.33333%
}
.lg-12 {
	width: 100%
}
.lg-offset-11 {
	margin-left: 91.66667%
}
.lg-up-1>.column, .lg-up-1>.columns {
	width: 100%;
	float: left
}
.lg-up-1>.column:nth-of-type(1n), .lg-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-1>.column:nth-of-type(1n+1), .lg-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.lg-up-1>.column:last-child, .lg-up-1>.columns:last-child {
	float: left
}
.lg-up-2>.column, .lg-up-2>.columns {
	width: 50%;
	float: left
}
.lg-up-2>.column:nth-of-type(1n), .lg-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-2>.column:nth-of-type(2n+1), .lg-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.lg-up-2>.column:last-child, .lg-up-2>.columns:last-child {
	float: left
}
.lg-up-3>.column, .lg-up-3>.columns {
	width: 33.33333%;
	float: left
}
.lg-up-3>.column:nth-of-type(1n), .lg-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-3>.column:nth-of-type(3n+1), .lg-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.lg-up-3>.column:last-child, .lg-up-3>.columns:last-child {
	float: left
}
.lg-up-4>.column, .lg-up-4>.columns {
	width: 25%;
	float: left
}
.lg-up-4>.column:nth-of-type(1n), .lg-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-4>.column:nth-of-type(4n+1), .lg-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.lg-up-4>.column:last-child, .lg-up-4>.columns:last-child {
	float: left
}
.lg-up-5>.column, .lg-up-5>.columns {
	width: 20%;
	float: left
}
.lg-up-5>.column:nth-of-type(1n), .lg-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-5>.column:nth-of-type(5n+1), .lg-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.lg-up-5>.column:last-child, .lg-up-5>.columns:last-child {
	float: left
}
.lg-up-6>.column, .lg-up-6>.columns {
	width: 16.66667%;
	float: left
}
.lg-up-6>.column:nth-of-type(1n), .lg-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.lg-up-6>.column:nth-of-type(6n+1), .lg-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.lg-up-6>.column:last-child, .lg-up-6>.columns:last-child {
	float: left
}
.lg-collapse>.column, .lg-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.lg-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.lg-uncollapse>.column, .lg-uncollapse>.columns {
	padding-left: 2.2rem;
	padding-right: 2.2rem
}
.lg-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.lg-pull-0, .lg-push-0, .lg-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
}
@media screen and (min-width:81.25em) {
.xl-1 {
	width: 8.33333%
}
.xl-push-1 {
	position: relative;
	left: 8.33333%
}
.xl-pull-1 {
	position: relative;
	left: -8.33333%
}
.xl-offset-0 {
	margin-left: 0
}
.xl-2 {
	width: 16.66667%
}
.xl-push-2 {
	position: relative;
	left: 16.66667%
}
.xl-pull-2 {
	position: relative;
	left: -16.66667%
}
.xl-offset-1 {
	margin-left: 8.33333%
}
.xl-3 {
	width: 25%
}
.xl-push-3 {
	position: relative;
	left: 25%
}
.xl-pull-3 {
	position: relative;
	left: -25%
}
.xl-offset-2 {
	margin-left: 16.66667%
}
.xl-4 {
	width: 33.33333%
}
.xl-push-4 {
	position: relative;
	left: 33.33333%
}
.xl-pull-4 {
	position: relative;
	left: -33.33333%
}
.xl-offset-3 {
	margin-left: 25%
}
.xl-5 {
	width: 41.66667%
}
.xl-push-5 {
	position: relative;
	left: 41.66667%
}
.xl-pull-5 {
	position: relative;
	left: -41.66667%
}
.xl-offset-4 {
	margin-left: 33.33333%
}
.xl-6 {
	width: 50%
}
.xl-push-6 {
	position: relative;
	left: 50%
}
.xl-pull-6 {
	position: relative;
	left: -50%
}
.xl-offset-5 {
	margin-left: 41.66667%
}
.xl-7 {
	width: 58.33333%
}
.xl-push-7 {
	position: relative;
	left: 58.33333%
}
.xl-pull-7 {
	position: relative;
	left: -58.33333%
}
.xl-offset-6 {
	margin-left: 50%
}
.xl-8 {
	width: 66.66667%
}
.xl-push-8 {
	position: relative;
	left: 66.66667%
}
.xl-pull-8 {
	position: relative;
	left: -66.66667%
}
.xl-offset-7 {
	margin-left: 58.33333%
}
.xl-9 {
	width: 75%
}
.xl-push-9 {
	position: relative;
	left: 75%
}
.xl-pull-9 {
	position: relative;
	left: -75%
}
.xl-offset-8 {
	margin-left: 66.66667%
}
.xl-10 {
	width: 83.33333%
}
.xl-push-10 {
	position: relative;
	left: 83.33333%
}
.xl-pull-10 {
	position: relative;
	left: -83.33333%
}
.xl-offset-9 {
	margin-left: 75%
}
.xl-11 {
	width: 91.66667%
}
.xl-push-11 {
	position: relative;
	left: 91.66667%
}
.xl-pull-11 {
	position: relative;
	left: -91.66667%
}
.xl-offset-10 {
	margin-left: 83.33333%
}
.xl-12 {
	width: 100%
}
.xl-offset-11 {
	margin-left: 91.66667%
}
.xl-up-1>.column, .xl-up-1>.columns {
	width: 100%;
	float: left
}
.xl-up-1>.column:nth-of-type(1n), .xl-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-1>.column:nth-of-type(1n+1), .xl-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.xl-up-1>.column:last-child, .xl-up-1>.columns:last-child {
	float: left
}
.xl-up-2>.column, .xl-up-2>.columns {
	width: 50%;
	float: left
}
.xl-up-2>.column:nth-of-type(1n), .xl-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-2>.column:nth-of-type(2n+1), .xl-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.xl-up-2>.column:last-child, .xl-up-2>.columns:last-child {
	float: left
}
.xl-up-3>.column, .xl-up-3>.columns {
	width: 33.33333%;
	float: left
}
.xl-up-3>.column:nth-of-type(1n), .xl-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-3>.column:nth-of-type(3n+1), .xl-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.xl-up-3>.column:last-child, .xl-up-3>.columns:last-child {
	float: left
}
.xl-up-4>.column, .xl-up-4>.columns {
	width: 25%;
	float: left
}
.xl-up-4>.column:nth-of-type(1n), .xl-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-4>.column:nth-of-type(4n+1), .xl-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.xl-up-4>.column:last-child, .xl-up-4>.columns:last-child {
	float: left
}
.xl-up-5>.column, .xl-up-5>.columns {
	width: 20%;
	float: left
}
.xl-up-5>.column:nth-of-type(1n), .xl-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-5>.column:nth-of-type(5n+1), .xl-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.xl-up-5>.column:last-child, .xl-up-5>.columns:last-child {
	float: left
}
.xl-up-6>.column, .xl-up-6>.columns {
	width: 16.66667%;
	float: left
}
.xl-up-6>.column:nth-of-type(1n), .xl-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.xl-up-6>.column:nth-of-type(6n+1), .xl-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.xl-up-6>.column:last-child, .xl-up-6>.columns:last-child {
	float: left
}
.xl-collapse>.column, .xl-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.xl-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.xl-uncollapse>.column, .xl-uncollapse>.columns {
	padding-left: 2.2rem;
	padding-right: 2.2rem
}
.xl-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.xl-pull-0, .xl-push-0, .xl-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
}
@media screen and (min-width:100em) {
.xxl-1 {
	width: 8.33333%
}
.xxl-push-1 {
	position: relative;
	left: 8.33333%
}
.xxl-pull-1 {
	position: relative;
	left: -8.33333%
}
.xxl-offset-0 {
	margin-left: 0
}
.xxl-2 {
	width: 16.66667%
}
.xxl-push-2 {
	position: relative;
	left: 16.66667%
}
.xxl-pull-2 {
	position: relative;
	left: -16.66667%
}
.xxl-offset-1 {
	margin-left: 8.33333%
}
.xxl-3 {
	width: 25%
}
.xxl-push-3 {
	position: relative;
	left: 25%
}
.xxl-pull-3 {
	position: relative;
	left: -25%
}
.xxl-offset-2 {
	margin-left: 16.66667%
}
.xxl-4 {
	width: 33.33333%
}
.xxl-push-4 {
	position: relative;
	left: 33.33333%
}
.xxl-pull-4 {
	position: relative;
	left: -33.33333%
}
.xxl-offset-3 {
	margin-left: 25%
}
.xxl-5 {
	width: 41.66667%
}
.xxl-push-5 {
	position: relative;
	left: 41.66667%
}
.xxl-pull-5 {
	position: relative;
	left: -41.66667%
}
.xxl-offset-4 {
	margin-left: 33.33333%
}
.xxl-6 {
	width: 50%
}
.xxl-push-6 {
	position: relative;
	left: 50%
}
.xxl-pull-6 {
	position: relative;
	left: -50%
}
.xxl-offset-5 {
	margin-left: 41.66667%
}
.xxl-7 {
	width: 58.33333%
}
.xxl-push-7 {
	position: relative;
	left: 58.33333%
}
.xxl-pull-7 {
	position: relative;
	left: -58.33333%
}
.xxl-offset-6 {
	margin-left: 50%
}
.xxl-8 {
	width: 66.66667%
}
.xxl-push-8 {
	position: relative;
	left: 66.66667%
}
.xxl-pull-8 {
	position: relative;
	left: -66.66667%
}
.xxl-offset-7 {
	margin-left: 58.33333%
}
.xxl-9 {
	width: 75%
}
.xxl-push-9 {
	position: relative;
	left: 75%
}
.xxl-pull-9 {
	position: relative;
	left: -75%
}
.xxl-offset-8 {
	margin-left: 66.66667%
}
.xxl-10 {
	width: 83.33333%
}
.xxl-push-10 {
	position: relative;
	left: 83.33333%
}
.xxl-pull-10 {
	position: relative;
	left: -83.33333%
}
.xxl-offset-9 {
	margin-left: 75%
}
.xxl-11 {
	width: 91.66667%
}
.xxl-push-11 {
	position: relative;
	left: 91.66667%
}
.xxl-pull-11 {
	position: relative;
	left: -91.66667%
}
.xxl-offset-10 {
	margin-left: 83.33333%
}
.xxl-12 {
	width: 100%
}
.xxl-offset-11 {
	margin-left: 91.66667%
}
.xxl-up-1>.column, .xxl-up-1>.columns {
	width: 100%;
	float: left
}
.xxl-up-1>.column:nth-of-type(1n), .xxl-up-1>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-1>.column:nth-of-type(1n+1), .xxl-up-1>.columns:nth-of-type(1n+1) {
	clear: both
}
.xxl-up-1>.column:last-child, .xxl-up-1>.columns:last-child {
	float: left
}
.xxl-up-2>.column, .xxl-up-2>.columns {
	width: 50%;
	float: left
}
.xxl-up-2>.column:nth-of-type(1n), .xxl-up-2>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-2>.column:nth-of-type(2n+1), .xxl-up-2>.columns:nth-of-type(2n+1) {
	clear: both
}
.xxl-up-2>.column:last-child, .xxl-up-2>.columns:last-child {
	float: left
}
.xxl-up-3>.column, .xxl-up-3>.columns {
	width: 33.33333%;
	float: left
}
.xxl-up-3>.column:nth-of-type(1n), .xxl-up-3>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-3>.column:nth-of-type(3n+1), .xxl-up-3>.columns:nth-of-type(3n+1) {
	clear: both
}
.xxl-up-3>.column:last-child, .xxl-up-3>.columns:last-child {
	float: left
}
.xxl-up-4>.column, .xxl-up-4>.columns {
	width: 25%;
	float: left
}
.xxl-up-4>.column:nth-of-type(1n), .xxl-up-4>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-4>.column:nth-of-type(4n+1), .xxl-up-4>.columns:nth-of-type(4n+1) {
	clear: both
}
.xxl-up-4>.column:last-child, .xxl-up-4>.columns:last-child {
	float: left
}
.xxl-up-5>.column, .xxl-up-5>.columns {
	width: 20%;
	float: left
}
.xxl-up-5>.column:nth-of-type(1n), .xxl-up-5>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-5>.column:nth-of-type(5n+1), .xxl-up-5>.columns:nth-of-type(5n+1) {
	clear: both
}
.xxl-up-5>.column:last-child, .xxl-up-5>.columns:last-child {
	float: left
}
.xxl-up-6>.column, .xxl-up-6>.columns {
	width: 16.66667%;
	float: left
}
.xxl-up-6>.column:nth-of-type(1n), .xxl-up-6>.columns:nth-of-type(1n) {
	clear: none
}
.xxl-up-6>.column:nth-of-type(6n+1), .xxl-up-6>.columns:nth-of-type(6n+1) {
	clear: both
}
.xxl-up-6>.column:last-child, .xxl-up-6>.columns:last-child {
	float: left
}
.xxl-collapse>.column, .xxl-collapse>.columns {
	padding-left: 0;
	padding-right: 0
}
.xxl-collapse .row {
	margin-left: 0;
	margin-right: 0
}
.xxl-uncollapse>.column, .xxl-uncollapse>.columns {
	padding-left: 2.2rem;
	padding-right: 2.2rem
}
.xxl-centered {
	float: none;
	margin-left: auto;
	margin-right: auto
}
.xxl-pull-0, .xxl-push-0, .xxl-uncentered {
	position: static;
	margin-left: 0;
	margin-right: 0;
	float: left
}
}
blockquote, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, pre, td, th, ul {
	margin: 0;
	padding: 0
}
p {
	font-size: inherit;
	line-height: 1.6;
	text-rendering: optimizeLegibility
}
em, i {
	font-style: italic;
	line-height: inherit
}
b, strong {
	font-weight: 700;
	line-height: inherit
}
small {
	font-size: 80%;
	line-height: inherit
}
h1, h2, h3, h4, h5, h6 {
	font-family: "microsoft yahei", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: inherit;
	text-rendering: optimizeLegibility;
	line-height: 1.4
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	color: #cacaca;
	line-height: 0
}
a {
	text-decoration: none;
	line-height: inherit;
	cursor: pointer
}
a img {
	border: 0
}
hr {
	max-width: 190rem;
	height: 0;
	border-right: 0;
	border-top: 0;
	border-left: 0;
	margin: 2rem auto;
	clear: both
}
dl, ol, ul {
	line-height: 1.6;
	margin-bottom: 1rem;
	list-style-position: outside
}
li {
	font-size: inherit
}
ul {
	list-style-type: disc
}
ol {
	margin-left: 1.25rem
}
ol ol, ol ul, ul ol, ul ul {
	margin-left: 1.25rem;
	margin-bottom: 0
}
dl {
	margin-bottom: 1rem
}
dl dt {
margin-bottom:.3rem;
	font-weight: 700
}
blockquote {
	border-left: 1px solid #cacaca
}
blockquote, blockquote p {
	line-height: 1.6;
	color: #8a8a8a
}
cite {
	display: block;
	font-size: 1.3rem;
	color: #8a8a8a
}
cite:before {
	content: '\2014 \0020'
}
abbr {
	color: #333;
	cursor: help;
	border-bottom: 1px dotted #333
}
code {
	font-family: "microsoft yahei", Consolas, "Liberation Mono", Courier, monospace;
	font-weight: 400;
	color: #333;
	background-color: #e6e6e6;
	border: 1px solid #cacaca;
padding:.2rem .5rem .1rem
}
kbd {
padding:.2rem .4rem 0;
	margin: 0;
	background-color: #e6e6e6;
	color: #333;
	font-family: "microsoft yahei", Consolas, "Liberation Mono", Courier, monospace
}
.subheader {
margin-top:.2rem;
margin-bottom:.5rem;
	font-weight: 400;
	line-height: 1.4;
	color: #8a8a8a
}
.lead {
	font-size: 12.5px;
	line-height: 1.6
}
.stat {
	font-size: 2.5rem;
	line-height: 1
}
p+.stat {
	margin-top: -1rem
}
.no-bullet {
	margin-left: 0;
	list-style: none
}
.text-left {
	text-align: left
}
.text-right {
	text-align: right
}
.text-center {
	text-align: center
}
.text-justify {
	text-align: justify
}
@media screen and (min-width:25em) {
.sm-text-left {
	text-align: left
}
.sm-text-right {
	text-align: right
}
.sm-text-center {
	text-align: center
}
.sm-text-justify {
	text-align: justify
}
}
@media screen and (min-width:48em) {
.md-text-left {
	text-align: left
}
.md-text-right {
	text-align: right
}
.md-text-center {
	text-align: center
}
.md-text-justify {
	text-align: justify
}
}
@media screen and (min-width:62em) {
.lg-text-left {
	text-align: left
}
.lg-text-right {
	text-align: right
}
.lg-text-center {
	text-align: center
}
.lg-text-justify {
	text-align: justify
}
}
@media screen and (min-width:81.25em) {
.xl-text-left {
	text-align: left
}
.xl-text-right {
	text-align: right
}
.xl-text-center {
	text-align: center
}
.xl-text-justify {
	text-align: justify
}
}
@media screen and (min-width:100em) {
.xxl-text-left {
	text-align: left
}
.xxl-text-right {
	text-align: right
}
.xxl-text-center {
	text-align: center
}
.xxl-text-justify {
	text-align: justify
}
}
.hide, .show-for-print {
	display: none!important
}
@media print {
* {
	background: transparent!important;
	color: #000!important;
	box-shadow: none!important;
	text-shadow: none!important
}
.show-for-print {
	display: block!important
}
.hide-for-print {
	display: none!important
}
table.show-for-print {
	display: table!important
}
thead.show-for-print {
	display: table-header-group!important
}
tbody.show-for-print {
	display: table-row-group!important
}
tr.show-for-print {
	display: table-row!important
}
td.show-for-print, th.show-for-print {
	display: table-cell!important
}
a, a:visited {
	text-decoration: underline
}
a[href]:after {
	content: " ("attr(href) ")"
}
.ir a:after, a[href^='javascript:']:after, a[href^='#']:after {
	content: ''
}
abbr[title]:after {
	content: " ("attr(title) ")"
}
blockquote, pre {
	border: 1px solid #8a8a8a;
	page-break-inside: avoid
}
thead {
	display: table-header-group
}
img, tr {
	page-break-inside: avoid
}
img {
	max-width: 100%!important
}
@page {
margin:.5cm
}
h2, h3, p {
	orphans: 3;
	widows: 3
}
h2, h3 {
	page-break-after: avoid
}
}
.invisible {
	visibility: hidden
}
@media screen and (max-width:-.0625em) {
.hide-for-small-only {
	display: none!important
}
}
@media screen and (max-width:0), screen and (min-width:0) {
.show-for-small-only {
	display: none!important
}
}
@media screen and (min-width:25em) {
.hide-for-sm {
	display: none!important
}
}
@media screen and (max-width:24.9375em) {
.show-for-sm {
	display: none!important
}
}
@media screen and (min-width:25em) and (max-width:47.9375em) {
.hide-for-sm-only {
	display: none!important
}
}
@media screen and (max-width:24.9375em), screen and (min-width:48em) {
.show-for-sm-only {
	display: none!important
}
}
@media screen and (min-width:48em) {
.hide-for-md {
	display: none!important
}
}
@media screen and (max-width:47.9375em) {
.show-for-md {
	display: none!important
}
}
@media screen and (min-width:48em) and (max-width:61.9375em) {
.hide-for-md-only {
	display: none!important
}
}
@media screen and (max-width:47.9375em), screen and (min-width:62em) {
.show-for-md-only {
	display: none!important
}
}
@media screen and (min-width:62em) {
.hide-for-lg {
	display: none!important
}
}
@media screen and (max-width:61.9375em) {
.show-for-lg {
	display: none!important
}
}
@media screen and (min-width:62em) and (max-width:81.1875em) {
.hide-for-lg-only {
	display: none!important
}
}
@media screen and (max-width:61.9375em), screen and (min-width:81.25em) {
.show-for-lg-only {
	display: none!important
}
}
@media screen and (min-width:81.25em) {
.hide-for-xl {
	display: none!important
}
}
@media screen and (max-width:81.1875em) {
.show-for-xl {
	display: none!important
}
}
@media screen and (min-width:81.25em) and (max-width:99.9375em) {
.hide-for-xl-only {
	display: none!important
}
}
@media screen and (max-width:81.1875em), screen and (min-width:100em) {
.show-for-xl-only {
	display: none!important
}
}
@media screen and (min-width:100em) {
.hide-for-xxl {
	display: none!important
}
}
@media screen and (max-width:99.9375em) {
.show-for-xxl {
	display: none!important
}
}
@media screen and (min-width:100em) {
.hide-for-xxl-only {
	display: none!important
}
}
@media screen and (max-width:99.9375em) {
.show-for-xxl-only {
	display: none!important
}
}
.show-for-sr, .show-on-focus {
	position: absolute!important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0)
}
.show-on-focus:active, .show-on-focus:focus {
	position: static!important;
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto
}
.hide-for-portrait, .show-for-landscape {
	display: block!important
}
@media screen and (orientation:landscape) {
.hide-for-portrait, .show-for-landscape {
	display: block!important
}
}
@media screen and (orientation:portrait) {
.hide-for-portrait, .show-for-landscape {
	display: none!important
}
}
.hide-for-landscape, .show-for-portrait {
	display: none!important
}
@media screen and (orientation:landscape) {
.hide-for-landscape, .show-for-portrait {
	display: none!important
}
}
@media screen and (orientation:portrait) {
.hide-for-landscape, .show-for-portrait {
	display: block!important
}
}
*, :after, :before {
	box-sizing: inherit;
	background-repeat: no-repeat;
	vertical-align: inherit;
	white-space: initial;
	text-overflow: inherit;
	text-shadow: inherit
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	font-size: 10px
}
body {
	color: #405275;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #f0edf2;
	max-width: 100%;
	overflow-x: hidden;
	font: normal normal normal 10px "microsoft yahei", Arial, sans-serif;
	font-size: 1.5rem;
	line-height: 1.4
}
@media only screen and (min-width:400px) {
body {
	font-size: 1.6rem;
	line-height: 1.5
}
}
@media screen and (min-width:2560px) {
body {
	margin-left: auto;
	margin-right: auto
}
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	display: block;
	text-transform: none;
	white-space: normal
}
.h1, h1 {
	font: "microsoft yahei", impact, sans-serif;
	font-size: 5.6rem;
	line-height: normal;
letter-spacing:.05rem;
	font-style: italic
}
@media only screen and (min-width:400px) {
.h1, h1 {
	font-size: 8rem
}
}
@media only screen and (min-width:1300px) {
.h1, h1 {
	font-size: 10rem
}
}
.h2, h2 {
	font: "microsoft yahei", impact, sans-serif;
	font-size: 4.8rem;
	line-height: normal;
letter-spacing:.08rem;
	font-style: italic
}
@media only screen and (min-width:400px) {
.h2, h2 {
	font-size: 5.6rem
}
}
@media only screen and (min-width:1300px) {
.h2, h2 {
	font-size: 7.2rem
}
}
.h3, .progress-2>.bar-container>.bar-text>.title, h3 {
	font: "microsoft yahei", impact, sans-serif;
	font-size: 4rem;
	line-height: normal;
	letter-spacing: .1px;
	font-style: italic
}
@media only screen and (min-width:400px) {
.h3, .progress-2>.bar-container>.bar-text>.title, h3 {
	font-size: 4.8rem
}
}
@media only screen and (min-width:1300px) {
.h3, .progress-2>.bar-container>.bar-text>.title, h3 {
	font-size: 5rem
}
}
.h4, h4 {
	font: "microsoft yahei", impact, sans-serif;
	font-size: 2.8rem;
	line-height: normal;
	font-style: italic
}
@media only screen and (min-width:400px) {
.h4, h4 {
	font-size: 3.2rem
}
}
@media only screen and (min-width:1300px) {
.h4, h4 {
	font-size: 4.8rem
}
}
.data-table>thead th, .h5, .intro-text, h5 {
	font-weight: 400;
	font-size: 2rem;
	line-height: normal
}
@media only screen and (min-width:400px) {
.data-table>thead th, .h5, .intro-text, h5 {
	font-size: 2.4rem
}
}
@media only screen and (min-width:1300px) {
.data-table>thead th, .h5, .intro-text, h5 {
	font-size: 2.8rem
}
}
.data-table>tbody, .h6, .media-card>.container>.content, .media-thumbnail>.caption, h6 {
	font-weight: 400;
	font-size: 1.6rem;
	line-height: normal;
	letter-spacing: .5px
}
@media only screen and (min-width:400px) {
.data-table>tbody, .h6, .media-card>.container>.content, .media-thumbnail>.caption, h6 {
	font-size: 1.8rem
}
}
p {
	margin-bottom: 0
}
p a {
	text-decoration: underline
}
a {
	color: #f7931e
}
a:hover {
	color: #f9ab4f
}
hr {
	border-bottom: 6px solid rgba(240,237,242,.3)
}
ul {
	list-style: none;
	padding: 0;
	margin: 0
}
blockquote {
	font-family: Arial, "microsoft yahei", sans-serif;
	font-style: italic;
	font-size: 1.6rem;
	line-height: 1.25;
	background-color: #f8f8f8;
	color: #545454;
	margin: 0;
	padding: 15px;
	border-radius: 2px
}
blockquote p {
	margin: 0 0 10px
}
blockquote cite {
	color: rgba(84,84,84,.5);
	font-size: 1.4rem
}
blockquote a {
	color: #545454
}
:not(pre)>code[class*=language-], pre[class*=language-] {
	background-color: rgba(84,84,84,.025);
	border-radius: 2px;
	padding: 15px
}
code {
	display: block;
	margin: 10px 0;
	overflow: auto
}
table {
	border-spacing: 0
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
sup {
	top: -.3em
}
sub {
	bottom: -.2em
}
select {
	text-transform: none;
	padding: 3px 18px 3px 6px;
	color: #333
}
table, tbody, thead, tr {
	width: 100%;
	border-collapse: collapse
}
button, form {
	white-space: normal
}
@font-face {
	font-family: Futura;
	src: url(../font/futurano2d-demibold.eot);
	src: url(../font/futurano2d-demibold.eot) format("embedded-opentype"), url(../font/futurano2d-demibold.woff) format("woff"), url(../font/futurano2d-demibold.ttf) format("truetype"), url(../font/futurano2d-demibold.svg#futura) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: 'Big Noodle Too';
	src: url(../font/big-noodle-too.eot);
	src: url(../font/big-noodle-too.eot) format("embedded-opentype"), url(../font/big-noodle-too.woff) format("woff"), url(../font/big-noodle-too.ttf) format("truetype"), url(../font/big-noodle-too.svg#bignoodletoo) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: 'Big Noodle Too';
	src: url(../font/big-noodle-too-oblique.eot);
	src: url(../font/big-noodle-too-oblique.eot) format("embedded-opentype"), url(../font/big-noodle-too-oblique.woff) format("woff"), url(../font/big-noodle-too-oblique.ttf) format("truetype"), url(../font/big-noodle-too-oblique.svg#bignoodletoo) format("svg");
	font-weight: 400;
	font-style: italic
}
@font-face {
	font-family: 'Noto Sans';
	src: url(../font/noto-sans-korean-bold.eot);
	src: url(../font/noto-sans-korean-bold.eot) format("embedded-opentype"), url(../font/noto-sans-korean-bold.woff) format("woff"), url(../font/noto-sans-korean-bold.svg#notosansbold) format("svg");
	font-weight: 700;
	font-style: normal
}
@font-face {
	font-family: 'Noto Sans';
	src: url(../font/noto-sans-korean-light.eot);
	src: url(../font/noto-sans-korean-light.eot) format("embedded-opentype"), url(../font/noto-sans-korean-light.woff) format("woff"), url(../font/noto-sans-korean-light.svg#notosanslight) format("svg");
	font-weight: 300;
	font-style: normal
}
@font-face {
	font-family: icomoon;
	src: url(../font/icomoon.eot);
	src: url(../font/icomoon.eot) format("embedded-opentype"), url(../font/icomoon.ttf) format("truetype"), url(../font/icomoon.woff) format("woff"), url(../font/icomoon.svg#icomoon) format("svg");
	font-weight: 400;
	font-style: normal
}
.clearfix:after {
	content: "";
	display: block;
	clear: both
}
.section.outter, section.outter {
	display: block;
	width: 100%;
	max-width: 100%
}
.section>.inner, section>.inner {
	width: 100%;
	max-width: 1250px;
	padding: 0 15px;
	margin: 0 auto
}
.section>.inner:after, section>.inner:after {
	content: '';
	display: block;
	height: 0;
	clear: both
}
@media only screen and (min-width:768px) {
.section>.inner, section>.inner {
	padding: 0 30px
}
}
@media only screen and (min-width:768px) {
.m-nav-pad {
	padding-top: 136px
}
}
.box-align {
	display: table;
	width: 100%
}
.box-align-column {
	display: table-cell;
	vertical-align: middle
}
.box-align-column.m-responsive {
	display: block
}
@media only screen and (min-width:400px) {
.box-align-column.m-responsive {
	display: table-cell
}
}
.center {
	white-space: nowrap
}
.center:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle
}
.center>* {
	white-space: normal;
	text-align: left
}
.center_element {
	display: inline-block;
	float: none;
	vertical-align: middle;
	white-space: normal;
	text-align: left
}
.flag {
	display: table;
	width: 100%
}
.flag-body {
	width: 100%
}
.flag-body, .flag-figure {
	display: table-cell;
	vertical-align: middle
}
.flag-figure {
	padding-right: 10px
}
.flag-figure.m-reverse {
	padding-right: 0;
	padding-left: 10px
}
.flag-figure>:first-child {
	display: block;
	max-width: none
}
.plainList {
	margin: 0;
	padding: 0;
	list-style: none
}
.hideText {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	display: inline-block
}
.outer, .outter {
	display: block;
	width: 100%;
	max-width: 100%
}
.inner, .max-width-container, .page-wrapper {
	width: 100%;
	max-width: 1250px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto
}
@media only screen and (min-width:768px) {
.inner, .max-width-container, .page-wrapper {
	padding-left: 30px;
	padding-right: 30px
}
}
@media only screen and (max-width:767px) {
.no-small-gutters {
	padding-left: 0;
	padding-right: 0
}
}
.no-gutters {
	padding-left: 0;
	padding-right: 0
}
h1+h2, h1+h3, h1+h4, h1+ol, h1+ul, h2+h2, h2+h3, h2+h4, h2+ol, h2+ul, h3+h2, h3+h3, h3+h4, h3+ol, h3+ul, h4+h2, h4+h3, h4+h4, ol+p, ul+p {
	margin-top: 1em
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
	margin-top: .5em
}
p+h2, p+h3, p+h4, p+h5, p+h6 {
	margin-top: 2em
}
p+p {
	margin-top: 1em
}
.pad-xs {
	padding: 12px
}
.pad-sm {
	padding: 22px
}
.pad-md {
	padding: 32px
}
.pad-lg {
	padding: 45px
}
.pad-xl {
	padding: 60px
}
.margin-xs {
	margin: 12px
}
.margin-sm {
	margin: 22px
}
.margin-md {
	margin: 32px
}
.margin-lg {
	margin: 45px
}
.margin-xl {
	margin: 60px
}
.margin-0 {
	margin: 0
}
.pad-0 {
	padding: 0
}
.margin-3 {
	margin: 3px
}
.pad-3 {
	padding: 3px
}
.margin-6 {
	margin: 6px
}
.pad-6 {
	padding: 6px
}
.margin-9 {
	margin: 9px
}
.pad-9 {
	padding: 9px
}
.margin-12 {
	margin: 12px
}
.pad-12 {
	padding: 12px
}
.margin-15 {
	margin: 15px
}
.pad-15 {
	padding: 15px
}
.margin-18 {
	margin: 18px
}
.pad-18 {
	padding: 18px
}
.margin-21 {
	margin: 21px
}
.pad-21 {
	padding: 21px
}
.margin-24 {
	margin: 24px
}
.pad-24 {
	padding: 24px
}
.margin-27 {
	margin: 27px
}
.pad-27 {
	padding: 27px
}
.margin-30 {
	margin: 30px
}
.pad-30 {
	padding: 30px
}
.margin-no-sides {
	margin-left: 0;
	margin-right: 0
}
.margin-only-sides {
	margin-top: 0;
	margin-bottom: 0
}
.pad-no-sides {
	padding-left: 0;
	padding-right: 0
}
.pad-only-sides {
	padding-top: 0;
	padding-bottom: 0
}
.ability-showcase {
	background-color: #000;
	overflow: hidden;
	padding-bottom: 46vw;
	position: relative
}
.ability-showcase-video {
// position:absolute;
// min-width:100%;
// min-height:100%;
// top:0;
// left:50%;
// -webkit-transform:translateX(-50%);
// -ms-transform:translateX(-50%);
// transform:translateX(-50%);
// opacity:0;
// visibility:hidden;
// -webkit-transition:80ms opacity ease;
// transition:80ms opacity ease;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 80ms ease 0s;
	visibility: hidden;
	width: 100%
}
.ability-showcase-video.is-active {
	opacity: 1;
	visibility: visible
}
.ability-showcase-controls {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	margin-bottom: 3.5rem;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center
}
.ability-showcase-controls>.hero-name {
	color: #f0edf2;
	background: -webkit-linear-gradient(#f0edf2 50%, rgba(240,237,242,0));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}
.ability-showcase-controls>.ability-name {
	margin-top: -.69em;
	color: #00c3ff
}
.ability-button-list {
	margin-top: 1.4rem
}
.ability-button-list::after, .ability-button-list::before {
	content: ' ';
	display: table
}
.ability-button-list::after {
	clear: both
}
.ability-button-list>li {
	display: inline-block;
margin:0 .8rem
}
.ability-showcase .ability-showcase-button {
	position: relative;
	width: 9.5rem;
	height: 9.5rem;
	cursor: pointer
}
.ability-showcase .ability-showcase-button>.button-bg-svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: visible;
	fill: rgba(64,82,117,.4);
	stroke: rgba(240,237,242,.4);
	stroke-width: 2
}
.ability-showcase .ability-showcase-button>.hero-ability-icon {
	max-width: 90%;
	max-height: 65%;
	height: auto
}
.ability-showcase .ability-showcase-button.is-active>.button-bg-svg, .ability-showcase .ability-showcase-button:active>.button-bg-svg, .ability-showcase .ability-showcase-button:hover>.button-bg-svg {
	fill: rgba(64,82,117,.9);
	stroke: rgba(240,237,242,.9)
}
.ability-showcase .ability-showcase-button.is-active>.hero-ability-icon, .ability-showcase .ability-showcase-button:active>.hero-ability-icon, .ability-showcase .ability-showcase-button:hover>.hero-ability-icon {
	opacity: 1
}
.ability-showcase-button>.progress-svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: visible;
	fill: none;
	stroke: #00c3ff;
	stroke-width: 4.5;
	stroke-dasharray: 314;
	stroke-dashoffset: 314;
	-webkit-transform: rotateZ(-90deg);
	transform: rotateZ(-90deg);
	opacity: 0
}
.ability-showcase-button.is-active>.progress-svg {
	opacity: 1
}
.blackout {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 98;
	cursor: pointer;
	visibility: hidden;
	-webkit-transition: all .6s cubic-bezier(.075, .82, .165, 1);
	transition: all .6s cubic-bezier(.075, .82, .165, 1);
	opacity: 0;
	pointer-events: none
}
.blackout.open {
	visibility: visible;
	opacity: 1;
	pointer-events: all
}
.btn, .button, button {
	display: inline-block;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	border-radius: 2px;
	padding: 6px 45px;
	text-transform: none;
	outline: 0;
	border: 3px solid #ff9c00;
	background-color: #ff9c00;
	color: #333;
	line-height: 1;
	letter-spacing: .025em;
	font-weight: 700;
	font-size: 1.6rem;
	-webkit-transition: all .2s;
	transition: all .2s;
	text-shadow: none;
	text-decoration: none
}
.btn:link, .btn:visited, .button:link, .button:visited, button:link, button:visited {
	color: #333
}
.btn.is-active, .btn:hover, .button.is-active, .button:hover, button.is-active, button:hover {
	border-color: #ffb033;
	background-color: #ffb033;
	-webkit-transition: none;
	transition: none
}
.btn:active, .btn:focus, .button:active, .button:focus, button:active, button:focus {
	border-color: #f29400;
	background-color: #f29400;
	-webkit-transition: none;
	transition: none
}
.btn.m-sm, .button.m-sm, button.m-sm {
	padding: 6px 9px;
	font-size: 1.4rem;
	border-width: 1px
}
.btn.m-lg, .button.m-lg, button.m-lg {
	font-size: 2.6rem;
	padding: 6.5px 32px;
	color: #fefefe
}
@media only screen and (min-width:992px) {
.btn.m-lg, .button.m-lg, button.m-lg {
	font-size: 3.2rem;
	padding: 9px 40px 10px
}
}
.btn.m-wide, .button.m-wide, button.m-wide {
	color: #fefefe;
	font-size: 2.8rem;
	padding: 7.5px 65px
}
.btn.m-blue, .button.m-blue, button.m-blue {
	color: #00a5e2;
	border-color: #00a5e2;
	background-color: transparent
}
.btn.m-blue.is-active, .btn.m-blue:hover, .button.m-blue.is-active, .button.m-blue:hover, button.m-blue.is-active, button.m-blue:hover {
	background-color: #00a5e2;
	color: #fff
}
.btn.m-blue:active, .btn.m-blue:focus, .button.m-blue:active, .button.m-blue:focus, button.m-blue:active, button.m-blue:focus {
	border-color: #0092c9;
	background-color: #0092c9;
	color: #fff
}
.btn.m-white, .button.m-white, button.m-white {
	color: #fff;
	border-color: #fff;
	background-color: transparent
}
.btn.m-white.is-active, .btn.m-white:hover, .button.m-white.is-active, .button.m-white:hover, button.m-white.is-active, button.m-white:hover {
	background-color: #fff;
	color: #333
}
.btn.m-white:active, .btn.m-white:focus, .button.m-white:active, .button.m-white:focus, button.m-white:active, button.m-white:focus {
	border-color: #f2f2f2;
	background-color: #f2f2f2;
	color: #333
}
.btn.m-dark, .button.m-dark, button.m-dark {
	color: #ff9c00;
	border-color: transparent;
	background-color: hsla(0,0%,100%,.05)
}
.btn.m-dark.is-active, .btn.m-dark:hover, .button.m-dark.is-active, .button.m-dark:hover, button.m-dark.is-active, button.m-dark:hover {
	background-color: hsla(0,0%,100%,.1)
}
.btn.m-dark:active, .btn.m-dark:focus, .button.m-dark:active, .button.m-dark:focus, button.m-dark:active, button.m-dark:focus {
	background-color: hsla(0,0%,100%,.05)
}
@media only screen and (max-width:399px) {
.btn, .btn.m-lg, .btn.m-sm, .btn.m-wide, .button, .button.m-lg, .button.m-sm, .button.m-wide, button, button.m-lg, button.m-sm, button.m-wide {
	width: 100%;
	padding-left: 0;
	padding-right: 0
}
}
.button-group {
	display: inline-block
}
.button-group>.button {
	border-radius: 0;
	border-width: 2px
}
.button-group>.button:first-child {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px
}
.button-group>.button:last-child {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	border-right-width: 2px
}
.carousel {
	margin-left: auto;
	margin-right: auto;
	text-align: center
}
.carousel-mask {
	position: relative;
	overflow: hidden
}
.carousel-wrapper {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	display: table
}
.carousel-slide {
	display: table-cell;
	vertical-align: middle;
	padding: 0
}
.carousel-pagination {
	margin: 0;
	padding: 0;
	margin-top: 10px;
	display: inline-block
}
.carousel-page {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #000;
	border-radius: 50%;
	margin-left: 15px;
	cursor: pointer
}
.carousel-page:first-child {
	margin-left: 0
}
.carousel-page.is-active, .carousel-page:hover {
	background-color: #666
}
.content-box {
	padding-top: 44px;
	padding-bottom: 44px
}
@media only screen and (min-width:992px) {
.content-box {
	padding-top: 80px;
	padding-bottom: 80px
}
}
.content-box.m-tinyPad {
	padding-top: 10px;
	padding-bottom: 10px
}
.content-box>h1 {
	margin-bottom: 2.9rem
}
.data-table {
	display: table;
	width: 100%;
border-radius:.25rem;
	text-transform: none;
	background-color: #f0edf2
}
.data-table>thead th {
	padding: 1.4rem 2rem 1.2rem;
border-top-left-radius:.25rem;
border-top-right-radius:.25rem;
	background-color: #c6cbde;
	color: #405275;
	text-align: left
}
.data-table>tbody {
	display: table-row-group
}
.data-table>tbody td {
	padding: 2rem;
	padding-top: 0;
	color: #727272
}
.data-table>tbody td:last-child {
	width: 30%;
	text-align: right;
	color: #00a5e2
}
.data-table>tbody tr:first-child>td {
	padding-top: 2rem
}
.section-divider {
	position: relative
}
.section-divider:after, .section-divider:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background-size: auto 100%;
	background-position: top;
	background-repeat: no-repeat;
	z-index: 10
}
.section-divider:before {
	bottom: 100%
}
.section-divider:after {
	top: 100%
}
.section-divider.m-bottom-only:before, .section-divider.m-top-only:after {
	content: none
}
.section-divider.m-wings:after, .section-divider.m-wings:before {
	height: 3rem;
	background-image: url(../image/wing.png)
}
.section-divider.m-wings:after {
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1)
}
.section-divider.m-wings-lg:after, .section-divider.m-wings-lg:before {
	height: 3rem;
	background-image: url(../image/deco.png)
}
.section-divider.m-wings-lg:after {
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1)
}
.section-divider.m-line:after, .section-divider.m-line:before {
height:.35rem;
border:.35rem solid hsla(0,0%,45%,.7)
}
.section-divider.m-inset:before {
	top: 0;
	bottom: auto;
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1)
}
.section-divider.m-inset:after {
	bottom: 0;
	top: auto;
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}
.dropdown {
	position: relative;
	display: inline-block;
	max-width: 100%
}
.dropdown_styled {
	position: absolute;
	display: block;
	width: 100%;
	line-height: 20px;
	padding: 4px 20px 4px 8px;
	background-color: transparent;
	border: 1px solid #ccc;
	border-radius: 3px;
	text-transform: none;
	color: #ccc;
	text-align: left;
	z-index: 1
}
.dropdown_styled:after {
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 6px;
	width: 0;
	height: 0;
	margin-top: 3px;
	border: 6px solid #ccc;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent
}
.dropdown.m-dark>.dropdown_styled {
	color: #405275;
	border-color: #405275
}
.dropdown.m-dark>.dropdown_styled:after {
	border-top-color: #405275
}
.dropdown_original {
	height: 30px;
	filter: alpha(opacity=0);
	opacity: 0;
	position: relative;
	z-index: 2;
	min-width: 100px
}
.hero-ability {
	margin-top: 22px;
	padding: 20px 12px 12px;
	background-color: rgba(19,42,77,.2);
	overflow: hidden;
	position: relative
}
@media only screen and (min-width:992px) {
.hero-ability {
	margin-top: 2px;
	padding: 0
}
}
@media only screen and (max-width:767px) {
.hero-ability-descriptor {
	margin-top: 14px;
	text-align: center
}
}
@media only screen and (min-width:768px) {
.hero-ability-descriptor {
	padding-right: 18px;
	display: table-cell;
	vertical-align: top
}
}
@media only screen and (min-width:992px) {
.hero-ability-descriptor {
	padding: 20px 16px
}
}
.hero-ability-descriptor >:first-child {
	text-transform: none;
	color: #f0edf2;
	margin-top: 0
}
.hero-ability-video {
	width: 100%;
	display: block;
	margin-top: 20px
}
@media only screen and (min-width:992px) {
.hero-ability-video {
	display: none
}
}
.hero-ability-icon-container {
	text-align: center
}
@media only screen and (min-width:768px) {
.hero-ability-icon-container {
	display: table-cell;
	vertical-align: middle;
	padding-left: 18px;
	padding-right: 18px
}
}
@media only screen and (min-width:992px) {
.hero-ability-icon-container {
	padding-left: 24px;
	padding-right: 24px;
	background-color: rgba(19,42,77,.1)
}
}
.hero-ability-icon-bg {
	position: relative;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: rgba(64,82,117,.4);
	border: 2px solid rgba(240,237,242,.4)
}
@media only screen and (min-width:992px) {
.hero-ability-icon-bg {
	width: 74px;
	height: 74px
}
}
.hero-ability-icon-bg.m-hoverable.is-active, .hero-ability-icon-bg.m-hoverable:active, .hero-ability-icon-bg.m-hoverable:hover {
	background-color: rgba(64,82,117,.9);
	border: 2px solid rgba(240,237,242,.9)
}
.hero-ability-icon {
	width: auto;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	max-height: 65%;
	max-width: 150%
}
.hero-ability-icon-bg.m-hoverable>.hero-ability-icon, .hero-ability-icon.m-hoverable {
	opacity: .7
}
.hero-ability-icon-bg.m-hoverable.is-active>.hero-ability-icon, .hero-ability-icon-bg.m-hoverable:active>.hero-ability-icon, .hero-ability-icon-bg.m-hoverable:hover>.hero-ability-icon, .hero-ability-icon.m-hoverable.is-active, .hero-ability-icon.m-hoverable:active, .hero-ability-icon.m-hoverable:hover {
	opacity: 1
}
.hero-ability-icon.m-small {
	height: 45%
}
.hero-ability-icon.m-weapon {
	height: 55%
}
.hero-bio {
	margin-top: 12px;
	margin-bottom: 22px
}
.hero-bio>li {
	margin-bottom: 12px
}
.hero-bio-copy {
	display: block;
	overflow: hidden;
	padding-left: 12px
}
.hero-bio-icon {
	width: 24px;
	height: 24px;
	fill: #00c3ff;
	float: left
}
.hero-bio-backstory {
	margin-top: 18px;
	background-color: rgba(19,42,77,.2)
}
.hero-detail {
	position: relative
}
@media only screen and (min-width:992px) {
.hero-detail-tabs {
	padding-top: 50px
}
}
.hero-detail-tabs .tabs-title {
	width: 49.5%;
	margin-left: .5%;
	text-align: center
}
.hero-detail-description {
	border-left: 6px solid #00c3ff;
	padding-left: 18px;
	margin-left: 12px;
	margin-top: 18px
}
@media only screen and (min-width:400px) {
.hero-detail-description {
	max-width: 90%
}
}
.hero-detail-title {
	color: #00c3ff
}
.hero-detail-title.m-no-indent {
	margin-left: 0
}
.hero-detail-abilities {
	margin-top: 18px
}
.hero-detail-role-name {
	color: #f0edf2;
	display: inline-block;
	vertical-align: text-top;
	line-height: .75;
	margin-top: 0
}
.hero-detail-role-icon {
	display: inline-block;
	vertical-align: text-top;
	margin-left: 14px;
	fill: #f0edf2;
	height: 24px;
	width: 24px
}
.hero-detail-difficulty {
	margin: 12px 0
}
@media only screen and (min-width:768px) {
.hero-detail-difficulty {
	margin: 0
}
}
.hero-detail-wrapper {
	padding: 22px
}
.hero-detail-wrapper.m-no-pad-bot {
	padding-bottom: 0
}
.hero-detail-background, .hero-detail-video {
	display: none
}
.hero-detail-background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-size: cover;
	background-position: center top
}
@media only screen and (min-width:992px) and (max-width:1599px) {
.hero-detail-background {
	background-position: 75% top
}
}
@media only screen and (min-width:992px) {
.hero-detail-background.is-active, .hero-detail-video.is-active {
	display: block
}
.hero-detail-video>.video-background-vid.m-right-align {
	top: -40px;
	right: -280px
}
}
@media only screen and (min-width:1300px) {
.hero-detail-video>.video-background-vid.m-right-align {
	top: -40px;
	right: -140px
}
}
@media only screen and (min-width:1600px) {
.hero-detail-video>.video-background-vid.m-right-align {
	top: 0;
	right: 0
}
}
@media only screen and (min-width:400px) {
.hero-detail-role {
	float: left
}
}
@media only screen and (min-width:768px) {
.hero-detail-difficulty {
	float: right;
	min-width: 30%
}
}
.hero-portrait {
	position: relative;
	display: inline-block;
	padding-bottom: 2rem;
	-webkit-transition: all 100ms cubic-bezier(0.19, 1, .22, 1);
	transition: all 100ms cubic-bezier(0.19, 1, .22, 1)
}
.hero-portrait:hover {
	-webkit-transition: all 110ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 110ms cubic-bezier(0.075, .82, .165, 1)
}
.hero-portrait.m-small {
	padding-bottom: 1.4rem
}
.hero-portrait>.wrap {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 8rem;
	height: 8rem;
	background-color: #fff;
	-webkit-transition: all 100ms cubic-bezier(0.19, 1, .22, 1);
	transition: all 100ms cubic-bezier(0.19, 1, .22, 1);
	border-radius: 7px;
	border: 3px solid #f0edf2;
	border-left-width: 0;
	border-right-width: 0
}
@media only screen and (min-width:768px) {
.hero-portrait>.wrap {
	background-color: transparent;
	-webkit-transform: skew(-.25rad);
	-ms-transform: skew(-.25rad);
	transform: skew(-.25rad);
	width: 7rem;
	height: 8.5rem
}
}
.hero-portrait.m-small>.wrap {
	width: 5rem;
	height: 6.5rem
}
.hero-portrait.is-active>.wrap, .hero-portrait:active>.wrap, .hero-portrait:focus>.wrap, .hero-portrait:hover>.wrap {
	-webkit-transform: scale(1.2) translateZ(0);
	transform: scale(1.2) translateZ(0);
	-webkit-transform-origin: center;
	transform-origin: center;
	z-index: 0;
	-webkit-transition: all 110ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 110ms cubic-bezier(0.075, .82, .165, 1);
	border-left-width: 3px;
	border-right-width: 3px
}
@media only screen and (min-width:768px) {
.hero-portrait.is-active>.wrap, .hero-portrait:active>.wrap, .hero-portrait:focus>.wrap, .hero-portrait:hover>.wrap {
	-webkit-transform: scale(1.2) skew(-.25rad) translateZ(0);
	transform: scale(1.2) skew(-.25rad) translateZ(0)
}
}
.hero-portrait>.wrap>.image {
	position: absolute;
	left: 50%;
	height: 96%;
	top: 2%;
	padding-right: 200%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: rgba(51,51,51,.9);
	-webkit-transition: inherit;
	transition: inherit
}
@media only screen and (min-width:768px) {
.hero-portrait>.wrap>.image {
	top: 0;
	height: 100%;
	-webkit-transform: skew(0.25rad) translateX(-50%);
	-ms-transform: skew(0.25rad) translateX(-50%);
	transform: skew(0.25rad) translateX(-50%)
}
}
.hero-portrait.is-active>.wrap>.image, .hero-portrait:active>.wrap>.image, .hero-portrait:focus>.wrap>.image, .hero-portrait:hover>.wrap>.image {
	background-color: #f7931e
}
.hero-portrait>.label {
	position: absolute;
bottom:.3rem;
	display: block;
	width: 100%;
	font-size: 1.2rem;
	font-family: Futura, "microsoft yahei", arial, sans-serif;
	text-transform: none;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-transition: none;
	transition: none
}
@media only screen and (min-width:768px) {
.hero-portrait>.label {
bottom:.5rem;
	font-size: 1rem;
	-webkit-transform: translateX(-1.05rem);
	-ms-transform: translateX(-1.05rem);
	transform: translateX(-1.05rem)
}
}
.hero-portrait.m-color-inverted>.label {
	color: #f0edf2
}
.hero-portrait.m-small>.label {
	font-size: 1.2em;
-webkit-transform:translateX(-.8rem);
-ms-transform:translateX(-.8rem);
transform:translateX(-.8rem)
}
.hero-portrait.is-active>.label, .hero-portrait:active>.label, .hero-portrait:focus>.label, .hero-portrait:hover>.label {
	left: 50%;
	width: auto;
padding:.1rem 1rem;
	z-index: 0;
border-radius:.3rem;
	background-color: #f0edf2;
	white-space: nowrap;
	overflow: visible;
	text-overflow: inherit;
-webkit-transform:translateX(-50%) translateY(-.5rem);
transform:translateX(-50%) translateY(-.5rem)
}
@media only screen and (min-width:768px) {
.hero-portrait.is-active>.label, .hero-portrait:active>.label, .hero-portrait:focus>.label, .hero-portrait:hover>.label {
-webkit-transform:translateX(-50%) translateX(-1.25rem) translateY(-.5rem);
-ms-transform:translateX(-50%) translateX(-1.25rem) translateY(-.5rem);
transform:translateX(-50%) translateX(-1.25rem) translateY(-.5rem)
}
}
.hero-portrait.m-color-inverted.is-active>.label, .hero-portrait.m-color-inverted:active>.label, .hero-portrait.m-color-inverted:focus>.label, .hero-portrait.m-color-inverted:hover>.label {
	color: #333
}
.hero-portrait.m-small.is-active>.label, .hero-portrait.m-small:active>.label, .hero-portrait.m-small:focus>.label, .hero-portrait.m-small:hover>.label {
-webkit-transform:translateX(-50%) translateY(-.5rem);
-ms-transform:translateX(-50%) translateY(-.5rem);
transform:translateX(-50%) translateY(-.5rem)
}
@media only screen and (min-width:768px) {
.hero-portrait.m-small.is-active>.label, .hero-portrait.m-small:active>.label, .hero-portrait.m-small:focus>.label, .hero-portrait.m-small:hover>.label {
-webkit-transform:translateX(-50%) translateX(-.8rem) translateY(-.5rem);
-ms-transform:translateX(-50%) translateX(-.8rem) translateY(-.5rem);
transform:translateX(-50%) translateX(-.8rem) translateY(-.5rem)
}
}
.hero-portrait-detailed {
	background: url(../image/hero-portrait-detailed-bg.jpg) no-repeat;
	background-size: cover;
	width: 184px;
	height: 319px;
	position: relative;
	border: 2px solid rgba(255,255,255,.4);
	display: block;
	border-radius: 1px;
	-webkit-transition: all 100ms;
	transition: all 100ms
}
.hero-portrait-detailed:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 57px 14px rgba(0,195,255,.7);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: inherit;
	transition: inherit
}
.hero-portrait-detailed:hover {
	-webkit-transition: 400ms cubic-bezier(0.075, .82, .165, 1);
	transition: 400ms cubic-bezier(0.075, .82, .165, 1);
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	z-index: 10
}
.hero-portrait-detailed.m-selected:hover, .hero-portrait-detailed.m-subdued:hover, .hero-portrait-detailed:hover {
	opacity: 1;
	-webkit-filter: none;
	filter: none;
	border-color: #fff
}
.hero-portrait-detailed.m-selected:hover:before, .hero-portrait-detailed.m-subdued:hover:before, .hero-portrait-detailed:hover:before {
	visibility: hidden;
	opacity: 0
}
.hero-portrait-detailed.m-selected:hover>.container, .hero-portrait-detailed.m-subdued:hover>.container, .hero-portrait-detailed:hover>.container {
	background-color: #fff;
	-webkit-transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 100ms cubic-bezier(0.075, .82, .165, 1)
}
.hero-portrait-detailed.m-selected:hover>.container>.icon, .hero-portrait-detailed.m-subdued:hover>.container>.icon, .hero-portrait-detailed:hover>.container>.icon {
	fill: #1a325e
}
.hero-portrait-detailed.m-selected:hover .portrait-title, .hero-portrait-detailed.m-subdued:hover .portrait-title, .hero-portrait-detailed:hover .portrait-title {
	color: #1a325e
}
.hero-portrait-detailed>.portrait {
	width: 100%
}
.hero-portrait-detailed>.container {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	height: 7rem;
	background: rgba(40,53,79,.9);
	-webkit-transition: all 100ms;
	transition: all 100ms
}
.hero-portrait-detailed>.container>.icon {
	position: absolute;
top:.8rem;
left:.8rem;
	fill: #fff;
	-webkit-transition: inherit;
	transition: inherit
}
.hero-portrait-detailed>.container>.icon svg {
	height: 1.8rem;
	width: 1.8rem
}
.hero-portrait-detailed .portrait-title {
	font-size: 3.2rem;
	font-family: "Big Noodle Too", "microsoft yahei", impact, sans-serif;
	font-style: italic;
	color: #d0d0dc;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 6px;
	-webkit-transition: inherit;
	transition: inherit
}
.hero-portrait-detailed.m-selected>.container {
	background: rgba(0,195,255,.98)
}
.hero-portrait-detailed.m-selected .portrait-title {
	color: #fff
}
.hero-portrait-detailed.m-selected::before {
	visibility: visible;
	opacity: 1
}
.hero-portrait-detailed.m-subdued {
	opacity: .8;
	-webkit-filter: grayscale(40%);
	filter: grayscale(40%)
}
.hero-selector .navigation-selector {
	margin-bottom: 64px
}
.hero-selector .hero-portrait-detailed {
	width: 100%;
	margin-bottom: 6px
}
@media only screen and (min-width:400px) {
.hero-selector .hero-portrait-detailed {
	width: 176px;
	margin-right: 6px
}
}
@media only screen and (min-width:768px) {
.hero-selector .hero-portrait-detailed {
	width: 184px
}
}
.intro-text {
	line-height: 1.47;
	margin-bottom: 3.6rem
}
@media only screen and (min-width:768px) and (max-width:1299px) {
.intro-text.m-small {
	font-size: 2rem
}
}
.intro-trailer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-top: 18px
}
@media only screen and (min-width:400px) {
.intro-trailer {
	margin-top: 60px
}
}
.intro-heading {
	margin-bottom: 44px;
	text-transform: none;
	font-style: italic
}
.intro-heading-gradient-blue {
	background: -webkit-linear-gradient(top, #3f6493 10%, #345177 100%);
	background-image: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 4px 5px rgba(60,72,96,.5)
}
.sprite-icon-overview {
	background-image: url(../image/icon-overview.png)
}
.sprite-icon-overwatch {
	background-image: url(../image/icon-overwatch.png)
}
.sprite-icon-heroes {
	background-image: url(../image/icon-heroes.png)
}
.sprite-icon-roles {
	background-image: url(../image/icon-roles.png)
}
.sprite-icon-objectives {
	background-image: url(../image/icon-objectives.png)
}
[lightbox] {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:99;
overflow-y:auto;
text-align:center;
font-size:0;
visibility:hidden;
-webkit-transition:all .3s cubic-bezier(.075, .82, .165, 1);
transition:all .3s cubic-bezier(.075, .82, .165, 1);
opacity:0
}
[lightbox].open {
	visibility: visible;
	opacity: 1
}
[lightbox]:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle
}
[lightbox] .lightbox-container {
	width: 75%;
	max-width: 2560px;
	vertical-align: middle;
	display: inline-block;
	font-size: 12px;
	margin: 0;
	position: relative;
	z-index: 99;
	box-sizing: border-box;
	cursor: auto;
	padding: 30px 0
}
@media only screen and (max-width:991px) {
[lightbox] .lightbox-container {
	width: 90%
}
}
[lightbox] .lightbox-close {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 99;
	cursor: pointer
}
[lightbox] .lightbox-close:before {
	content: '\00d7';
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 60px;
	top: 0;
	left: 0;
	font-weight: 100;
	font-family: initial;
	color: #00c3ff;
	font-size: 6rem;
	-webkit-transition: color .1s cubic-bezier(.075, .82, .165, 1);
	transition: color .1s cubic-bezier(.075, .82, .165, 1)
}
[lightbox] .lightbox-close:hover:before {
	-webkit-transition: none;
	transition: none;
	color: #f0edf2
}
@media only screen and (max-width:991px) {
[lightbox] .lightbox-close {
	top: 44px;
	right: 0
}
}
[lightbox] .lightbox-body {
	position: relative;
	background-color: rgba(0,0,0,.75)
}
[lightbox] .lightbox-body:hover .lightbox-next, [lightbox] .lightbox-body:hover .lightbox-prev {
	visibility: visible;
	opacity: 1
}
[lightbox] .lightbox-body.m-controls .lightbox-next, [lightbox] .lightbox-body.m-controls .lightbox-prev {
	display: block
}
[lightbox] .lightbox-body.m-loader {
	background-image: url(../image/loading.svg);
	background-position: 50%;
	background-repeat: no-repeat
}
[lightbox] .lightbox-content {
	padding-bottom: 56.25%;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.5);
	display: block
}
[lightbox] .lightbox-next, [lightbox] .lightbox-prev {
	width: 64px;
	height: 69px;
	background-image: url(../image/lightbox-nav.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -32px;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .1s cubic-bezier(.075, .82, .165, 1);
	transition: opacity .1s cubic-bezier(.075, .82, .165, 1);
	z-index: 99;
	display: none
}
@media only screen and (max-width:991px) {
[lightbox] .lightbox-next, [lightbox] .lightbox-prev {
	width: 39px;
	height: 42px;
	margin-top: -21px
}
}
[lightbox] .lightbox-prev {
	left: 0
}
[lightbox] .lightbox-prev:hover {
	background-position: -64px 0
}
@media only screen and (max-width:991px) {
[lightbox] .lightbox-prev {
	background-position: 0 -138px
}
[lightbox] .lightbox-prev:hover {
	background-position: -39px -138px
}
}
[lightbox] .lightbox-next {
	right: 0;
	background-position: 0 -69px
}
[lightbox] .lightbox-next:hover {
	background-position: -64px -69px
}
@media only screen and (max-width:991px) {
[lightbox] .lightbox-next {
	background-position: 0 -180px
}
[lightbox] .lightbox-next:hover {
	background-position: -39px -180px
}
}
[lightbox].fluid .lightbox-container {
	width: auto;
	padding: initial
}
.link {
	cursor: pointer
}
.link.primary {
	text-transform: none;
	text-decoration: none;
	font: normal normal bold 10px Futura;
	font-size: 2rem;
	line-height: normal;
	color: #FF9A00
}
.link.primary:hover {
	color: #f0edf2
}
.logo {
	width: 190px;
	height: 143px;
	background-image: url(../image/da03e55ee5f2c81c.png);
	background-size: contain
}
@media only screen and (min-width:768px) {
.logo {
	width: 794px;
	height: 452px;
	background-image: url(../image/da03e55ee5f2c81c.png);
	background-size: contain
}
}
.media-thumbnail {
	display: block;
	text-decoration: none
}
.media-thumbnail:focus, .media-thumbnail:hover {
	border-width: 4px;
	border-color: #fff
}
.media-thumbnail>.caption {
	display: block;
	color: rgba(240,237,242,.8);
	background-color: #333;
	text-transform: none;
padding:.7rem 1.6rem;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px
}
.media-thumbnail:focus>.caption, .media-thumbnail:hover>.caption {
	color: #f0edf2
}
.media-thumbnail>.wrap {
	position: relative;
	overflow: hidden
}
.media-thumbnail>.wrap:before {
	content: '';
	display: block;
	height: 0;
	padding-top: 56.25%
}
.media-thumbnail.m-playable>.wrap:after, .media-thumbnail.m-viewable>.wrap:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all 200ms cubic-bezier(0.25, .46, .45, .94);
	transition: all 200ms cubic-bezier(0.25, .46, .45, .94);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 13% auto
}
.media-thumbnail.m-playable>.wrap:after {
	background-image: url(../image/youtube-btn-ylw.png)
}
.media-thumbnail.m-playable:focus>.wrap:after, .media-thumbnail.m-playable:hover>.wrap:after {
	background-image: url(../image/youtube-btn-wh.png)
}
.media-thumbnail.m-viewable:focus>.wrap:after, .media-thumbnail.m-viewable:hover>.wrap:after {
	background-image: url(../image/magnifying.png)
}
@media only screen and (max-width:768px) {
.media-thumbnail.m-playable:focus>.wrap:after, .media-thumbnail.m-playable:hover>.wrap:after, .media-thumbnail.m-playable>.wrap:after, .media-thumbnail.m-viewable:focus>.wrap:after, .media-thumbnail.m-viewable:hover>.wrap:after {
	background-image: none
}
}
.media-thumbnail.m-playable:focus>.wrap:after, .media-thumbnail.m-playable:hover>.wrap:after, .media-thumbnail.m-viewable:focus>.wrap:after, .media-thumbnail.m-viewable:hover>.wrap:after {
	background-color: rgba(51,51,51,.5)
}
.media-thumbnail>.wrap>.media {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px
}
#selectHeroes {
	background: url(../image/bg-tmp-hero-mobile.jpg);
	background-size: cover;
	background-position: center bottom
}
.hero-select-navigation {
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center
}
.hero-select-navigation .hero-type-container {
	display: inline-table
}
@media only screen and (min-width:768px) {
.hero-select-navigation .hero-type-container {
	margin-right: 18px;
	margin-left: 18px
}
}
.hero-select-navigation .hero-item {
	display: inline-block;
	margin-right: 6px;
	margin-bottom: 16px
}
.hero-select-navigation .nav-title {
	font-size: 6rem;
	color: #fff
}
.hero-select-navigation .hero-select-title {
	margin-top: 3rem;
	margin-bottom: 1.6rem;
	font-size: 3rem;
	position: relative;
	text-align: center;
	width: 100%;
	display: table
}
.hero-select-navigation .hero-select-title .heading-line {
	display: table-cell;
	width: 50%;
	position: relative
}
.hero-select-navigation .hero-select-title .heading-line:before {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	opacity: .2;
	background: #fff
}
.hero-select-navigation .hero-select-title>.text {
	word-break: keep-all;
	color: #fff;
	opacity: .6;
	padding-right: 6px;
	display: table-cell
}
.navigation-selector {
	table-layout: fixed;
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px
}
@media only screen and (min-width:992px) {
.navigation-selector {
	border-spacing: 1px
}
}
.navigation-selector .navigation-list {
	display: table-row;
	padding: 0;
	margin: 0
}
.navigation-selector .navigation-item {
	display: table-cell;
	vertical-align: middle;
	background-color: rgba(255,255,255,.3);
	border-radius: 2px;
	-webkit-transition: all 200ms;
	transition: all 200ms
}
@media only screen and (min-width:992px) {
.navigation-selector .navigation-item {
	max-width: 162px;
	width: 162px;
	vertical-align: middle
}
}
.navigation-selector .navigation-item:first-child {
	margin-left: 0
}
.navigation-selector .navigation-item.active, .navigation-selector .navigation-item:hover {
	background-color: #fff;
	-webkit-transition: none;
	transition: none
}
.navigation-selector .navigation-item.active .navigation-link, .navigation-selector .navigation-item:hover .navigation-link {
	opacity: 1
}
.navigation-selector .navigation-link {
	padding: 8px 2px;
	text-transform: none;
	font-family: Futura, "microsoft yahei", arial, sans-serif;
	opacity: .7;
	width: 100%;
	display: block;
	text-align: center;
	color: #1a325e;
	-webkit-transition: inherit;
	transition: inherit
}
@media only screen and (min-width:400px) {
.navigation-selector .navigation-link {
	padding: 14px 2px
}
}
@media only screen and (min-width:992px) {
.navigation-selector .navigation-link {
	height: auto;
	padding: 9px 10px
}
}
.navigation-selector .navigation-link>.icon {
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6px;
	height: 22px;
	display: block;
	fill: #1a325e
}
@media only screen and (min-width:400px) {
.navigation-selector .navigation-link>.icon {
	height: 30px;
	margin-bottom: 10px
}
}
@media only screen and (min-width:992px) {
.navigation-selector .navigation-link>.icon {
	display: inline-block;
	height: 18px;
	margin-right: 9px;
	margin-bottom: 3px;
	max-width: 50px
}
}
.navigation-selector .navigation-link>.text {
	font-size: 1.2rem;
	line-height: 1rem;
	display: block
}
@media only screen and (min-width:400px) {
.navigation-selector .navigation-link>.text {
	font-size: 1.4rem
}
}
@media only screen and (min-width:768px) {
.navigation-selector .navigation-link>.text {
	font-size: 1.8rem
}
}
@media only screen and (min-width:992px) {
.navigation-selector .navigation-link>.text {
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.6rem
}
}
// .card {
// display:block;
// position:relative;
://
}
// .card:focus, // .card:hover {
// border-width:4px;
// border-color:#fff;
://
}
// .card.m-news {
// text-align:left;
://
}
// .card>.thumb {
// height:0;
// padding-top:43.96%;
// background-size:cover;
// background-position:center top;
://
}
// .card.m-sixteen-nine>.thumb {
// padding-top:56.25%;
://
}
// .card>.caption {
// position:absolute;
// bottom:0;
// left:0;
// right:0;
// padding:.5rem;
// color:#f0edf2;
// background-color:rgba(0,0,0,.75);
://
}
// .card>.caption>.heading {
// text-transform:none;
// margin:0;
://
}
// .card>.caption>.description {
// margin:0;
// overflow:hidden;
// white-space:nowrap;
// text-overflow:ellipsis;
://
}
// .card:focus>.caption>.description, // .card:hover>.caption>.description {
// white-space:normal;
://
}
// @media only screen and (min-width:768px) {
// .card {
// overflow:hidden;
// vertical-align:top;
://
}
// .card>.caption {
// padding:1.8rem;
://
}
// .card>.caption>.heading {
// margin-bottom:.6rem;
://
}
}
.spotlight>.header {
	color: #f0edf2
}
.spotlight>.holder {
	display: block;
	padding-top: 87.5%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center top
}
.spotlight>.caption {
	min-height: 7em
}
.star {
	display: inline-block;
	width: 52px;
	height: 52px;
	background-image: url(../image/star.png)
}
.star.m-empty {
	background-position: 0 -52px
}
.table {
	display: table
}
.table-row {
	display: table-row
}
.table-column {
	display: table-column
}
.table-cell {
	display: table-cell
}
.tabs {
	white-space: nowrap
}
.tabs>.tabs-title:first-child {
	margin-left: 0
}
.tabs-title {
	cursor: pointer;
	display: inline-block;
	padding: 3px 25px;
	background-color: rgba(255,255,255,.6);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	margin-left: 6px
}
@media only screen and (min-width:992px) {
.tabs-title {
	padding: 3px 55px
}
}
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
.tabs-title {
	border-radius: 0
}
}
.tabs-title.is-active {
	background-color: rgba(19,42,77,.6)
}
.tabs-title>a {
	color: #3E383A
}
.tabs-title.is-active>a {
	color: #B4BAC8
}
.tabs-content {
	color: #FFF;
	background-color: rgba(19,42,77,.6)
}
.tabs-panel {
	display: none
}
.tabs-panel.is-active {
	display: block
}
.tab-separator {
	max-width: none;
	border-bottom: 3px solid rgba(255,255,255,.15);
	margin: 0
}
.toggle-display {
	display: none
}
.toggle-display.is-active {
	display: block
}
.video-embed {
	position: relative;
	text-align: center;
	overflow: hidden;
	height: 45vw;
	width: 120vh;
	max-width: 120vh;
	max-height: 67.5vh;
	margin-right: auto;
	margin-left: auto
}
.img-embed {
	position: relative;
	text-align: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	max-width: 90vh;
	max-height: 90vh;
	margin: auto
}
.img-embed img {
	width: 100%
}
.video-embed>.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
nav .nav-logo {
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	width: 245px;
	height: 62px;
	
}
nav .nav-logo.m-icon {
	background-image: url(../image/nav-logo-icon.png);
	width: 110px;
	height: 76px
}
nav[role=main] {
	background-color: rgba(40,53,79,.9);
	position: relative;
	z-index: 96
}
nav[role=main]:after {
	content: '';
	display: block;
	height: 0;
	clear: both
}
@media only screen and (min-width:768px) {
nav[role=main] {
	margin: 20px 20px 0
}
}
nav[role=main] .nav-left {
	float: left;
	font-size: 0;
	margin: 0
}
nav[role=main] .nav-right {
	float: right;
	font-size: 0;
	margin: 0
}
nav[role=main] .nav-menu {
	margin: 0
}
nav[role=main] .nav-menu.m-sub-menu {
	min-width: 215px;
	height: auto;
	z-index: 99;
	-webkit-transition: opacity 200ms cubic-bezier(0.25, .46, .45, .94);
	transition: opacity 200ms cubic-bezier(0.25, .46, .45, .94)
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn {
	padding: 15px 35px;
	border: none;
	display: block
}
@media only screen and (max-width:1299px) {
nav[role=main] .nav-menu {
	display: none
}
}
nav[role=main] .nav-menu li {
	display: inline-block;
	height: 100%
}
nav[role=main] .nav-menu li:last-child>a {
	border-right: 1px solid rgba(255,255,255,.03)
}
nav[role=main] .nav-menu.m-sub-menu {
	margin: 0;
	background-color: rgba(61,73,96,.95);
	position: absolute;
	top: 100%;
	display: none;
	width: 100%;
	left: 0
}
nav[role=main] .nav-menu.m-sub-menu.m-open {
	display: block
}
nav[role=main] .nav-menu.m-sub-menu:before {
	content: "";
	width: 100%;
	background-color: red
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn {
	width: 100%;
	text-align: left;
	font-weight: 100;
	font-size: 12px
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn.m-highlight:before {
	content: "|";
	bottom: auto;
	left: auto;
	width: auto;
	height: auto;
	background-color: transparent;
	box-shadow: none;
	position: relative;
	display: inline-block;
	color: transparent;
	margin: 0 3px 0 0;
	top: -1px;
	-webkit-transition: color .2s;
	transition: color .2s
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn.m-highlight:after {
	display: none
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn.m-highlight.m-active {
	background-color: transparent
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn.m-highlight:hover:before {
	color: #00c3ff;
	-webkit-transition: none;
	transition: none
}
nav[role=main] .nav-menu.m-sub-menu .nav-btn:hover {
	background-color: transparent
}
@media only screen and (max-width:767px) {
nav[role=main] .m-mobile {
	float: none;
	width: 100%;
	text-align: center
}
}
@media only screen and (max-width:767px) {
nav[role=main] .nav-actions {
	display: none
}
}
@media only screen and (min-width:768px) and (max-width:1299px) {
nav[role=main] .nav-logo {
	width: 220px;
	background-position: center left
}
}
@media only screen and (max-width:767px) {
nav[role=main] .nav-logo {
	height: 45px
}
}
nav[role=main] .nav-border {
	height: 2px;
	background-color: rgba(0,0,0,.25);
	position: absolute;
	width: 100%;
	bottom: -2px
}
@media only screen and (max-width:767px) {
nav[role=main] .nav-border {
	display: none
}
}
nav[role=main] .nav-btn {
	display: inline-block;
	border-bottom: 0 solid transparent;
	padding: 24px 0 22px;
	box-sizing: border-box;
	line-height: 1;
	font-size: 1.6rem;
	font-family: "microsoft yahei", arial, sans-serif;
	text-transform: none;
	color: rgba(255,255,255,.85);
	min-width: 105px;
	text-align: center;
	text-shadow: none;
	letter-spacing: .05em;
	position: relative;
	cursor: pointer;
	-webkit-transition: background-color 200ms;
	transition: background-color 200ms
}
@media only screen and (min-width:1300px) {
nav[role=main] .nav-btn {
	width: auto
}
}
@media (min-width:1300px) and (max-width:1899px) {
nav[role=main] .nav-btn {
	width: auto;
	padding-left: 1.5625vw;
	padding-right: 1.5625vw
}
}
nav[role=main] .nav-btn.m-last {
	border-right: 1px solid rgba(255,255,255,.03)
}
nav[role=main] .nav-btn.m-dark {
	background-color: rgba(0,0,0,.15)
}
nav[role=main] .nav-btn.m-dark:hover {
	background-color: rgba(0,0,0,.075)
}
nav[role=main] .nav-btn.m-orange {
	background-color: #f7931e
}
nav[role=main] .nav-btn.m-orange:hover {
	background-color: #f89e35
}
nav[role=main] .nav-btn.m-orange:active, nav[role=main] .nav-btn.m-orange:focus {
	background-color: #f78d12
}
nav[role=main] .nav-btn.m-big {
	font-weight: 700
}
nav[role=main] .nav-btn.m-active {
	background-color: rgba(31,118,188,.2);
	border-bottom-color: transparent
}
nav[role=main] .nav-btn.m-active:before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #00c3ff;
	box-shadow: 0 0 20px #00c3ff
}
nav[role=main] .nav-btn.m-active:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75%;
	opacity: .2;
	background: -webkit-linear-gradient(top, rgba(60,209,255,0)0, #3cd1ff 100%);
	background: linear-gradient(to bottom, rgba(60,209,255,0)0, #3cd1ff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#003cd1ff', endColorstr='#3cd1ff', GradientType=0)
}
nav[role=main] .nav-btn.m-search {
	background-image: url(../image/search.png);
	background-repeat: no-repeat;
	background-position: center center;
	border-bottom: none;
	height: 80px;
	width: 65px;
	border-right: 1px solid rgba(255,255,255,.03)
}
@media only screen and (max-width:991px) {
nav[role=main] .nav-btn.m-search {
	display: none
}
}
nav[role=main] .nav-btn.m-burger {
	width: auto;
	border: none;
	padding: 23.5px 23px;
	background: 0 0
}
nav[role=main] .nav-btn.m-burger span {
	width: 32px;
	height: 5px;
	display: block;
	background-color: #f7931e
}
nav[role=main] .nav-btn.m-burger span:not(:last-child) {
	margin-bottom: 5px
}
@media only screen and (min-width:1300px) {
nav[role=main] .nav-btn.m-burger {
	display: none
}
}
@media only screen and (min-width:768px) {
nav[role=main] .nav-btn.m-burger {
	padding: 19px 20px 19px 23px
}
}
@media only screen and (max-width:767px) {
nav[role=main] .nav-btn.m-burger {
	padding: 15px;
	position: absolute;
	left: 0
}
nav[role=main] .nav-btn.m-burger span {
	width: 20px;
	height: 3px
}
nav[role=main] .nav-btn.m-burger span:not(:last-child) {
	margin-bottom: 3px
}
}
nav[role=main] .nav-btn.m-burger:hover span {
	background-color: #f89e35
}
nav[role=main] .nav-btn.m-burger:active span, nav[role=main] .nav-btn.m-burger:focus span {
	background-color: #f78d12
}
nav[role=main] .nav-btn.m-bnet {
	border: none;
	background: 0 0;
	background-image: url(../image/bnet.png);
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	width: 50px;
	height: 45px;
	position: absolute;
	right: 0;
	padding: 0
}
@media only screen and (min-width:768px) {
nav[role=main] .nav-btn.m-bnet {
	display: none
}
}
nav[role=main] .nav-btn.m-has-children:after {
	content: "";
	background-image: url(../image/caret-gray.png);
	width: 12px;
	height: 7px;
	background-position: 50%;
	display: inline-block;
	margin: 0 0 2px 8px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg)
}
nav[role=main] .nav-btn.m-has-children.m-open:after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg)
}
nav[role=main] .nav-btn.m-open, nav[role=main] .nav-btn:hover {
	background-color: hsla(0,0%,100%,.1);
	-webkit-transition: none;
	transition: none;
	color: #fff
}
nav[role=main].stick {
	margin: 0;
	width: 100%
}
nav[role=mobile] {
	z-index: 99
}
nav[role=mobile] .nav-logo {
	width: 100%
}
nav[role=mobile] .nav-menu {
	margin: 0
}
nav[role=mobile] .nav-menu.m-sub-menu {
	display: none
}
nav[role=mobile] .nav-menu.m-sub-menu .nav-btn {
	color: rgba(255,255,255,.5);
	font-size: 1.5rem;
	border-top: none;
	padding: 15px 40px
}
nav[role=mobile] .nav-menu.m-open {
	display: block
}
nav[role=mobile] .nav-btn {
	display: block;
	width: 100%;
	text-align: left;
	border-left: 4px solid transparent;
	padding: 15px 25px;
	line-height: 1;
	font-size: 1.8rem;
	font-family: Futura, "microsoft yahei", arial, sans-serif;
	text-transform: none;
	color: rgba(255,255,255,.85);
	border-top: 1px solid #313d56;
	letter-spacing: .05em
}
nav[role=mobile] .nav-btn:hover {
	background-color: #39455d
}
nav[role=mobile] .nav-btn.m-active {
	border-left-color: #00c3ff;
	background-color: #39455d
}
nav[role=mobile] .nav-btn.m-orange {
	padding: 25px;
	text-shadow: none;
	background-color: #f7931e
}
nav[role=mobile] .nav-btn.m-orange:hover {
	background-color: #f89e35
}
nav[role=mobile] .nav-btn.m-orange:active, nav[role=mobile] .nav-btn.m-orange:focus {
	background-color: #f78d12
}
nav[role=mobile] .nav-btn.m-center {
	text-align: center
}
nav[role=mobile] .nav-btn.m-has-children:after {
	content: "";
	background-image: url(../image/caret-gray.png);
	width: 12px;
	height: 7px;
	background-position: 50%;
	display: inline-block;
	margin: 0 0 2px 8px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg)
}
nav[role=mobile] .nav-btn.m-has-children.m-open:after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg)
}
nav[role=mobile] .nav-btn.m-big {
	font-size: 2rem;
	font-weight: 700
}
[slide-menu] {
position:fixed;
top:0;
left:0;
height:100%;
width:90%;
max-width:275px;
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%);
z-index:99;
overflow-x:hidden;
overflow-y:auto;
box-sizing:border-box;
display:block;
background-color:#2a3751;
-webkit-transition:all .4s ease;
transition:all .4s ease
}
[slide-menu].open {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	-webkit-transition: all .4s ease;
	transition: all .4s ease
}
[slide-menu] .close {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 30px;
	text-align: center;
	font-weight: 100;
	cursor: pointer;
	color: #61697a;
	-webkit-transition: all 100ms linear;
	transition: all 100ms linear;
	z-index: 99
}
[slide-menu] .close:hover {
	color: rgba(97,105,122,.75)
}
[slide-menu] .inner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 0;
	display: table;
	margin: 0 auto;
	text-align: center;
	box-sizing: border-box;
	max-width: none
}
[slide-menu] .content {
	width: 100%;
	box-sizing: border-box
}
[slide-menu].m-centered .content {
	display: table-cell;
	vertical-align: middle
}
[video] {
position:relative;
padding-bottom:56.25%;
margin-bottom:15px;
background-color:#000
}
[video]:before {
	content: '';
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	background-image: url(../image/loading.svg);
	background-position: center center;
	background-repeat: no-repeat;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	z-index: 3
}
[video]>.play, [video]>.poster, [video]>.video {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transition:all 100ms cubic-bezier(0.075, .82, .165, 1);
transition:all 100ms cubic-bezier(0.075, .82, .165, 1)
}
[video]>.play {
z-index:2;
visibility:hidden;
opacity:0;
cursor:pointer;
background-image:url(../image/youtube-btn-ylw.png);
background-repeat:no-repeat;
background-position:center center
}
[video]>.poster {
z-index:1;
visibility:hidden;
opacity:0;
background-color:#000;
background-size:cover;
background-position:center center
}
[video]>.video {
z-index:0;
visibility:visible;
opacity:1;
background-color:#000
}
[video].buffering:before, [video].ended>.play, [video].loading:before, [video].paused>.play, [video].unstarted>.play {
	visibility: visible;
	opacity: 1
}
[video].buffering>.poster, [video].loading>.play, [video].loading>.video, [video].paused>.poster, [video].playing>.poster {
	visibility: hidden;
	opacity: 0
}
[video].buffering>.video, [video].paused>.video, [video].playing>.video {
	visibility: visible;
	opacity: 1
}
[video].m-edge .play, [video].m-edge .poster, [video].m-edge:before, [video].m-ie .play, [video].m-ie .poster, [video].m-ie:before, [video].m-mobile .play, [video].m-mobile .poster, [video].m-mobile:before, [video].m-touch .play, [video].m-touch .poster, [video].m-touch:before, [video].playing>.play {
	visibility: hidden;
	opacity: 0
}
.video-background {
	position: relative
}
.video-background-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1
}
.video-background-wrapper>.video-background-vid {
	min-width: 100%;
	position: absolute;
	top: 0;
	left: 0
}
.video-background-wrapper>.video-background-vid>video {
	min-width: 100%
}
.video-background-vid.m-right-align {
	right: 0;
	left: auto
}
.video-background-vid.m-blend:after {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 160px;
	top: -160px;
	background-image: -webkit-linear-gradient(top, rgba(240,237,242,0)0, #f0edf2 100%);
	background-image: linear-gradient(to bottom, rgba(240,237,242,0)0, #f0edf2 100%)
}
.media-card-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: inherit;
	background-clip: inherit;
	background-position: inherit
}
.media-card.m-image {
	background-size: cover;
	background-clip: padding-box;
	background-position: 50%
}
.media-card.m-2-1 {
	padding-top: 50%
}
.media-card.m-4-3 {
	padding-top: 75%
}
.media-card.m-16-9 {
	padding-top: 56.25%
}
.media-card.m-10-9 {
	padding-top: 90%
}
.media-card.m-20-9 {
	padding-top: 45%
}
.media-card {
	border: 3px solid hsla(0,0%,100%,.3);
	border-radius: 3px;
	-webkit-transition: all .2s;
	transition: all .2s;
	cursor: pointer;
	display: block;
	padding-top: 100%;
	position: relative;
	overflow: hidden
}
.media-card.m-clickable, .media-card.m-hoverable {
	-webkit-transition: border 80ms ease-out;
	transition: border 80ms ease-out
}
.media-card.m-clickable:after, .media-card.m-hoverable:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 60px 0 rgba(0,195,255,.3);
	opacity: 0;
	-webkit-transition: opacity 80ms ease-out;
	transition: opacity 80ms ease-out
}
.media-card.m-clickable:active, .media-card.m-clickable:hover, .media-card.m-hoverable:active, .media-card.m-hoverable:hover {
	border-color: #00c3ff
}
.media-card.m-clickable:active:after, .media-card.m-clickable:hover:after, .media-card.m-hoverable:active:after, .media-card.m-hoverable:hover:after {
	opacity: 1
}
.media-card.m-disabled {
	opacity: .3
}
.media-card-caption {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 15px;
	background-color: rgba(3,20,26,.75);
	color: #f0edf2;
	text-align: left
}
.media-card-caption.m-thin {
	padding: 10px
}
.media-card-title {
	text-transform: uppercase
}
.media-card-subtitle {
	font-size: 1.3rem;
	text-transform: capitalize
}
.media-card.m-clickable, a.media-card {
	cursor: pointer
}
.media-card>.container {
	position: relative;
	padding-top: 100%
}
.media-card>.container>.media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}
.media-card>.container>.content {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 1rem;
	text-transform: none;
	text-align: center;
	background-color: rgba(51,51,51,.9);
	color: #f0edf2
}
.tooltip-media-card {
	z-index: 20;
	position: absolute;
	background-color: #3c4860;
	display: none;
	padding: 2rem;
	left: 0;
	width: 100%;
	box-shadow: 0 5px 20px 1px rgba(0,0,0,.2)
}
@media only screen and (min-width:400px) {
.tooltip-media-card {
	width: 37rem
}
}
.tooltip-media-card.is-active {
	display: block
}
.tooltip-media-card .arrow {
	bottom: 100%;
	left: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-bottom-color: #3c4860;
	border-width: 10px
}
.media-gallery:after {
	content: '';
	display: table;
	clear: both
}
.media-gallery>.media-item {
	display: inline-block;
	width: 25%;
	padding: 3px;
	float: left
}
.media-gallery>.media-item .media-border {
	display: block;
	background-color: rgba(255,255,255,0);
	border-radius: 3px;
	padding: 3px;
	position: relative
}
.media-gallery>.media-item .media-border:hover {
	background-color: rgba(255,255,255,.75)
}
.media-gallery>.media-item .media-content {
	display: block;
	padding-bottom: 56.25%;
	background-position: center center;
	background-size: cover;
	position: relative;
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden
}
.media-gallery>.media-item .media-content:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 3px;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	background-image: url(../image/magnifying.png)
}
.media-gallery>.media-item .m-video:before {
	visibility: visible;
	opacity: 1;
	background-image: url(../image/youtube-btn-ylw.png);
	background-size: 13% auto
}
.media-gallery>.media-item .media-content.m-pdf:before {
	background-image: url(../image/pdf.png);
	background-position: center 40%
}
.media-gallery>.media-item .media-content.m-wallpaper:before {
	background-image: none
}
.media-gallery>.media-item .media-border:hover .media-content:before {
	visibility: visible;
	opacity: 1;
	background-color: rgba(8,27,43,.9);
	box-shadow: 0 0 0 2px rgba(0,195,255,.9)inset, 0 0 0 2px rgba(0,195,255,.9), 0 0 28px rgba(0,195,255,.9)inset
}
.media-gallery>.media-item .media-border:hover .m-video:before {
	background-image: url(../image/youtube-btn-wh.png)
}
.media-gallery>.media-item .media-border {
	-webkit-transition: all 200ms;
	transition: all 200ms
}
.media-gallery>.media-item .media-border .media-content, .media-gallery>.media-item .media-border .media-content:before {
	-webkit-transition: inherit;
	transition: inherit
}
.media-gallery>.media-item .media-border:hover {
	-webkit-transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 100ms cubic-bezier(0.075, .82, .165, 1)
}
.media-gallery>.media-item .media-border:hover .media-content {
	-webkit-transition: inherit;
	transition: inherit
}
.media-gallery>.media-item .media-border:hover .m-media-download-box, .media-gallery>.media-item .media-border:hover .size {
	visibility: visible;
	opacity: 1
}
.media-gallery>.media-item .media-border:hover .media-content:before {
	-webkit-transition: inherit;
	transition: inherit
}
.media-gallery>.media-item .media-border .m-media-wp-span {
	display: block;
	width: 100%;
	bottom: 0;
	left: 0;
	text-align: center;
	position: absolute;
	z-index: 8;
	background: #17c3f4;
	background: rgba(3,20,26,.75);
	line-height: 40px;
	color: #fff;
	text-shadow: none;
	-webkit-transition: all .2s ease 0s;
	transition: all .2s ease 0s;
	font-size: 16px
}
.media-gallery>.media-item .media-border:hover .m-media-wp-span {
	bottom: 0;
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .2s ease 0s;
	transition: all .2s ease 0s
}
.media-gallery>.media-item.m-lg {
	width: 50%
}
.media-gallery>.media-item.m-lg .m-video:before {
	background-size: 13% auto
}
@media only screen and (min-width:768px) and (max-width:991px) {
.media-gallery>.media-item {
	width: 33.33%
}
}
@media only screen and (max-width:767px) {
.media-gallery>.media-item .media-border:hover .m-media-wp-span {
	opacity: 0;
	left: 0
}
.media-gallery>.media-item {
	width: 50%
}
.media-gallery>.media-item.m-lg {
	width: 100%
}
}
.media-sub-content .wallpaper-icon {
	display: inline-block;
	width: 15%;
	position: relative;
	color: #f0edf2;
	margin: 10px 0 0
}
.media-sub-content .wallpaper-icon:before {
	content: '';
	width: 75px;
	height: 75px;
	margin: 0 auto;
	background-position: center top;
	background-repeat: no-repeat;
	display: block
}
.media-sub-content .wallpaper-icon:hover:before {
	background-position: center bottom
}
.media-sub-content .wallpaper-icon.m-urlwide:before {
	background-image: url(../image/wallpaper-wide.png)
}
.media-sub-content .wallpaper-icon.m-urlstandard:before {
	background-image: url(../image/wallpaper-standard.png)
}
.media-sub-content .wallpaper-icon.m-urltablet:before {
	background-image: url(../image/wallpaper-tablet.png)
}
.media-sub-content .wallpaper-icon.m-urlmobile:before {
	background-image: url(../image/wallpaper-mobile.png)
}
.media-sub-content .wallpaper-icon.m-urlfacebook:before {
	background-image: url(../image/wallpaper-facebook.png)
}
.media-sub-content .wallpaper-icon.m-urltwitter:before {
	background-image: url(../image/wallpaper-twitter.png)
}
.media-sub-content .wallpaper-icon span {
	display: block
}
@media only screen and (min-width:768px) and (max-width:991px) {
.media-sub-content .wallpaper-icon {
	width: 33.33%
}
}
@media only screen and (max-width:767px) {
.media-sub-content .wallpaper-icon {
	width: 50%
}
}
.media-item.lightbox-content {
	background-size: cover;
	background-position: center center
}
.media-item.lightbox-content.m-artwork {
	background-size: contain;
	background-color: #fff
}
.lightbox-header .gallery-title {
	font-size: 6rem;
	color: #f0edf2;
	text-shadow: 2.5px -2px .5px rgba(35,31,32,.04), -2.5px 2px .5px rgba(35,31,32,.04), -2.5px -2px .5px rgba(35,31,32,.04), 2.5px 2px .5px rgba(35,31,32,.04);
	font-weight: 400;
	line-height: .75;
	margin: 0
}
.lightbox-header .gallery-index {
	font-size: 1.4rem;
	color: #00c3ff;
	margin: 15px 0
}
.lightbox-footer .media-name {
	font-family: Futura, "microsoft yahei", arial, sans-serif;
	color: #f0edf2;
	font-size: 3rem;
	line-height: 1;
	margin: 30px 0 0;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5)
}
.sub-nav {
	position: relative;
	z-index: 9
}
.sub-nav .is-menu-hidden .sub-nav-item {
	left: 100%;
	margin-left: -3.6rem
}
@media only screen and (min-width:992px) {
.sub-nav .is-menu-hidden .sub-nav-item:hover {
	margin-left: -100%;
	-webkit-transition: .3s;
	transition: .3s
}
.sub-nav .is-menu-hidden .sub-nav-item:hover .sub-nav-icon {
	background-color: rgba(0,0,0,.1);
	opacity: 1
}
}
.sub-nav .sub-nav-menu {
	position: fixed;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}
.sub-nav .sub-nav-item, .sub-nav .sub-nav-item-small {
	display: block;
	position: relative;
	margin-bottom: .1em;
	background-color: #3c4860;
border-radius:.3rem
}
.sub-nav .sub-nav-item-small {
	width: 40%;
	float: left;
	margin: 0 5% 10px;
	text-align: left
}
.sub-nav .sub-nav-item-small.active, .sub-nav .sub-nav-item-small:hover, .sub-nav .sub-nav-item.active, .sub-nav .sub-nav-item:hover {
	background-color: #00c3ff
}
.sub-nav .sub-nav-item-small.active .sub-nav-icon, .sub-nav .sub-nav-item-small:hover .sub-nav-icon, .sub-nav .sub-nav-item.active .sub-nav-icon, .sub-nav .sub-nav-item:hover .sub-nav-icon {
	background-position: top;
	opacity: 1
}
.sub-nav .sub-nav-item-small.active .sub-nav-text, .sub-nav .sub-nav-item-small:hover .sub-nav-text, .sub-nav .sub-nav-item.active .sub-nav-text, .sub-nav .sub-nav-item:hover .sub-nav-text {
	opacity: 1
}
.sub-nav .sub-nav-btn {
	color: #333;
	display: block
}
.sub-nav .sub-nav-icon {
	display: inline-block;
padding:.5rem;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	font-size: 3.6rem;
	background-color: rgba(0,0,0,.2);
	background-position: 0 -1em;
border-radius:.3rem 0 0 .3rem;
	background-size: 1em 2em;
	fill: #f0edf2;
	opacity: .8
}
.sub-nav .sub-nav-icon * {
	fill: #f0edf2
}
.sub-nav .sub-nav-text {
	display: inline-block;
	vertical-align: middle;
	padding: .3em 1.2em;
	font-family: "Open Sans", "microsoft yahei", sans-serif;
	font-size: 1.09rem;
	text-transform: none;
	font-weight: 700;
	color: #f0edf2;
	opacity: .5
}
.sub-nav-small {
	padding-top: 55px;
	background: url(../image/buy-bar-bg.jpg) no-repeat
}
[promo] {
visibility:hidden;
opacity:0;
-webkit-transition:all 300ms cubic-bezier(0.075, .82, .165, 1);
transition:all 300ms cubic-bezier(0.075, .82, .165, 1)
}
[promo].lightbox-content {
	visibility: visible;
	opacity: 1
}
.news-panels:after {
	content: '';
	display: block;
	height: 0;
	clear: both
}
.news-panels .grid-item {
	display: block;
	box-sizing: border-box;
	width: 25%;
	margin-bottom: 15px;
	padding: 0 .8333%;
	float: left;
	position: relative;
	color: #f0edf2;
	text-align: left
}
.news-panels .grid-item .box {
	background-color: #9d9d9d;
	background-color: rgba(255,255,255,.25);
	display: block;
	width: 100%;
	padding-bottom: 91.8727%;
	box-sizing: border-box;
	border-radius: 3px;
	position: relative;
	-webkit-transition: all 200ms;
	transition: all 200ms
}
.news-panels .grid-item .box:hover {
	background-color: #f0edf2;
	background-color: rgba(255,255,255,.75);
	-webkit-transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 100ms cubic-bezier(0.075, .82, .165, 1)
}
.news-panels .grid-item .container {
	overflow: hidden;
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	border-radius: 3px
}
.news-panels .grid-item .bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-sizing: border-box;
	width: auto;
	height: 100%;
	display: block
}
.news-panels .grid-item .content {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,.75);
	padding: 15px 20px;
	box-sizing: border-box
}
.news-panels .grid-item .title {
	text-transform: none;
	color: #f0edf2
}
.news-panels .grid-item .title a {
	color: #f0edf2
}
@media only screen and (max-width:991px) {
.news-panels .grid-item .title {
	font-size: 1.4rem
}
}
.news-panels .grid-item .subtitle {
	line-height: 1.1;
	margin: 7px 0 2px;
	display: none
}
@media only screen and (max-width:1299px) {
.news-panels .grid-item .subtitle {
	display: none
}
}
.news-panels .grid-item .author {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 10px;
	font-size: 1em;
	color: rgba(255,255,255,.3);
	line-height: 1;
	text-transform: none;
	font-family: "microsoft yahei", Arial, sans-serif
}
.news-panels .grid-item .type-icon {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto
}
.news-panels .grid-item .type-icon.youtube {
	background-image: url(../image/youtube-icon-wh.png);
	width: 26px;
	height: 19px;
	display: none
}
.news-panels .grid-item .type-icon.twitter {
	background-image: url(../image/twitter-icon-wh.png);
	width: 26px;
	height: 21px
}
.news-panels .grid-item .link-icon {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../image/link-icon-blue-sm.png);
	width: 10px;
	height: 10px;
	margin-left: 7px
}
.news-panels .grid-item.lg {
	width: 50%
}
.news-panels .grid-item.lg .box {
	padding-bottom: 44.2697%
}
.news-panels .grid-item.video-item .table {
	display: table;
	table-layout: auto;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0
}
.news-panels .grid-item.video-item .row {
	display: table-row
}
.news-panels .grid-item.video-item .btn-overlay {
	width: 100%;
	height: 100%;
	background-image: url(../image/youtube-btn-ylw.png);
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 0;
	background-size: 13% auto;
	text-indent: -9999px;
	-webkit-transition: all 200ms;
	transition: all 200ms
}
.news-panels .grid-item.video-item .content {
	position: relative;
	background-color: rgba(3,20,26,.75)
}
.news-panels .grid-item.video-item:hover .btn-overlay {
	background-image: url(../image/youtube-btn-wh.png);
	-webkit-transition: all 100ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 100ms cubic-bezier(0.075, .82, .165, 1)
}
.news-panels .grid-item.twitter .content {
	background-color: rgba(3,20,26,.75)
}
@media (max-width:61.25em) {
.news-panels .grid-item .type-icon.youtube {
	width: 21px;
	height: 15px
}
.news-panels .grid-item .type-icon.twitter {
	width: 21px;
	height: 17px
}
}
@media (min-width:47.5em) and (max-width:61.25em) {
.news-panels .grid-item .container {
	font-size: 9px
}
}
@media (min-width:47.5em) {
.news-panels .grid-item.clear {
	clear: left
}
}
@media (max-width:47.5em) {
.news-panels .grid-panels {
	padding: 0 1em
}
.news-panels .grid-item {
	width: 50%;
	margin-bottom: 1em
}
.news-panels .grid-item .container {
	font-size: 8px
}
.news-panels .grid-item.lg {
	width: 100%
}
.news-panels .grid-item .type-icon.youtube {
	width: 16px;
	height: 11px
}
.news-panels .grid-item .type-icon.twitter {
	width: 16px;
	height: 13px
}
}
@media (max-width:30em) {
.news-panels .grid-item {
	width: 100%
}
.news-panels .grid-item.lg .bg {
	font-size: 7px;
	position: relative
}
.news-panels .grid-item .box, .news-panels .grid-item.lg .box {
	padding-bottom: 65.8727%
}
}
.u-center-block {
	display: block;
	margin-left: auto;
	margin-right: auto
}
.u-align-center {
	text-align: center
}
.u-align-right {
	text-align: right
}
.u-align-left {
	text-align: left
}
.u-align-top {
	vertical-align: top
}
.u-align-middle {
	vertical-align: middle
}
.u-align-bottom {
	vertical-align: bottom
}
.u-align-baseline {
	vertical-align: baseline
}
.u-vertical-center {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}
.u-hidden, [hidden] {
display:none
}
.u-visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0
}
.u-slightly-transparent {
	opacity: .7
}
.u-relative {
	position: relative
}
.u-absolute {
	position: absolute
}
.u-fixed {
	position: fixed
}
.u-block {
	display: block
}
.u-inline-block {
	display: inline-block
}
.u-none {
	text-transform: none
}
.u-lowercase {
	text-transform: lowercase
}
.u-bold {
	font-weight: 700
}
.u-normal {
	font-weight: 400
}
.u-italic {
	font-style: italic
}
@media only screen and (min-width:768px) {
.u-font-large {
	font-size: 2.2rem
}
}
.u-font-small {
	font-size: 80%
}
.u-font-fine {
	font-size: 1rem
}
.card>.caption>.heading, .u-invert {
	color: #f0edf2
}
.u-limit-width {
	max-width: 40em
}
.u-bigNoodleToo {
	font-family: 'Big Noodle Too'
}
.u-font-shadow {
	text-shadow: 1px 2px 3px rgba(51,51,51,.5)
}
.u-font-dark-gradient, .u-font-header-shadow {
	text-shadow: 1px 1px 3px rgba(60,72,96,.5)
}
.u-font-dark-gradient {
	background: -webkit-linear-gradient(top, #3f6493 10%, #345177 100%);
	background-image: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}
.u-margin-top-sm {
	margin-top: 1rem
}
.u-margin-top-md {
	margin-top: 2rem
}
.u-margin-top-lg {
	margin-top: 4rem
}
.u-margin-bottom-sm {
	margin-bottom: 1rem
}
.u-margin-bottom-md {
	margin-bottom: 2rem
}
.u-margin-bottom-lg {
	margin-bottom: 4rem
}
.u-left {
	float: left
}
.u-right {
	float: right
}
.media-thumbnail, .u-border {
	border: 4px solid rgba(255,255,255,.5);
	border-radius: 3px
}
.u-white-background {
	background-color: #f0edf2
}
.u-box-shadow-inset {
	box-shadow: inset 0 20px 20px -15px rgba(0,0,0,.4), inset 0 -20px 20px -15px rgba(0,0,0,.4)
}
.m-nav-pad, .u-nav-offset {
	padding-top: 45px
}
@media only screen and (min-width:768px) {
.m-nav-pad, .u-nav-offset {
	padding-top: 128px
}
}
.u-fill-width {
	width: 100%
}
.u-fill-height {
	height: 100%
}
.u-callout {
	padding: 12px;
	border-radius: 4px;
	background-color: rgba(0,0,0,.5)
}
.u-magnifier, .u-pdf, .u-video, .u-video_youtube {
	position: relative
}
.u-magnifier:after, .u-pdf:after, .u-video:after, .u-video_youtube:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94);
	transition: all .2s cubic-bezier(.25, .46, .45, .94);
	background-position: 50%;
	background-repeat: no-repeat;
	background-image: none
}
.u-magnifier:hover:after {
	background-size: 20% auto;
	background-image: url(../image/magnifying.png)
}
.u-video:after, .u-video_youtube:after {
	background-size: 13% auto;
	background-image: url(../image/youtube-btn-ylw.png)
}
.u-video:hover:after, .u-video_youtube:hover:after {
	background-image: url(../image/youtube-btn-wh.png)
}
.u-pdf:hover:after {
	background-image: url(../image/pdf.png);
	background-size: 16% auto
}
.u-full-scale-image {
	background-size: cover;
	background-clip: padding-box;
	background-position: 50%
}
.is-hidden {
	display: none
}
.joinus, .joinus:focus, .joinus:visited {
	color: #ffc70e;
	border: 2px solid #ffc70e;
	font-weight: 700;
	padding: 10px 40px;
	text-decoration: none;
	-webkit-transition: all .4s ease;
	transition: all .4s ease
}
.joinus:hover {
	color: #fff;
	border-color: #fff;
	-webkit-transition: all .4s ease;
	transition: all .4s ease
}
.community-share {
	margin: 2em auto;
	padding: 1em 0;
	border: 1px solid#f0edf2;
	border: 1px solid rgba(255,255,255,.1);
	border-left: none;
	border-right: none
}
.share-wrapper {
	float: right
}
.community-share li.sharetip {
	font-size: 14px;
	height: 32px;
	line-height: 32px
}
.community-share li {
	float: left;
	margin-right: 2px
}
.community-share li a {
	transition: background-position .3s;
	width: 36px;
	height: 32px;
	display: block;
	margin: 0;
	background: url(../image/news-share.png) no-repeat 0 0
}
.community-share li a:hover {
	transition: background-position .3s
}
.community-share li a.bds_tsina {
	background-position: -3px -4px
}
.community-share li a.bds_tqq {
	background-position: -42px -4px
}
.community-share li a.bds_weixin {
	background-position: -122px -4px
}
.community-share li a.bds_yixin {
	background-position: -82px -4px
}
.community-share li a.bds_tieba {
	background-position: -161px -4px
}
.community-share li a.bds_tsina:hover {
	background-position: -3px -49px
}
.community-share li a.bds_tqq:hover {
	background-position: -42px -49px
}
.community-share li a.bds_weixin:hover {
	background-position: -122px -49px
}
.community-share li a.bds_yixin:hover {
	background-position: -82px -49px
}
.community-share li a.bds_tieba:hover {
	background-position: -161px -49px
}
.community-share li.borderR {
	padding-right: 4px
}
#gotop {
	width: 40px;
	height: 30px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(255,255,255,.25);
	color: #000;
	line-height: 30px;
	text-align: center;
	border-radius: 3px;
	font-size: 12px;
	z-index: 501;
	display: none;
	cursor: pointer
}
.bg-heroes-faceoff {
	background-color: #fff;
	background-image: url(../image/heroes-faceoff.jpg);
	background-position: center top
}
.bg-petals {
	background-color: #EDD9E0;
	background-image: url(../image/da03e55ee5f2c81c.jpg);
	background-size: cover;
	background-position: center top
}
.bg-polygon-world-map {
	background-image: url(../image/fight-for-future-bg.png);
	background-size: auto 100%;
	background-position: center top
}
.bg-mountain-city {
	background-image: url(../image/dorado-screenshot-003.jpg);
	background-position: center top
}
.bg-filler {
	min-height: 340px
}
.bg-candy {
	background-image: url(../image/candy.png);
	background-size: cover;
	background-position: center top
}
.bg-museum {
	background-image: url(../image/da03e55ee5f2c81c.jpg);
	background-size: cover;
	background-position: center top
}
.bg-fftf {
	opacity: 1;
	content: '';
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
@media only screen and (min-width:992px) {
.bg-fftf.trans-in {
	-webkit-animation: 20s linear bg-fade-in;
	animation: 20s linear bg-fade-in
}
.bg-fftf.trans-out-latest {
	-webkit-animation: 20s linear bg-fade-out;
	animation: 20s linear bg-fade-out;
	z-index: -1
}
.bg-fftf.trans-out {
	z-index: -10
}
}
.bg-cairo {
	background-image: url(../image/cairo-mobile.jpg);
	background-color: #f0eef3;
	background-size: contain
}
@media only screen and (min-width:400px) {
.bg-cairo {
	background-image: url(../images/cairo-tablet.jpg);
	background-color: #e4dfe6
}
}
@media only screen and (min-width:992px) {
.bg-cairo {
	background-size: cover;
	background-position: center top;
	background-image: url(http://i1.buimg.com/1949/266241a66d119dc2.jpg)
}
}
.bg-volskaya {
	background-image: url(../image/volskaya-376.jpg);
	background-size: contain
}
@media only screen and (min-width:768px) {
.bg-volskaya {
	background-image: url(../images/volskaya-760.jpg)
}
}
@media only screen and (min-width:992px) {
.bg-volskaya {
	background-size: cover;
	background-position: center top;
	background-image: url(../images/volskaya-2560.jpg)
}
}
.bg-london {
	background-image: url(../image/london-376.jpg);
	background-size: contain
}
@media only screen and (min-width:768px) {
.bg-london {
	background-image: url(../images/london-760.jpg)
}
}
@media only screen and (min-width:992px) {
.bg-london {
	background-size: cover;
	background-position: center top;
	background-image: url(../images/london-2560.jpg)
}
}
@-webkit-keyframes bg-fade-in {
0 {
opacity:0
}
100% {
opacity:1
}
}
@keyframes bg-fade-in {
0 {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes bg-fade-out {
0 {
opacity:1
}
10%, 100% {
opacity:0
}
}
@keyframes bg-fade-out {
0 {
opacity:1
}
10%, 100% {
opacity:0
}
}
.nav-client .nav-collapse {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height, .4s;
	-webkit-transition: height .4s;
	transition: height .4s
}
.nav-client .nav-collapse.in {
	height: auto
}
.nav-client .dropdown {
	position: relative
}
.nav-client .dropdown-toggle {
	display: inline-block;
	position: relative
}
.nav-client .dropdown-toggle:active, .nav-client .open .dropdown-toggle, .open .nav-client .dropdown-toggle {
	outline: 0
}
.nav-client .dropdown-menu {
	position: absolute;
	top: 100%;
	display: none;
	float: left;
	min-width: 160px;
	list-style: none
}
.nav-client .dropdown-menu.pull-right {
	right: 0;
	left: auto
}
.nav-client .dropdown-menu li>a {
	display: block;
	clear: both;
	white-space: nowrap
}
.nav-client .dropdown-menu .active>a, .nav-client .dropdown-menu .active>a:focus, .nav-client .dropdown-menu .active>a:hover, .nav-client .dropdown-menu li>a:focus, .nav-client .dropdown-menu li>a:hover {
	text-decoration: none
}
.nav-client .dropdown-menu .disabled>a:focus, .nav-client .dropdown-menu .disabled>a:hover {
	text-decoration: none;
	background-color: transparent;
	background-image: none;
	cursor: default
}
.nav-client .open>.dropdown-menu, .open>.nav-client .dropdown-menu {
	display: block
}
.pull-right>.nav-client .dropdown-menu {
	right: 0;
	left: auto
}
.dropdown .nav-client .dropdown-menu .nav-header, .nav-client .dropdown .dropdown-menu .nav-header {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}
.nav-client .dropdown-toggle {
	padding-right: 30px
}
.nav-client .caret {
	content: "";
	margin: 2px;
	background-image: url(../image/sprite-16-white.png);
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	line-height: 16px;
	vertical-align: top;
	background-repeat: no-repeat;
	text-indent: -9999px;
	-webkit-transition: opacity, .2s;
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
	background-position: -64px -256px
}
.navbar .nav-client .caret {
	background-image: url(../image/sprite-16-white.png)
}
.dropdown-toggle>.nav-client .caret, .nav-client .dropdown-toggle>.caret {
	position: absolute;
	right: 5px;
	top: 0;
	opacity: .3;
	-webkit-transition: opacity, .2s;
	-webkit-transition: opacity .2s;
	transition: opacity .2s
}
.dropdown-toggle:focus>.nav-client .caret, .dropdown-toggle:hover>.nav-client .caret, .nav-client .dropdown-toggle:focus>.caret, .nav-client .dropdown-toggle:hover>.caret {
	opacity: .5
}
.nav-pills .dropdown-toggle>.nav-client .caret, .nav-pills .nav-client .dropdown-toggle>.caret, .nav-tabs .dropdown-toggle>.nav-client .caret, .nav-tabs .nav-client .dropdown-toggle>.caret {
	top: 5px
}
.nav-client .dropdown-menu {
	left: -2px;
	z-index: 1000;
	background-color: #272e3b;
	box-shadow: 0 0 0 1px #3d434f inset, 0 5px 10px rgba(0,0,0,.75);
	border: solid #000;
	border-width: 1px
}
.nav-client .dropdown-menu .divider {
	height: 1px;
	overflow: hidden;
	border-bottom: 1px solid #3d434f;
	background-color: transparent;
	margin: 2px 0 3px
}
.nav-client .dropdown-menu li {
	margin: 0 1px;
	padding: 0
}
.nav-client .dropdown-menu li>a {
	padding: 4px 30px;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: rgba(255,255,255,.7);
	-webkit-transition: background-color .2s, border-color .2s, color .2s;
	transition: background-color .2s, border-color .2s, color .2s
}
.nav-client .dropdown-menu li>span {
	padding: 4px 30px;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px
}
.nav-client .dropdown-menu [class*=" icon-"], .nav-client .dropdown-menu [class^=icon-] {
	background-image: url(../image/sprite-16-blue.png)
}
.nav-client .dropdown-menu [class*=" icon-"]:not(.icon-external-link), .nav-client .dropdown-menu [class^=icon-]:not(.icon-external-link) {
	position: absolute;
	left: 5px
}
.nav-client .dropdown-menu .icon-external-link {
	position: absolute;
	right: 5px
}
.navbar .nav-client .dropdown-menu {
	margin-top: 9px
}
.navbar .pull-right .nav-client .dropdown-menu li:first-child:before {
	content: "";
	border-bottom: 6px solid #3d434f;
	border-left: 6px solid rgba(0,0,0,0);
	border-right: 6px solid rgba(0,0,0,0);
	display: inline-block;
	position: absolute;
	top: -6px
}
.navbar .pull-right .nav-client .dropdown-menu li:first-child:after {
	content: "";
	border-top: 1px solid #272e3b;
	display: inline-block;
	position: absolute;
	top: 0;
	width: 10px
}
.navbar .pull-right .nav-client .dropdown-menu:before {
	content: "";
	border-bottom: 7px solid #000;
	border-left: 7px solid rgba(0,0,0,0);
	border-right: 7px solid rgba(0,0,0,0);
	display: inline-block;
	position: absolute;
	top: -7px
}
.navbar .pull-right .nav-client .dropdown-menu:after {
	content: "";
	border-bottom: 4px solid #272e3b;
	border-left: 4px solid rgba(0,0,0,0);
	border-right: 4px solid rgba(0,0,0,0);
	display: inline-block;
	position: absolute;
	top: -4px
}
.navbar .pull-right .nav-client .dropdown-menu li:first-child:before {
	right: 8px
}
.navbar .pull-right .nav-client .dropdown-menu li:first-child:after {
	right: 9px
}
.navbar .pull-right .nav-client .dropdown-menu:before {
	right: 7px
}
.navbar .pull-right .nav-client .dropdown-menu:after {
	right: 10px
}
.nav-tabs .nav-client .dropdown-menu {
	left: 28px;
	margin-top: 0
}
.nav-pills .nav-client .dropdown-menu {
	left: -1px;
	margin-top: -1px
}
.nav-client .dropdown-menu li>a:focus, .nav-client .dropdown-menu li>a:hover {
	color: #fff;
	background-color: rgba(255,255,255,.07)
}
.nav-client .dropdown-menu .active>a, .nav-client .dropdown-menu .active>a:focus, .nav-client .dropdown-menu .active>a:hover {
	color: #fff
}
.nav-client .dropdown-menu .disabled>a, .nav-client .dropdown-menu .disabled>a:focus, .nav-client .dropdown-menu .disabled>a:hover {
	color: rgba(255,255,255,.3)
}
.nav-client .dropdown-menu>.disabled>a>[class*=" icon-"], .nav-client .dropdown-menu>.disabled>a>[class^=icon-] {
background-image:url(../image/sprite-16-white.png);
opacity:.2
}
.dropdown-submenu>.nav-client .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: 0
}
.dropdown-submenu:hover>.nav-client .dropdown-menu {
	display: block
}
.dropdown .nav-client .dropdown-menu .nav-header, .nav-client .dropdown .dropdown-menu .nav-header {
	padding: 4px 30px;
	margin: 3px 0;
	border: solid #3d434f;
	border-width: 1px 0;
	color: rgba(255,255,255,.3)
}
.dropdown .nav-client .dropdown-menu .nav-header:first-child, .nav-client .dropdown .dropdown-menu .nav-header:first-child {
	border-top: 0;
	margin-top: 0
}
@-webkit-keyframes keyframes-loading {
from {
background-position:0
}
to {
	background-position: -420px
}
}
@keyframes keyframes-loading {
from {
background-position:0
}
to {
	background-position: -420px
}
}
.nav-loading {
	-webkit-animation: keyframes-loading .8s steps(21) infinite;
	animation: keyframes-loading .8s steps(21) infinite
}
.nav-client {
	font-size: 15px;
	line-height: 20px
}
.nav-client .grid-container, .nav-client .nav-client .nav-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px
}
.nav-client .nav-list {
	margin: 0
}
.nav-client .nav-list li {
	line-height: 18px;
	list-style-type: none;
	margin: 0;
	padding: 0
}
.nav-client .nav-list li a.nav-a {
	display: block;
	line-height: 30px
}
.nav-client .nav-list li:last-child {
	margin: 0
}
.nav-client .nav-center {
	text-align: center
}
.nav-client .nav-box {
	padding: 10px
}
.nav-client .nav-box .affix-bottom {
	margin-bottom: -10px
}
.nav-client .nav-box .dropdown-section, .nav-client .nav-box .nav-client .notification {
	margin-left: -11px;
	margin-right: -11px
}
.nav-client .nav-section {
	display: block
}
.nav-client .nav-title {
	color: #bbb;
	color: rgba(255,255,255,.7);
	text-shadow: 0 0 3px #000
}
.nav-client .dropdown-section:after, .nav-client .dropdown-section:before, .nav-client .nav-clearfix:after, .nav-client .nav-clearfix:before, .nav-client .nav-client .notification:after, .nav-client .nav-client .notification:before, .nav-client .nav-section:after, .nav-client .nav-section:before {
	content: "";
	display: table
}
.nav-client .dropdown-section:after, .nav-client .nav-clearfix:after, .nav-client .nav-client .notification:after, .nav-client .nav-section:after {
	clear: both
}
.nav-client .hide {
	display: none!important
}
.nav-client .nav-btn {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 3px 0;
	padding: 6px 20px;
	font-size: 15px;
	line-height: 20px;
	height: 34px;
	background-color: #098cc8;
	color: #fff;
	border-radius: 2px;
	-webkit-transition: background-color .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s;
	transition: background-color .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s;
	background-image: -webkit-linear-gradient(top, #0f9ada, #0076ad);
	background-image: linear-gradient(to bottom, #0f9ada, #0076ad);
	border: 0;
	box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.15)inset
}
.nav-client .nav-btn.active, .nav-client .nav-btn:active, .nav-client .nav-btn:focus {
	outline: 0
}
.nav-client .nav-btn.loading {
	position: relative;
	overflow: hidden
}
.nav-client .nav-btn.disabled, .nav-client .nav-btn[disabled] {
	cursor: default!important
}
.nav-client .nav-btn.active, .nav-client .nav-btn:active {
	padding: 7px 19px 5px 21px
}
.nav-client .nav-btn.disabled.active, .nav-client .nav-btn.disabled:active, .nav-client .nav-btn[disabled].active, .nav-client .nav-btn[disabled]:active {
	padding: 6px 20px!important
}
.nav-client .nav-btn.btn-wide {
	margin: 3px 0;
	padding: 6px 40px;
	font-size: 15px;
	line-height: 20px;
	height: 34px
}
.nav-client .nav-btn.btn-wide.active, .nav-client .nav-btn.btn-wide:active {
	padding: 7px 39px 5px 41px
}
.nav-client .nav-btn.btn-wide.disabled.active, .nav-client .nav-btn.btn-wide.disabled:active, .nav-client .nav-btn.btn-wide[disabled].active, .nav-client .nav-btn.btn-wide[disabled]:active {
	padding: 6px 40px!important
}
.nav-client .nav-btn [class*=" icon-"], .nav-client .nav-btn [class^=icon-] {
	margin-top: 2px;
	margin-left: -4px;
	margin-right: 5px
}
.nav-client .nav-btn:focus [class*=" icon-"], .nav-client .nav-btn:focus [class^=icon-], .nav-client .nav-btn:hover [class*=" icon-"], .nav-client .nav-btn:hover [class^=icon-] {
	opacity: 1
}
.nav-client .nav-btn.active [class*=" icon-"], .nav-client .nav-btn.active [class^=icon-], .nav-client .nav-btn:active [class*=" icon-"], .nav-client .nav-btn:active [class^=icon-] {
	opacity: .8
}
.nav-client .nav-btn:focus, .nav-client .nav-btn:hover {
	background-color: #21b0f1;
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 rgba(0,0,0,0)
}
.nav-client .nav-btn.active, .nav-client .nav-btn:active {
	background-color: #006899;
	color: rgba(255,255,255,.7);
	border-color: transparent
}
.nav-client .nav-btn.disabled, .nav-client .nav-btn.disabled.active, .nav-client .nav-btn.disabled:active, .nav-client .nav-btn.disabled:focus, .nav-client .nav-btn.disabled:hover, .nav-client .nav-btn[disabled] {
	background-color: transparent!important;
	color: rgba(255,255,255,.15)!important;
	border-color: transparent!important;
	box-shadow: 0 0 rgba(0,0,0,0)!important
}
.nav-client .nav-btn.disabled.active.loading, .nav-client .nav-btn.disabled.loading, .nav-client .nav-btn.disabled:active.loading, .nav-client .nav-btn.disabled:focus.loading, .nav-client .nav-btn.disabled:hover.loading, .nav-client .nav-btn[disabled].loading {
	color: rgba(255,255,255,0)!important
}
.nav-client .nav-btn:focus, .nav-client .nav-btn:hover {
	background-image: linear-gradient(to bottom, #37c0ff, #0097dd)
}
.nav-client .nav-btn.active, .nav-client .nav-btn:active {
	background-image: linear-gradient(to bottom, #006ea1, #00608d);
	box-shadow: 1px 1px 2px rgba(0,0,0,.6)inset, 0 0 0 1px rgba(255,255,255,.07)inset
}
.nav-client .nav-btn.disabled, .nav-client .nav-btn.disabled.active, .nav-client .nav-btn.disabled:active, .nav-client .nav-btn.disabled:focus, .nav-client .nav-btn.disabled:hover, .nav-client .nav-btn[disabled] {
	background-image: linear-gradient(to bottom, rgba(15,154,218,.1), rgba(0,118,173,.1))
}
.nav-client .nav-btn [class*=" icon-"], .nav-client .nav-btn [class^=icon-] {
	background-image: url(../image/sprite-16-white.png);
	opacity: 1
}
.nav-client .nav-btn.active [class*=" icon-"], .nav-client .nav-btn:active [class^=icon-] {
	opacity: .7
}
.nav-client .nav-btn-block {
	display: block;
	box-sizing: border-box
}
.nav-client {
	min-height: 44px
}
.nav-client #nav-client-bar .dropdown-toggle.nav-link, .nav-client #nav-client-bar .nav-client .dropdown-toggle.nav-link {
	padding-right: 23px
}
.nav-client #nav-client-bar .dropdown-toggle.nav-link>.caret, .nav-client #nav-client-bar .dropdown-toggle.nav-link>.nav-client .caret, .nav-client #nav-client-bar .nav-client .dropdown-toggle.nav-link>.caret {
	margin-right: 0;
	position: absolute;
	top: 20px;
	right: 0;
	border: 0
}
.nav-client .dropup .dropdown-menu, .nav-client .dropup .nav-client .dropdown-menu {
	top: auto;
	bottom: 100%
}
.nav-client .dropdown-menu {
	padding: 0;
	margin: 18px 0
}
.nav-client .dropdown-menu li>.nav-a, .nav-client .nav-client .dropdown-menu li>.nav-a {
	padding: 0
}
.nav-client .pull-right .dropdown-menu, .nav-client .pull-right .nav-client .dropdown-menu {
	left: auto;
	right: -6px
}
.nav-client #nav-client-bar .arrow, .nav-client #nav-client-bar .arrow:after, .nav-client .nav-mobile-menubar .arrow, .nav-client .nav-mobile-menubar .arrow:after, .nav-client .nav-notification-responsive-container .arrow, .nav-client .nav-notification-responsive-container .arrow:after {
	content: "";
	border-width: 7px;
	position: absolute;
	border-color: transparent;
	border-style: solid
}
.nav-client #nav-client-bar .arrow.top, .nav-client .nav-mobile-menubar .arrow.top, .nav-client .nav-notification-responsive-container .arrow.top {
	top: -8px;
	right: 6px;
	border-width: 8px;
	border-top-width: 0;
	border-bottom-color: #000
}
.nav-client #nav-client-bar .arrow.top:before, .nav-client .nav-mobile-menubar .arrow.top:before, .nav-client .nav-notification-responsive-container .arrow.top:before {
	content: "";
	border-bottom: 8px solid #3d434f;
	border-left: 8px solid rgba(0,0,0,0);
	border-right: 8px solid rgba(0,0,0,0);
	position: absolute;
	right: -8px;
	top: 1px
}
.nav-client #nav-client-bar .arrow.top:after, .nav-client .nav-mobile-menubar .arrow.top:after, .nav-client .nav-notification-responsive-container .arrow.top:after {
	margin-left: -7px;
	bottom: -10px;
	border-top-width: 0;
	border-bottom-color: #272e3b
}
.nav-client #nav-client-bar .arrow.bottom, .nav-client .nav-mobile-menubar .arrow.bottom, .nav-client .nav-notification-responsive-container .arrow.bottom {
	bottom: -8px;
	right: 6px;
	border-width: 8px;
	border-bottom-width: 0;
	border-top-color: #000
}
.nav-client #nav-client-bar .arrow.bottom:before, .nav-client .nav-mobile-menubar .arrow.bottom:before, .nav-client .nav-notification-responsive-container .arrow.bottom:before {
	content: "";
	border-top: 8px solid #3d434f;
	border-left: 8px solid rgba(0,0,0,0);
	border-right: 8px solid rgba(0,0,0,0);
	position: absolute;
	right: -8px;
	bottom: 1px
}
.nav-client #nav-client-bar .arrow.bottom:after, .nav-client .nav-mobile-menubar .arrow.bottom:after, .nav-client .nav-notification-responsive-container .arrow.bottom:after {
	margin-left: -7px;
	bottom: 3px;
	border-bottom-width: 0;
	border-top-color: #272e3b
}
.nav-client #nav-client-bar .nav-notification-dropdown .arrow.top {
	right: auto;
	left: 21px
}
.nav-client .nav-mobile-menubar .arrow.top {
	top: 6px;
	right: 20px
}
.nav-client .nav-notification-responsive-container .arrow.top {
	left: auto;
	right: 53px;
	z-index: 1
}
.nav-client .dropdown.nav-client .open .dropdown-toggle, .nav-client .dropdown.open .dropdown-toggle, .nav-client .dropdown.open .nav-client .dropdown-toggle, .nav-client .nav-client .dropdown.open .dropdown-toggle {
	color: #fff
}
.nav-client .dropdown.nav-client .open .dropdown-toggle .caret, .nav-client .dropdown.open .dropdown-toggle .caret, .nav-client .dropdown.open .dropdown-toggle .nav-client .caret, .nav-client .dropdown.open .nav-client .dropdown-toggle .caret, .nav-client .nav-client .dropdown.open .dropdown-toggle .caret {
	opacity: .5
}
.nav-client .dropdown.nav-client .open>.nav-item, .nav-client .dropdown.open>.nav-item, .nav-client .nav-client .dropdown.open>.nav-item {
	text-decoration: none;
	text-shadow: 0 0 10px #fff, 0 -6px 10px rgba(255,255,255,.3), 0 6px 10px rgba(255,255,255,.3)
}
.nav-client .nav-dropdown .title {
	font-size: 17px;
	line-height: 22px;
	color: #fff;
	font-weight: 400
}
.nav-client .nav-dropdown p {
	margin: 15px 0;
	line-height: 18px
}
.nav-client .dropdown-btn-mobile, .nav-client .dropdown-mobile {
	background-color: #232935
}
.nav-client .nav-container {
	padding: 0
}
.nav-client .dropdown-section, .nav-client .nav-client .notification {
	display: block;
	box-sizing: border-box;
	border-bottom: solid 1px #3d434f;
	padding-top: 6px;
	padding-bottom: 6px
}
.nav-client .dropdown-section.hidden {
	display: none
}
.nav-client .download-btn {
	clear: both;
	border: solid 1px #3d434f
}
.nav-client .download-btn .nav-item>.nav-icon-mouse {
	vertical-align: middle;
	margin: 0 8px 0 6px;
	position: relative;
	bottom: 1px
}
.nav-client .notification {
	padding: 10px
}
.nav-client .notification .affix-bottom {
	margin-bottom: -10px
}
.nav-client .notification .dropdown-section, .nav-client .notification .nav-client .notification {
	margin-left: -11px;
	margin-right: -11px
}
.nav-client .dropdown-well {
	background-color: #232935
}
.nav-client .nav-column-container {
	display: table;
	box-sizing: border-box;
	width: 100%;
	height: 100%
}
.nav-client .nav-column-container.dropdown-section, .nav-client .nav-column-container.nav-client .notification {
	padding: 0
}
.nav-client .nav-column, .nav-client .nav-column-50 {
	display: table-cell;
	height: 100%
}
.nav-client .nav-column .dropdown-section .nav-column, .nav-client .nav-column .nav-client .notification .nav-column, .nav-client .nav-column .nav-dropdown .nav-column, .nav-client .nav-column-50 .dropdown-section .nav-column, .nav-client .nav-column-50 .nav-dropdown .nav-column {
	border-right: solid 1px #3d434f
}
.nav-client .nav-column .dropdown-section .nav-column:last-child, .nav-client .nav-column .nav-client .notification .nav-column:last-child, .nav-client .nav-column .nav-dropdown .nav-column:last-child, .nav-client .nav-column-50 .dropdown-section .nav-column:last-child, .nav-client .nav-column-50 .nav-dropdown .nav-column:last-child {
	border-right: none
}
.nav-client .nav-column-50 {
	padding: 0;
	width: 50%
}
.nav-client .nav-column-50:last-child {
	border-right: none
}
.nav-client .nav-grid-50 {
	width: 50%
}
.nav-client .nav-grid-100 {
	width: 100%
}
.nav-client .layout {
	padding: 0
}
.nav-client #nav-client-region-select .arrow.bottom:after {
	border-top-color: #232935
}
.nav-client #nav-client-region-select .dropdown>.nav-item, .nav-client #nav-client-region-select .nav-client .dropdown>.nav-item {
	font-size: 15px
}
.nav-client #nav-client-region-select .dropdown.nav-client .open>.nav-item, .nav-client #nav-client-region-select .dropdown.open>.nav-item, .nav-client #nav-client-region-select .nav-client .dropdown.open>.nav-item {
	text-shadow: none;
	color: #fff
}
.nav-client #nav-client-region-select .languages, .nav-client #nav-client-region-select .regions {
	margin: 0;
	padding: 0
}
.nav-client #nav-client-region-select .languages h3, .nav-client #nav-client-region-select .regions h3 {
	color: rgba(255,255,255,.3);
	font-weight: 300;
	text-transform: none;
	font-size: 12px;
	margin-bottom: 10px;
	margin-top: 20px;
	padding: 0 0 0 24px
}
.nav-client #nav-client-region-select .languages ul, .nav-client #nav-client-region-select .regions ul {
	margin: 0;
	padding-bottom: 20px
}
.nav-client #nav-client-region-select .languages ul li, .nav-client #nav-client-region-select .regions ul li {
	line-height: 18px;
	list-style-type: none;
	position: relative;
	margin: 0
}
.nav-client #nav-client-region-select .languages ul li>a, .nav-client #nav-client-region-select .regions ul li>a {
	padding: 0 0 0 24px;
	line-height: 30px;
	font-size: 14px
}
.nav-client #nav-client-region-select .languages ul li>a:hover, .nav-client #nav-client-region-select .regions ul li>a:hover {
	background: rgba(255,255,255,.05)
}
.nav-client #nav-client-region-select .languages ul li a.nav-a, .nav-client #nav-client-region-select .regions ul li a.nav-a {
	display: block;
	line-height: 24px
}
.nav-client #nav-client-region-select .languages ul li:last-child, .nav-client #nav-client-region-select .regions ul li:last-child {
	margin-bottom: 0
}
.nav-client #nav-client-region-select .languages ul li.active:before, .nav-client #nav-client-region-select .regions ul li.active:before {
	display: inline;
	content: "\002022";
	position: absolute;
	color: #0595d5;
	font-size: 18px;
	left: 8px;
	padding-top: 5px
}
.nav-client #nav-client-region-select .languages ul li.active:before>.nav-item, .nav-client #nav-client-region-select .regions ul li.active:before>.nav-item {
color:#fff
}
.nav-client .nav-product-card-container.games-menu {
	margin: 0;
	padding: 0;
	width: 360px
}
.nav-client .nav-product-card-container li {
	position: relative;
	display: table;
	box-sizing: border-box;
	border: solid 1px #3d434f;
	border-left: none;
	border-top: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 33.33333333%;
	height: 116px
}
.nav-client .nav-product-card-container li>a {
	padding: 70px 10px 5px;
	width: 100%;
	height: 100%;
	position: relative;
	display: table-cell;
	box-sizing: border-box;
	text-align: center;
	font-size: 13px;
	line-height: 15px!important;
	vertical-align: middle;
	white-space: normal
}
.nav-client .nav-product-card-container li>a:hover {
	background: rgba(255,255,255,.05)
}
.nav-client .nav-product-card-container li [class*=" nav-icon-"], .nav-client .nav-product-card-container li [class^=nav-icon-] {
	position: absolute;
	left: 50%;
	margin-left: -35px;
	top: 5px
}
.nav-client .nav-product-card-container li:nth-child(3n) {
	border-right: none
}
.nav-client .nav-product-card-container li:nth-last-child(-n+1):nth-child(3n), .nav-client .nav-product-card-container li:nth-last-child(-n+2):nth-child(3n+2), .nav-client .nav-product-card-container li:nth-last-child(-n+3):nth-child(3n+1) {
	border-bottom: none
}
.nav-client .games.dropdown, .nav-client .games.nav-client .dropdown {
	display: inline
}
.nav-client .games.dropdown .dropdown-menu, .nav-client .games.dropdown .nav-client .dropdown-menu, .nav-client .games.nav-client .dropdown .dropdown-menu {
	top: 20px
}
.nav-client .nav-header-content .pull-right>.dropdown-menu, .nav-client .nav-header-content .pull-right>.nav-client .dropdown-menu {
	top: 41px
}
.nav-client #global-nav-dropdown {
	width: 500px
}
.nav-client .nav-list {
	padding: 0
}
#nav-client-header {
	width: 100%;
	position: relative;
	top: 0
}
.nav-client #nav-client-bar {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.07);
	border-width: 0 0 1px;
	color: #fff;
	font-size: 20px;
	line-height: 20px
}
.nav-client.compact #nav-client-bar {
	height: 44px
}
.nav-client.compact #nav-client-bar .nav-center, .nav-client.compact #nav-client-bar .nav-left, .nav-client.compact #nav-client-bar .nav-right {
	line-height: 44px
}
.nav-client.compact #nav-client-bar .nav-left {
	height: 44px
}
.nav-client.compact #nav-client-bar .nav-left .dropdown>.nav-item, .nav-client.compact #nav-client-bar .nav-left .nav-client .dropdown>.nav-item {
	font-size: 17px;
	padding-right: 31px;
	padding-bottom: 0;
	top: 0
}
.nav-client.compact #nav-client-bar .nav-left .games.dropdown .dropdown-menu, .nav-client.compact #nav-client-bar .nav-left .games.dropdown .nav-client .dropdown-menu, .nav-client.compact #nav-client-bar .nav-left .games.nav-client .dropdown .dropdown-menu {
	top: 12px
}
.nav-client.compact #nav-client-bar .nav-left .nav-link {
	font-size: 17px;
	padding-top: 13px;
	padding-bottom: 13px
}
.nav-client.compact #nav-client-bar .nav-right>li .nav-link {
	padding-top: 13px;
	padding-bottom: 13px;
	font-size: 15px
}
.nav-client.compact #nav-client-bar .nav-right .pull-right>.dropdown-menu, .nav-client.compact #nav-client-bar .nav-right .pull-right>.nav-client .dropdown-menu {
	top: 26px;
	left: auto
}
.nav-client.compact #nav-client-bar .nav-right .pull-right>.dropdown-menu .user-profile .nav-box, .nav-client.compact #nav-client-bar .nav-right .pull-right>.nav-client .dropdown-menu .user-profile .nav-box {
	line-height: 20px
}
.nav-client.compact #nav-client-bar .nav-home {
	width: 44px;
	height: 44px;
	background-size: 50px auto;
	padding: 0
}
.nav-client.compact #nav-client-bar .nav-home:hover {
	background-position: -5px -55px
}
.nav-client.compact #nav-client-bar .nav-link .caret, .nav-client.compact #nav-client-bar .nav-link .nav-client .caret {
	top: 13px
}
.nav-client .nav-left .nav-link, .nav-client .nav-right .nav-link {
	padding-top: 20px;
	padding-bottom: 22px
}
.nav-client .nav-left {
	float: left
}
.nav-client .nav-left .dropdown>.nav-item, .nav-client .nav-left .nav-client .dropdown>.nav-item {
	font-size: 20px;
	text-transform: none
}
.nav-client .nav-left.nav-list li {
	float: left
}
.nav-client .nav-right, .nav-client .nav-right>li {
	float: right
}
.nav-client .nav-right>li .nav-link {
	font-size: 17px;
	text-transform: inherit
}
@media (max-width:850px) {
.nav-client .nav-right>li .nav-link {
	font-size: 16px
}
}
.nav-client .nav-home {
	display: inline-block;
	background: url(../image/logo-bnet.png) no-repeat -5px -5px;
	width: 60px;
	height: 60px;
	padding-right: 10px
}
.nav-client .nav-home:hover {
	background-position: -5px -75px
}
.nav-client.compact .nav-home {
	background-image: url(../image/logo-bnet-compact.png)
}
.nav-client .nav-bar-item {
	font-size: 17px;
	color: rgba(255,255,255,.7)
}
a.nav-client .nav-bar-item.active {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 10px #fff, 0 -6px 10px rgba(255,255,255,.3), 0 6px 10px rgba(255,255,255,.3)
}
.nav-client [class*=" nav-icon-"], .nav-client [class^=nav-icon-] {
	background-image: url(../image/sprite-16-blue.png);
	margin: 2px;
	display: inline-block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	line-height: 16px;
	vertical-align: top;
	background-repeat: no-repeat;
	text-indent: -9999px;
	-webkit-transition: opacity, .2s;
	-webkit-transition: opacity .2s;
	transition: opacity .2s
}
.nav-client [class*=" nav-icon-24-"], .nav-client [class^=nav-icon-24-] {
	background-image: url(../image/sprite-24-blue.png);
	width: 24px;
	height: 24px;
	margin: -2px 8px -2px 2px
}
.nav-client .nav-icon-mouse {
	background-position: -168px 0
}
.nav-client .nav-icon-character-cog {
	background-position: -96px -120px
}
.nav-client .nav-icon-shopping-cart {
	background-position: -168px -24px
}
.nav-client .nav-icon-broadcast {
	background-position: -96px -48px
}
.nav-client .nav-icon-question-circle {
	background-position: -96px 0
}
.nav-client .nav-icon-edit {
	background-position: -144px -24px
}
.nav-client .nav-icon-globe {
	background-position: -120px -432px
}
.nav-client .nav-icon-logout {
	background-position: -168px -576px
}
.nav-client .nav-icon-remove {
	background-position: -168px -144px
}
.nav-client-mouse {
	background-position: -168px 0
}
.nav-client-character-cog {
	background-position: -96px -120px
}
.nav-client-shopping-cart {
	background-position: -168px -24px
}
.nav-client-broadcast {
	background-position: -96px -48px
}
.nav-client-question-circle {
	background-position: -96px 0
}
.nav-client-edit {
	background-position: -144px -24px
}
.nav-client-globe {
	background-position: -120px -432px
}
.nav-client-logout {
	background-position: -168px -576px
}
.nav-client-remove {
	background-position: -168px -144px
}
.nav-client #nav-client-bar .games-menu .game-icon i {
	width: 70px;
	height: 70px;
	background-image: url(../image/game-icons-70.png)
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-wow {
	background-position: 0 0
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-d3 {
	background-position: -70px 0
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-sc2 {
	background-position: -140px 0
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-hearthstone {
	background-position: -210px 0
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-heroes {
	background-position: -280px 0
}
.nav-client #nav-client-bar .games-menu .game-icon .nav-icon-overwatch {
	background-position: -350px 0
}
.nav-client .nav-icon-bell {
	display: inline-block;
	background: url(../image/icon-bell.png) no-repeat;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0
}
.nav-client .nav-notification-icon.nav-client .open .nav-icon-bell, .nav-client .nav-notification-icon.open .nav-icon-bell, .nav-client .nav-notification-icon>a:active .nav-icon-bell, .nav-client .nav-notification-icon>a:hover .nav-icon-bell {
	background-position: -30px 0
}
.nav-client .nav-item {
	color: rgba(255,255,255,.7);
	text-decoration: none;
	-webkit-transition: text-shadow 160ms ease, color 160ms ease;
	transition: text-shadow 160ms ease, color 160ms ease
}
.nav-client .nav-a.nav-item:hover, .nav-client a.nav-item:hover {
	color: #fff!important;
	text-decoration: none
}
.nav-client .nav-a.nav-item.active, .nav-client a.nav-item.active {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 10px #fff, 0 -6px 10px rgba(255,255,255,.3), 0 6px 10px rgba(255,255,255,.3)
}
.nav-client .nav-item-box {
	font-size: 15px!important;
	color: rgba(255,255,255,.7);
	margin: -1px;
	display: block;
	line-height: 30px
}
.nav-client .nav-item-box:hover {
	background: rgba(255,255,255,.05)
}
.nav-client .nav-a {
	font-weight: 400;
	font-size: 13px
}
.nav-client .nav-link {
	display: inline-block;
	font-size: 20px;
	padding: 0 20px;
	text-decoration: none;
	text-transform: none;
	-webkit-transition: text-shadow 160ms ease, color 160ms ease;
	transition: text-shadow 160ms ease, color 160ms ease
}
@media (max-width:980px) {
.nav-client .nav-link {
	font-size: 19px
}
}
@media (max-width:850px) {
.nav-client .nav-link {
	font-size: 18px;
	padding: 0 16px
}
}
.nav-client .nav-a.nav-link:hover, .nav-client a.nav-link:hover {
	color: #fff;
	text-decoration: none
}
.nav-client .nav-a.nav-link.active, .nav-client a.nav-link.active {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 10px #fff, 0 -6px 10px rgba(255,255,255,.3), 0 6px 10px rgba(255,255,255,.3)
}
.nav-client .nav-a, .nav-client .nav-item, .nav-client .nav-link {
	cursor: pointer
}
.nav-client .nav-notification-icon {
	display: none
}
.nav-client .nav-notification-icon>a {
	padding: 15px
}
.nav-client .nav-notification {
	line-height: 20px
}
.nav-client .nav-notification>* {
	margin: 15px
}
.nav-client .nav-notification .nav-notification-header {
	margin-right: 40px
}
.nav-client .nav-notification .nav-notification-header .nav-notification-img {
	float: left;
	margin: 0 15px 15px 0
}
.nav-client .nav-notification .nav-notification-header .nav-notification-title {
	font-size: 15px;
	font-weight: 400;
	color: #fff;
	margin: 0;
	line-height: 20px
}
.nav-client .nav-notification .nav-notification-content {
	font-size: 13px;
	color: rgba(255,255,255,.7);
	clear: left;
	line-height: 20px
}
.nav-client .nav-notification .nav-notification-remove {
	padding: 11px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	cursor: pointer
}
.nav-client .nav-notification .nav-notification-btn {
	color: #fff
}
.nav-client .nav-notification-dropdown.dropdown-menu, .nav-client .nav-notification-dropdown.nav-client .dropdown-menu {
	white-space: normal;
	min-width: 290px;
	max-width: 290px;
	padding: 5px 0;
	margin: 0 20px 0 0;
	left: auto;
	z-index: auto
}
.nav-client .nav-notification-dropdown.dropdown-menu .nav-box, .nav-client .nav-notification-dropdown.nav-client .dropdown-menu .nav-box {
	padding: 0
}
@media (max-width:767px) {
.nav-client .nav-notification-dropdown.dropdown-menu, .nav-client .nav-notification-dropdown.nav-client .dropdown-menu {
	min-width: 300px;
	max-width: 380px
}
}
.nav-client.compact .nav-notification-icon>a {
	padding: 7px
}
.nav-client.compact #nav-client-bar .nav-notification-dropdown .arrow.top {
	left: 13px
}
.nav-notification-dropdown.dropdown-menu.nav-client .open, .nav-notification-dropdown.dropdown-menu.open, .nav-notification-dropdown.nav-client .dropdown-menu.open {
	display: block
}
.nav-notification-responsive-container {
	display: none
}
.nav-client .user-profile {
	min-width: 200px
}
.nav-client .user-profile .nav-login-btn {
	color: #fff
}
.nav-client .user-profile .dropdown-section .nav-box, .nav-client .user-profile .nav-client .notification .nav-box {
	padding-top: 9px;
	padding-bottom: 9px;
	padding-right: 15px;
	padding-left: 15px
}
.nav-client .user-profile .dropdown-section .nav-item-box, .nav-client .user-profile .nav-client .notification .nav-item-box {
	padding-left: 6px;
	padding-right: 15px
}
.nav-client .user-profile .dropdown-section .nav-icon-character-cog, .nav-client .user-profile .dropdown-section .nav-icon-logout, .nav-client .user-profile .nav-client .notification .nav-icon-character-cog, .nav-client .user-profile .nav-client .notification .nav-icon-logout {
	margin: 2px 8px 0 2px
}
.nav-client .user-profile .label {
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	border: none;
	height: auto;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 18px
}
.nav-client .user-profile .label .battletag {
	font-size: 17px;
	color: #82c5ff
}
.nav-client .user-profile .label .code {
	color: rgba(255,255,255,.7);
	font-size: 15px;
	display: inline-block;
	margin-left: 2px
}
.nav-client .user-profile .email {
	color: rgba(255,255,255,.3);
	font-size: 15px;
	font-weight: 400
}
.nav-client .username {
	font-size: 17px;
	color: rgba(255,255,255,.7)
}
.nav-client .username .employee {
	display: inline-block;
	width: 27px;
	height: 15px;
	vertical-align: middle;
	background: url(../image/employee.gif) no-repeat center;
	position: relative
}
.nav-client .username--loggedout {
	text-transform: capitalize!important
}
.nav-client #nav-client-dropdown-profile .user-profile {
	font-size: 14px;
	line-height: 20px
}
.nav-client #nav-client-dropdown-profile .arrow {
	right: 5px
}
.nav-client .nav-badge {
	border-radius: 2px
}
.nav-client .nav-counter {
	border-radius: 2px;
	color: #fff;
	position: relative;
	bottom: 2px;
	margin-left: 4px;
	font-family: Blizzard, arial, sans-serif;
	background-color: #d56900;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	min-width: 0;
	padding: 0 4px
}
.nav-client .no-updates {
	opacity: 0;
	display: none
}
.nav-client .nav-icon-title {
	position: relative;
	padding-left: 40px
}
.nav-client .nav-dismiss-wrap {
	position: relative;
	padding: 10px
}
.nav-client .nav-dismiss-wrap .nav-close {
	position: absolute;
	right: 5px;
	top: 5px
}
.nav-client .show-dev {
	display: block!important
}
.capitalize {
	text-transform: capitalize!important
}
.nav-client .nav-mobile-menubar {
	width: 100%;
	display: none;
	position: fixed;
	top: 0;
	z-index: 1
}
.nav-client #nav-blackout {
	z-index: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed
}
.nav-client .nav-global-menu-icon, .nav-client .nav-hamburger-menu-icon {
	cursor: pointer
}
.nav-client .menu-relative-wrap {
	position: relative
}
.nav-client .nav-mobile-menu-wrap {
	position: fixed;
	top: 0;
	opacity: .97;
	height: 100%;
	width: 275px;
	background-color: #263445;
	border-left: solid 1px rgba(255,255,255,.07);
	z-index: 200;
	overflow-y: auto;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-ms-transform: translateZ(0)
}
.nav-client .nav-mobile-menu-wrap.right {
	right: 0;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-ms-transform: translateX(100%);
	border-left: solid 1px rgba(255,255,255,.07)
}
.nav-client .nav-mobile-menu-wrap.right .nav-remove-icon-wrap {
	right: 10px;
	top: 10px
}
.nav-client .nav-mobile-menu-wrap.left {
	left: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	border-right: solid 1px rgba(255,255,255,.07)
}
.nav-client .nav-mobile-menu-wrap.left .nav-remove-icon-wrap {
	left: 10px;
	top: 10px
}
.nav-client .nav-mobile-menu-wrap .menu-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	left: -5px
}
.nav-client .nav-mobile-menu-wrap .menu-list .menu-list-item {
	padding-left: 0;
	margin: 0
}
.nav-client .nav-mobile-menu-wrap .menu-list .menu-list-item .nav-item {
	display: block;
	width: 100%;
	font-size: 17px;
	font-weight: 300;
	line-height: 40px
}
.nav-client .global-menu {
	background: url(../image/bnet-logo-mobile.jpg) no-repeat;
	background-size: cover
}
.nav-client .global-menu.cn {
	background: url(../image/cn-bnet-logo-mobile.jpg) no-repeat;
	background-size: cover
}
.nav-client .menu-header {
	background-color: #232935;
	height: 70px;
	border-bottom: solid 1px rgba(255,255,255,.07)
}
.nav-client .menu-header .nav-remove-icon-wrap {
	display: inline-block;
	position: absolute;
	width: 24px;
	height: 24px
}
.nav-client .menu-header .nav-remove-icon {
	opacity: .3;
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%
}
.nav-client .menu-content .nav-box {
	color: rgba(255,255,255,.7);
	padding: 20px;
	border-bottom: solid 1px rgba(255,255,255,.07)
}
.nav-client .menu-content .nav-box.hidden {
	display: none
}
.nav-client .menu-content .nav-box:last-child {
	border-bottom: none
}
.nav-client .menu-content .label {
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	border: none;
	height: auto;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	background-color: transparent
}
.nav-client .menu-content .label .battletag {
	font-size: 17px;
	color: #82c5ff
}
.nav-client .menu-content .label .code {
	color: rgba(255,255,255,.7);
	font-size: 15px;
	display: inline-block;
	margin-left: 2px
}
.nav-client .menu-content .email {
	color: rgba(255,255,255,.3);
	font-size: 15px;
	font-weight: 400
}
.nav-client .menu-content #user-account .nav-login-btn {
	color: #fff
}
.nav-client .menu-content #general-menu {
	padding: 6px 20px
}
.nav-client .menu-content #games-menu {
	padding: 12px 20px
}
.nav-client .menu-content span#games-menu-title {
	font-size: 13px;
	font-weight: 300;
	color: rgba(255,255,255,.3);
	text-transform: none
}
.nav-client .menu-content i {
	vertical-align: text-bottom
}
.nav-client .nav-mobile-menu-wrap .game-icon i {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	background-image: url(../image/game-icons-30.png)
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-wow {
	background-position: 0 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-d3 {
	background-position: -30px 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-sc2 {
	background-position: -60px 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-hearthstone {
	background-position: -90px 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-heroes {
	background-position: -120px 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i.nav-icon-overwatch {
	background-position: -150px 0
}
.nav-client .nav-mobile-menu-wrap .game-icon i #support-counter {
	padding-right: 5px
}
.nav-client .nav-hamburger-menu-icon {
	float: left;
	background-image: url(../image/icon-blue-menu.png);
	background-size: 44px;
	height: 44px;
	width: 44px;
	position: absolute;
	top: 0;
	left: 0
}
.nav-client .nav-global-menu-icon {
	float: right;
	background-image: url(../image/icon-blue-bnet.png);
	background-size: 44px;
	height: 44px;
	width: 44px;
	position: absolute;
	top: 0;
	right: 0
}
.nav-client .nav-remove-icon {
	background-image: url(../image/close-48-blue.png);
	background-size: contain
}
.nav-client #logout-nav-box {
	padding-top: 6px;
	border-bottom: none
}
.nav-client #logout-nav-box a {
	width: 100%;
	font-size: 17px;
	font-weight: 300;
	line-height: 40px
}
.nav-client #logout-nav-box i {
	vertical-align: text-bottom
}
.nav-client .nav-mobile-menu-title {
	color: #fff;
	font-size: 20px;
	text-transform: none;
	padding-top: 12px
}
@media (max-width:767px) {
#nav-client-header.mobileEnabled #nav-client-bar {
	height: 44px;
	position: fixed;
	top: 0
}
#nav-client-header.mobileEnabled .nav-header-content, .nav-client .mobileFooterEnabled {
	display: none
}
.nav-client .nav-mobile-menubar {
	display: block;
	width: 100%;
	height: 44px;
	text-align: center
}
.nav-client .nav-mobile-menu-wrap.out {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-ms-transform: translateX(0)
}
.nav-client .out~#nav-blackout {
	display: block!important
}
.nav-client .nav-mobile-menubar .nav-notification-icon {
	position: absolute;
	right: 40px;
	text-align: left;
	top: 0
}
.nav-client .nav-mobile-menubar .nav-notification-icon>a {
	padding: 7px
}
.nav-client .nav-mobile-menubar .nav-notification-icon>a:active .nav-icon-bell, .nav-client .nav-mobile-menubar .nav-notification-icon>a:hover .nav-icon-bell {
	background-position: 0
}
.nav-client .nav-mobile-menubar .nav-notification-icon.nav-client .open>a .nav-icon-bell, .nav-client .nav-mobile-menubar .nav-notification-icon.open>a .nav-icon-bell {
	background-position: -30px 0
}
.nav-client .nav-mobile-menubar .nav-notification-icon .nav-icon-bell {
	top: auto
}
.nav-client .nav-mobile-menubar .nav-notification-icon .arrow.top {
	top: 6px;
	right: 20px
}
.nav-mobile-menubar .nav-notification-dropdown.dropdown-menu, .nav-mobile-menubar .nav-notification-dropdown.nav-client .dropdown-menu {
	right: -44px;
	left: -280px;
	margin: 0
}
.nav-mobile-menubar .nav-notification-dropdown.dropdown-menu .arrow.top, .nav-mobile-menubar .nav-notification-dropdown.nav-client .dropdown-menu .arrow.top {
	right: 57px;
	left: auto;
	top: -9px
}
.nav-notification-responsive-container .nav-notification-dropdown.dropdown-menu, .nav-notification-responsive-container .nav-notification-dropdown.nav-client .dropdown-menu {
	margin: 0
}
.nav-notification-responsive-container .nav-notification-dropdown.dropdown-menu .arrow.top, .nav-notification-responsive-container .nav-notification-dropdown.nav-client .dropdown-menu .arrow.top {
	left: auto
}
}
@media (max-width:767px) and (max-width:380px) {
.nav-mobile-menubar .nav-notification-dropdown.dropdown-menu, .nav-mobile-menubar .nav-notification-dropdown.nav-client .dropdown-menu {
	display: none
}
}
@media (max-width:767px) and (max-width:380px) {
.nav-notification-responsive-container {
	display: block
}
.nav-notification-responsive-container .nav-notification-dropdown.dropdown-menu, .nav-notification-responsive-container .nav-notification-dropdown.nav-client .dropdown-menu {
	width: 100%;
	min-width: 0
}
}
.footer-buy-bar {
	border-top: 5px solid hsla(0,0%,45%,.7);
	background: url(../image/buy-bar-bg.jpg) center top no-repeat
}
.footer-buy-bar .button {
	display: inline-block;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	border-radius: 2px;
	padding: 6px 45px;
	text-transform: none;
	outline: 0;
	border: 3px solid #ff9c00;
	background-color: #ff9c00;
	color: #333;
	line-height: 1;
	letter-spacing: .025em;
	font-weight: 700;
	font-size: 1.6rem;
	-webkit-transition: all .2s;
	transition: all .2s
}
.footer-buy-bar .button:hover {
	border-color: #ffb033;
	background-color: #ffb033;
	-webkit-transition: none;
	transition: none
}
.footer-buy-bar .m-lg {
	font-size: 2.6rem;
	padding: 10px 5%;
	color: #000
}
.buy-tips {
	color: #fff;
	font-size: 14px;
	line-height: 30px;
	padding: 10px 0;
	vertical-align: top
}
.buy .buy-tips {
	padding: 0
}
.buy-tips .set-icon {
	width: 22px;
	height: 21px;
	position: relative;
	top: 5px;
	display: inline-block;
	margin-right: 5px;
	background: url(../image/buytips-icon.png) no-repeat
}
.buy-tips strong {
	font-weight: 700;
	color: #ffc70e
}
.buy-tips a {
	color: #ffc70e
}
#footer {
	position: relative;
	font-size: 12px;
	width: auto;
	margin: 0;
	background: #202020
}
#footer .footerWrap {
	padding: 40px 0 0;
	border-top: 1px solid rgba(255,255,255,.15)
}
#footer .logo_bz {
	display: inline-block;
	overflow: hidden;
	width: 140px;
	height: 80px;
	vertical-align: middle;
	background: url(../image/blizzard.png) no-repeat 0 0
}
#footer .logo_ne {
	display: inline-block;
	overflow: hidden;
	width: 105px;
	height: 33px;
	margin: 34px 0 0 20px;
	vertical-align: middle;
	background: url(../image/logo_ne.png) no-repeat 0 0
}
#footer .cprt {
	max-width: 1000px;
	margin: 50px auto 8px;
	padding: 0 0 30px;
	border-bottom: 1px solid rgba(255,255,255,.15)
}
#footer p+p {
	margin-top: 0
}
#footer .cprt .info ul li {
	color: #ccc;
	display: inline-block;
	font-size: 14px;
	padding-right: 10px
}
#footer .cprt .info ul li a {
	color: #fff;
	padding-right: 10px
}
#footer .footerWrap a {
	text-decoration: none;
	color: rgba(255,255,255,.5)
}
#footer .footerWrap a:hover {
	color: rgba(255,255,255,1)
}
#footer .tips {
	text-align: center;
	color: rgba(255,255,255,.3)
}
#footer .cprt .info {
	position: relative;
	display: inline-block;
	padding: 20px 0 0 10%;
	text-align: left;
	vertical-align: middle;
	color: rgba(255,255,255,.5)
}
@media (max-width:768px) {
#footer .cprt {
	text-align: center
}
#footer .cprt .info {
	padding: 30px 10px
}
}
#footer .integrity {
	padding-top: 15px
}
#footer .integrity a {
	margin-right: 5px
}
#footer .support-feedback {
	max-width: 1000px;
	margin: 0 auto 10px;
	color: #ccc;
	font-size: 14px
}
#footer .cs {
	float: left
}
#footer .cs a {
	color: #ccc
}
.cs .cs-online, .cs-Feedback {
	margin-right: 37px
}
.support-feedback .icon {
	background-image: url(../image/sprite-24-blue.png);
	background-repeat: no-repeat;
	background-size: auto
}
.support-feedback .icon-1, .support-feedback .icon-2, .support-feedback .icon-3 {
	display: inline-block;
	height: 24px;
	margin-right: 7px;
	position: relative;
	top: 5px;
	width: 24px
}
.support-feedback .icon-1 {
	background-position: -96px 0
}
.support-feedback .icon-2 {
	background-position: -144px -24px;
	top: 6px
}
.support-feedback .icon-3 {
	background-position: -24px -119px;
	top: 6px
}
.support-feedback .business {
	float: right;
	vertical-align: top;
	position: relative
}
.business .icon-apply, .business .icon-more {
	background: #262626 none repeat scroll 0 0;
	border: 1px solid #262626;
	color: #ac771f;
	cursor: pointer;
	display: inline-block;
	height: 14px;
	margin: 0 13px;
	padding-top: 0;
	position: relative;
	top: 3px;
	width: 14px
}
.business .icon-more {
	margin-right: 0
}
.business .icon-media {
	margin-left: 13px
}
.business strong {
	display: inline
}
.business .icon-apply i.line-h {
	height: 2px;
	margin: -1px 0 0 -5px;
	width: 10px
}
.business .icon-apply i.line-s {
	height: 10px;
	margin: -5px 0 0 -1px;
	width: 2px
}
.business .icon-apply i.line-h, .business .icon-apply i.line-s {
	background: #ccc none repeat scroll 0 0;
	display: block;
	left: 50%;
	position: absolute;
	top: 50%
}
.business .icon-apply:hover i.line-h, .business .icon-apply:hover i.line-s {
	background: #fff
}
.business .icon-more i {
	border: 4px solid transparent;
	border-top-color: #ccc;
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2px 0 0 -4px
}
.business .icon-more:hover i {
	border-top-color: #fff
}
.business .icon-more.hidden i {
	border-bottom-color: #ccc;
	border-top-color: transparent;
	margin: -6px 0 0 -4px
}
.business .icon-more.hidden:hover i {
	border-bottom-color: #fff
}
.business .businessList {
	display: inline
}
.business .businessList li {
	display: inline-block
}
.business .businessList li img {
	vertical-align: bottom
}
#footer .joiner {
	width: 671px;
	background: #0f0f0f;
	border: 1px solid #151616;
	position: absolute;
	right: 0;
	top: 22px;
	display: none;
	z-index: 1
}
#footer .joiner ul {
	padding: 10px 0 10px 20px
}
#footer .joiner li {
	float: left;
	line-height: 22px;
	text-align: left;
	padding-right: 10px;
	width: 83px
}
#footer .joiner li a {
	color: gray
}
#footer .joiner li a:hover {
	color: #fff
}
#footer .joiner li.apply {
	display: block;
	float: right
}
#footer .joiner li.apply a {
	color: #ea8631;
	text-decoration: underline
}
#footer .joiner li.apply a:hover {
	color: #fff
}
[hero-scene] {
padding-bottom:46.25%;
position:relative;
display:block;
overflow:hidden
}
@media only screen and (min-width:768px) and (max-width:991px) {
[hero-scene] {
padding-bottom:55.25%
}
}
@media only screen and (max-width:767px) {
[hero-scene] {
padding-bottom:90%
}
}
[hero-scene] .scene {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2
}
[hero-scene] .fg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3
}
[hero-scene] .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}
[hero-scene] .candy {
	background-image: url(../image/candy.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	position: inherit;
	width: inherit;
	height: inherit;
	z-index: 1
}
[hero-scene] .logo {
	background-image: url(../image/da03e55ee5f2c81c.png);
	background-position: center top 51%;
	background-repeat: no-repeat;
	background-size: 35% auto;
	position: inherit;
	width: inherit;
	height: inherit;
	z-index: 1
}
@media only screen and (max-width:767px) {
[hero-scene] .logo {
	background-position: center 26%;
	background-size: 60% auto;
	z-index: 999
}
}
[hero-scene] .layer {
	position: absolute!important;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
	text-align: center
}
[hero-scene] .layer:after, [hero-scene] .layer:before {
	content: '';
	position: inherit;
	width: inherit;
	height: 120%;
	z-index: inherit;
	background-repeat: no-repeat;
	bottom: -5%
}
[hero-scene] .layer:before {
	left: 0;
	background-position: bottom left
}
[hero-scene] .layer:after {
	right: 0;
	background-position: bottom right
}
[hero-scene] .one {
	z-index: 1
}
[hero-scene] .one:before {
	background-image: url(../image/hero-left-6.png);
	background-size: 15% auto;
	background-position: top 19vw left 23vw
}
[hero-scene] .one:after {
	background-image: url(../image/hero-right-6.png);
	background-size: 23% auto;
	background-position: top 17vw right 18vw
}
@media only screen and (min-width:768px) and (max-width:991px) {
[hero-scene] .one:before {
	background-position: top 25vw left 23vw
}
[hero-scene] .one:after {
	background-position: top 22vw right 18vw
}
}
@media only screen and (max-width:767px) {
[hero-scene] .one:before {
	background-size: 18% auto;
	background-position: top 66vw left 23vw
}
[hero-scene] .one:after {
	background-size: 26% auto;
	background-position: top 63vw right 18vw
}
}
[hero-scene] .two {
	z-index: 2
}
[hero-scene] .two:before {
	background-image: url(../image/da03e55ee5f2c81c.png);
	background-size: 29% auto;
	background-position: bottom -5.5vw left 13vw
}
[hero-scene] .two:after {
	background-image: url(../image/hero-right-345.png);
	background-size: 29% auto;
	background-position: bottom -3vw right 17vw
}
@media only screen and (max-width:767px) {
[hero-scene] .two:before {
	background-size: 34% auto
}
[hero-scene] .two:after {
	background-size: 35% auto
}
}
[hero-scene] .three {
	z-index: 3
}
[hero-scene] .three:before {
	background-image: url(../image/hero-left-2.png);
	background-size: 19% auto;
	background-position: bottom left 8vw
}
[hero-scene] .three:after {
	background-image: url(../image/hero-right-2.png);
	background-size: 30% auto;
	background-position: bottom -5vw right 4vw
}
@media only screen and (max-width:767px) {
[hero-scene] .three:before {
	background-size: 23% auto
}
[hero-scene] .three:after {
	background-size: 36% auto
}
}
[hero-scene] .four {
	z-index: 4
}
[hero-scene] .four:before {
	background-image: url(../image/hero-left-1.png);
	background-size: 28% auto;
	left: -1%;
	background-position: bottom left -6.5vw
}
[hero-scene] .four:after {
	background-image: url(../image/hero-right-1.png);
	background-size: 26% auto;
	right: -1%;
	background-position: bottom -5vw right -5vw
}
@media only screen and (max-width:767px) {
[hero-scene] .four:before {
	background-size: 34% auto;
	background-position: bottom left -9.5vw
}
[hero-scene] .four:after {
	background-size: 32% auto;
	background-position: bottom -5vw right -10vw
}
}
[hero-scene] .particles {
	width: inherit;
	height: inherit;
	position: inherit;
	z-index: 3;
	opacity: .25
}
[hero-scene] .deco {
	width: inherit;
	height: inherit;
	position: inherit;
	bottom: 0;
	z-index: 2;
	background-image: url(../image/deco.png);
	background-position: bottom center;
	background-repeat: no-repeat
}
[hero-scene] .video {
	z-index: 2;
	position: inherit;
	height: 100%;
	width: auto;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%)
}
@media only screen and (max-width:991px) {
[hero-scene] .video {
	display: none
}
}
.social-icon-vk {
	width: 57px;
	height: 54px;
	display: inline-block;
	background-image: url(../image/new-social-icons.png);
	background-size: cover
}
.social-icon-vk:hover {
	background-image: url(../image/new-social-icons-hover.png)
}
.social-icon-facebook {
	width: 57px;
	height: 54px;
	display: inline-block;
	background-image: url(../image/new-social-icons.png);
	background-size: cover;
	background-position: -73px
}
.social-icon-facebook:hover {
	background-image: url(../image/new-social-icons-hover.png)
}
.social-icon-twitter {
	width: 57px;
	height: 54px;
	display: inline-block;
	background-image: url(../image/new-social-icons.png);
	background-size: cover;
	background-position: -146px 0
}
.social-icon-twitter:hover {
	background-image: url(../image/new-social-icons-hover.png)
}
.social-icon-youtube {
	width: 57px;
	height: 54px;
	display: inline-block;
	background-image: url(../image/new-social-icons.png);
	background-size: cover;
	background-position: -219px 0
}
.social-icon-youtube:hover {
	background-image: url(../image/new-social-icons-hover.png)
}
.social-icon-spacer {
	display: inline-block;
	background-image: url(../image/new-social-icons.png);
	width: 14px;
	height: 54px;
	background-size: cover;
	background-position: -56px 0;
	margin: 0 2px
}
.offense-icon {
	background-image: url(../image/role-offense.png);
	background-size: contain;
	padding: 24px;
	display: inline-block
}
.defense-icon {
	background-image: url(../image/role-defense.png);
	background-size: contain;
	padding: 24px;
	display: inline-block
}
.tank-icon {
	background-image: url(../image/role-tank.png);
	background-size: contain;
	padding: 24px;
	display: inline-block
}
.support-icon {
	background-image: url(../image/role-support.png);
	background-size: contain;
	padding: 24px;
	display: inline-block
}
.egg#egg-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 97;
	pointer-events: none
}
.navbars {
	position: fixed;
	top: -44px;
	left: 0;
	width: 100%;
	display: block;
	z-index: 97
}
@media only screen and (min-width:768px) {
.navbars {
	top: 0
}
}
.nav-client #nav-client-bar {
	display: block;
	height: 44px;
	background-color: rgba(2,25,72,.3);
	width: 100%
}
@media only screen and (max-width:767px) {
#nav-client-header.mobileEnabled #nav-client-bar, .nav-client .nav-mobile-menubar {
	display: none
}
}
.nav-client .nav-link {
	color: #e6e9ef;
	text-shadow: 1px 1px rgba(0,0,0,.5)
}
#nav-client-header {
	z-index: 97
}
.nav-client .nav-mobile-menu-wrap {
	box-shadow: none;
	-webkit-transition: all 300ms cubic-bezier(0.075, .82, .165, 1)!important;
	transition: all 300ms cubic-bezier(0.075, .82, .165, 1)!important
}
.nav-client #nav-blackout {
	display: block!important;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms cubic-bezier(0.075, .82, .165, 1);
	transition: all 300ms cubic-bezier(0.075, .82, .165, 1);
	background-color: rgba(0,0,0,.8);
	cursor: pointer
}
.nav-client .out~#nav-blackout {
	display: block!important;
	visibility: visible;
	opacity: 1
}
.section-prepurchase {
	padding-top: 10%;
	height: 42rem;
	background-image: url(../image/dorado-mobile.jpg);
	background-size: cover;
	background-position: center 13rem;
	margin-bottom: 25rem
}
.section-prepurchase>.row {
	position: relative
}
@media only screen and (min-width:768px) {
.section-prepurchase {
	margin-bottom: 50rem;
	padding-top: 5%;
	background-image: url(../images/dorado-tablet.png);
	background-size: contain
}
}
@media only screen and (min-width:992px) {
.section-prepurchase {
	background-image: url(../images/prepurchase-section-bg.png);
	height: 50rem;
	margin-bottom: 0;
	background-size: cover;
	padding-top: 2%;
	background-position: center 0
}
}
@media only screen and (min-width:1600px) {
.section-prepurchase {
	height: 64rem;
	background-size: cover
}
}
.prepurchase-info-box {
	color: #345177;
	width: 100%
}
@media only screen and (min-width:1300px) {
.prepurchase-info-box {
	margin-left: -5%
}
}
@media only screen and (max-width:399px) {
.prepurchase-info-box>h2 {
	font-size: 4.2rem
}
}
@media only screen and (min-width:992px) and (max-width:1299px) {
.prepurchase-info-box>h2 {
	font-size: 5.4rem
}
}
@media only screen and (min-width:992px) {
.prepurchase-info-box>.button {
	font-size: 1.9rem
}
}
@media only screen and (min-width:1600px) {
.prepurchase-info-box>.button {
	font-size: 3rem
}
}
[promo=open-beta] {
background-image:url(../image/bg.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center center
}
[promo=open-beta].lightbox-content {
	padding-bottom: 49.57%
}
[promo=open-beta] .body, [promo=open-beta] .legal {
	position: absolute
}
[promo=open-beta] .body {
	width: 100%;
	height: 100%;
	padding-top: 10.5%;
	text-align: left;
	padding-left: 16%;
	padding-right: 16%
}
[promo=open-beta] .legal {
	bottom: 2.25%;
	left: 55%;
	color: #fff;
	font-family: "Big Noodle Too", impact, sans-serif;
	font-style: italic;
	letter-spacing: .05em;
	font-size: 18px
}
[promo=open-beta] .subtitle, [promo=open-beta] .title {
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	line-height: .75
}
[promo=open-beta] .title {
	color: #fff;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #fff;
	opacity: .8;
	text-shadow: 0 0 48px #000;
	font-size: 10vw
}
[promo=open-beta] .subtitle {
	color: #fdc401;
	font-size: 2.5vw;
	margin: 1vw 0 2vw
}
[promo=open-beta] .btn {
	font-size: 1.5vw;
	margin-left: 5vw
}
[promo=open-beta].zh-cn .body {
	padding-top: 10%
}
[promo=open-beta].zh-cn .title {
	font-size: 8vw;
	line-height: 1
}
.is-fullscreen video {
	display: block
}
.u-anchor-bottom {
	position: absolute;
	bottom: 0
}
.u-italics {
	font-style: italic
}
.u-border-separator, body.game .abilities-section:not(li), body.game .friends-section:not(li), body.game .game-modes-section:not(li), body.game .heroes-section:not(li), body.game .maps-section:not(li), body.game .match-section:not(li), body.game .overview-section:not(li), body.game .progress-section:not(li), body.game .role-section:not(li) {
	border-bottom: 5px solid hsla(0,0%,100%,.5)
}
.u-pseudo-background:before, body.game .heroes-section:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1
}
@-webkit-keyframes transition-out {
0% {
-webkit-transform:translateX(0) translateY(-50%);
transform:translateX(0) translateY(-50%);
opacity:1
}
100%, 30% {
-webkit-transform:translateX(-50px) translateY(-50%);
transform:translateX(-50px) translateY(-50%);
opacity:0
}
}
@keyframes transition-out {
0% {
-webkit-transform:translateX(0) translateY(-50%);
transform:translateX(0) translateY(-50%);
opacity:1
}
100%, 30% {
-webkit-transform:translateX(-50px) translateY(-50%);
transform:translateX(-50px) translateY(-50%);
opacity:0
}
}
@-webkit-keyframes transition-in {
0%, 2% {
-webkit-transform:translateX(20px) translateY(-50%);
transform:translateX(20px) translateY(-50%);
opacity:0
}
100%, 30% {
-webkit-transform:translateX(0px) translateY(-50%);
transform:translateX(0px) translateY(-50%);
opacity:1
}
}
@keyframes transition-in {
0%, 2% {
-webkit-transform:translateX(20px) translateY(-50%);
transform:translateX(20px) translateY(-50%);
opacity:0
}
100%, 30% {
-webkit-transform:translateX(0px) translateY(-50%);
transform:translateX(0px) translateY(-50%);
opacity:1
}
}
#popBox {
	position: absolute;
	z-index: 99999;
	display: none;
	width: 80%;
	height: 100%
}
@media only screen and (max-width:768px) {
#popBox {
	width: 100%
}
}
#boxModel {
	position: absolute;
	z-index: 99998;
	top: 0;
	left: 0;
	display: none;
	background-color: rgba(0,0,0,.7)
}
#popBox .closeBtn {
	position: absolute;
	z-index: 99999;
	top: 5px;
	right: 5px;
	display: block;
	overflow: hidden;
	width: 36px;
	height: 36px;
	transition: opacity .5s ease 0s;
	text-indent: -999px;
	opacity: .8;
	background: url(../image/exit.3ooef.png) 0 0 no-repeat;
	background-size: contain
}
#popBox .closeBtn:hover {
	opacity: 1;
	background-position: 0 0
}
.w-light-box {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	border: 1px solid rgba(0,195,255,.1);
	background: rgba(3,12,21,.98)
}
.w-light-box .head {
	height: 15%;
	padding: .5em 0 0;
	border-bottom: 1px solid rgba(0,195,255,.1);
	font-size: 12px
}
.w-light-box .title {
	font-size: 2.8em;
	padding-bottom: .2em
}
.w-light-box .num {
	color: #00c3ff;
	font-size: 1.8em
}
.w-light-box .info {
	font-size: 1.6em;
	height: 15%;
	padding: .5em;
	text-align: left;
	border-top: 1px solid rgba(0,195,255,.1)
}
.w-light-box .content {
	height: 70%;
	padding: 1em 0;
	position: relative
}
.w-light-box .content .pic {
	display: none;
	max-width: 100%
}
.w-light-box .content .loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -24px;
	margin-left: -24px
}
.w-light-box .control a {
	position: absolute;
	top: 50%;
	display: block;
	width: 64px;
	height: 69px;
	margin-top: -34px;
	margin-right: 1rem;
	margin-left: 1rem
}
.w-light-box .control a.prev {
	left: 0;
	background: url(../image/arrow-left.2hq0h.png);
	background-size: cover
}
.w-light-box .control a.next {
	right: 0;
	background: url(../image/arrow-right.1hvyk.png);
	background-size: cover
}
.w-light-box video {
	width: 100%;
	height: 100%
}