.flex-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.Image { 
background-color:#333;
color:#fff;
position:relative;
width:100%;
overflow:hidden}
.Image-image { 
background-position:50%;
background-size:100%;
height:auto;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)}
.Image-center,.Image-image { 
width:100%;
position:absolute;
top:50%;
left:50%}
.Image-center { 
-webkit-transform:translateY(-50%) translateX(-50%);
transform:translateY(-50%) translateX(-50%);
text-align:center}
.Image-placeholder { 
display:inline-block;
width:56px;
background-size:100%;
background-image:url(/static/components/Icon/Icon-photo.2a688f9616075622d873dc7cee1ac30c.png);
background-position:50%;
background-repeat:no-repeat;
position:relative;
-webkit-filter:invert(100%);
filter:invert(100%);
opacity:.8;
width:120px;
margin:-20px}
.Image-placeholder:before { 
content:"";
display:block;
padding-top:100%}
.Image-caption { 
color:#b1997f;
font-weight:400;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-size:1.08rem;
line-height:1.5;
cursor:default;
font-style:italic;
padding:0 10px}
@media (min-width:720px) { 
.Image-caption { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Image-caption { 
font-size:1.44rem}
}
.Image--transparent { 
background-color:transparent}
.Image--transparent .Image-center { 
-webkit-filter:brightness(.5);
filter:brightness(.5)}
.Image--transparent .Image-caption,.Image--transparent .Image-placeholder { 
opacity:.9}
.Image--pullLeft { 
clear:both;
padding:2em .5em;
position:relative}
@media (min-width:980px) { 
.Image--pullLeft { 
float:left;
left:-11.111em;
margin-right:-8.33em}
}
.Image--pullRight { 
clear:both;
padding:2em .5em;
position:relative}
@media (min-width:980px) { 
.Image--pullRight { 
float:right;
left:11.111em;
margin-left:-8.333em}
}
.Image--clear { 
clear:both;
padding:2em .5em;
position:relative}
@media (min-width:320px) { 
.Image--clear { 
padding-left:3em;
padding-right:3em}
}
@media (min-width:720px) { 
.Image--clear { 
padding-left:4em;
padding-right:4em}
}
@media (min-width:1280px) { 
.Image--clear { 
padding-left:6em;
padding-right:6em}
}
.Image--shadow { 
-webkit-box-shadow:0 0 20px #000;
box-shadow:0 0 20px #000}
.Image--borderBrown { 
border:1px solid #504137}
.InfoTile { 
position:relative}
.InfoTile-content { 
position:absolute;
top:-20px;
right:-20px;
bottom:-20px;
left:-20px}
.InfoTile-bg { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:#000;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
opacity:0;
-webkit-transition:opacity .4s;
transition:opacity .4s}
html:not(.touch) .InfoTile:hover .InfoTile-bg { 
opacity:1}
.InfoTile-hitbox { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0}
.InfoTile-info { 
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
width:100%;
text-align:center;
padding:20px;
pointer-events:none}
.InfoTile-title { 
font-size:1.866rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:700}

.Image--shadow { 
-webkit-box-shadow:0 0 20px #000;
box-shadow:0 0 20px #000}
.Image--borderBrown { 
border:1px solid #504137}
.InfoTile { 
position:relative}
.InfoTile-content { 
position:absolute;
top:-20px;
right:-20px;
bottom:-20px;
left:-20px}
.InfoTile-bg { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:#000;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
opacity:0;
-webkit-transition:opacity .4s;
transition:opacity .4s}
html:not(.touch) .InfoTile:hover .InfoTile-bg { 
opacity:1}
.InfoTile-hitbox { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0}
.InfoTile-info { 
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
width:100%;
text-align:center;
padding:20px;
pointer-events:none}
.InfoTile-title { 
font-size:1.866rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:700}

@-webkit-keyframes PriceButton--legion { 
0% { 
opacity:0}
50% { 
opacity:.4}
to { 
opacity:0}
}
@keyframes PriceButton--legion { 
0% { 
opacity:0}
50% { 
opacity:.4}
to { 
opacity:0}
}
.Progressbar { 
background-color:#181818;
-webkit-box-shadow:inset 0 0 16px #000;
box-shadow:inset 0 0 16px #000;
color:#000;
position:relative;
min-height:28px}
.Progressbar-border { 
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid hsla(0,0%,100%,.2);
background:transparent;
z-index:1}
.Progressbar-progress { 
background-color:#01b2f1;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%}
.Progressbar-content { 
font-size:1rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:700;
position:relative;
text-align:center;
padding:5px;
min-height:1.5em}
@media (min-width:720px) { 
.Progressbar-content { 
font-size:1.02rem}
}
@media (min-width:1280px) { 
.Progressbar-content { 
font-size:1.2rem}
}
.Progressbar-content.zh-cn,.zh-cn .Progressbar-content { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Progressbar-content,.Progressbar-content.ko-kr { 
font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Progressbar-content.ru-ru,.ru-ru .Progressbar-content { 
font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.Progressbar-content.zh-tw,.zh-tw .Progressbar-content { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Progressbar-fraction { 
display:none}
.Progressbar-percent { 
display:none;
margin-left:10px}
.Progressbar-body { 
color:#cacaca;
font-weight:400;
text-shadow:0 0 1px transparent,0 1px 2px hsla(0,0%,100%,.8);
font-size:1.08rem;
line-height:1.5}
@media (min-width:720px) { 
.Progressbar-body { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Progressbar-body { 
font-size:1.44rem}
}
.Progressbar--ACHIEVEMENT>.Progressbar-progress { 
background:#a6d6ac;
background:-webkit-gradient(linear,left top,right top,from(#72be7b),to(#a6d6ac));
background:linear-gradient(90deg,#72be7b 0,#a6d6ac)}
.Progressbar--HEALTH>.Progressbar-progress { 
background:#91c24e;
background:-webkit-gradient(linear,left top,right top,from(#699132),to(#91c24e));
background:linear-gradient(90deg,#699132 0,#91c24e)}
.Progressbar--MANA>.Progressbar-progress { 
background:#0081ff;
background:-webkit-gradient(linear,left top,right top,from(#005ab3),to(#0081ff));
background:linear-gradient(90deg,#005ab3 0,#0081ff)}
.Progressbar--FOCUS>.Progressbar-progress { 
background:#ece25d;
background:-webkit-gradient(linear,left top,right top,from(#e2d41b),to(#ece25d));
background:linear-gradient(90deg,#e2d41b 0,#ece25d)}
.Progressbar--RAGE>.Progressbar-progress { 
background:#9d1e1e;
background:-webkit-gradient(linear,left top,right top,from(#5d1212),to(#9d1e1e));
background:linear-gradient(90deg,#5d1212 0,#9d1e1e)}
.Progressbar--RUNIC>.Progressbar-progress { 
background:#00accb;
background:-webkit-gradient(linear,left top,right top,from(#006b7e),to(#00accb));
background:linear-gradient(90deg,#006b7e 0,#00accb)}
.Progressbar--EXALTED>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--FRIENDLY>.Progressbar-progress,.Progressbar--HONORED>.Progressbar-progress,.Progressbar--REVERED>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--NEUTRAL>.Progressbar-progress { 
background:#edba03;
background:-webkit-gradient(linear,left top,right top,from(#a17f02),to(#edba03));
background:linear-gradient(90deg,#a17f02 0,#edba03)}
.Progressbar--UNFRIENDLY>.Progressbar-progress { 
background:#cc3609;
background:-webkit-gradient(linear,left top,right top,from(#832306),to(#cc3609));
background:linear-gradient(90deg,#832306 0,#cc3609)}
.Progressbar--HATED>.Progressbar-progress,.Progressbar--HOSTILE>.Progressbar-progress { 
background:#d90e03;
background:-webkit-gradient(linear,left top,right top,from(#8e0902),to(#d90e03));
background:linear-gradient(90deg,#8e0902 0,#d90e03)}
.Progressbar--STRANGER>.Progressbar-progress { 
background:#cc3609;
background:-webkit-gradient(linear,left top,right top,from(#832306),to(#cc3609));
background:linear-gradient(90deg,#832306 0,#cc3609)}
.Progressbar--ACQUAINTANCE>.Progressbar-progress { 
background:#edba03;
background:-webkit-gradient(linear,left top,right top,from(#a17f02),to(#edba03));
background:linear-gradient(90deg,#a17f02 0,#edba03)}
.Progressbar--BUDDY>.Progressbar-progress,.Progressbar--FRIEND>.Progressbar-progress,.Progressbar--GOOD_FRIEND>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--BEST_FRIEND>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--BODYGUARD>.Progressbar-progress,.Progressbar--TRUSTED_BODYGUARD>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--PERSONAL_WINGMAN>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--BRONZE_ALLY .Progressbar-progress,.Reputation--CHRONO-FRIEND .Progressbar-progress,.Reputation--EPOCH-MENDER .Progressbar-progress,.Reputation--TEMPORAL_TRAINEE .Progressbar-progress,.Reputation--TIMEHOPPER .Progressbar-progress,.Reputation--WHELPLING .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--TIMELORD .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--AMBIVALENT .Progressbar-progress,.Reputation--APPREHENSIVE .Progressbar-progress,.Reputation--CORDIAL .Progressbar-progress,.Reputation--DUBIOUS .Progressbar-progress,.Reputation--TENTATIVE .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Reputation--APPRECIATIVE .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--RANK_1 .Progressbar-progress,.Reputation--RANK_2 .Progressbar-progress,.Reputation--RANK_3 .Progressbar-progress,.Reputation--RANK_4 .Progressbar-progress,.Reputation--RANK_5 .Progressbar-progress,.Reputation--RANK_6 .Progressbar-progress,.Reputation--RANK_7 .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Reputation--RANK_8 .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--reputation-default>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--red>.Progressbar-progress { 
background:#b30000;
background:-webkit-gradient(linear,left top,right top,from(#600),to(#b30000));
background:linear-gradient(90deg,#600 0,#b30000)}
.Progressbar--yellow>.Progressbar-progress { 
background:#fff468;
background:-webkit-gradient(linear,left top,right top,from(#ffee1b),to(#fff468));
background:linear-gradient(90deg,#ffee1b 0,#fff468)}
.Progressbar--green>.Progressbar-progress { 
background:#91c24e;
background:-webkit-gradient(linear,left top,right top,from(#699132),to(#91c24e));
background:linear-gradient(90deg,#699132 0,#91c24e)}
.Progressbar--blue>.Progressbar-progress { 
background:#0081ff;
background:-webkit-gradient(linear,left top,right top,from(#005ab3),to(#0081ff));
background:linear-gradient(90deg,#005ab3 0,#0081ff)}
.Progressbar--orange>.Progressbar-progress { 
background:#f63;
background:-webkit-gradient(linear,left top,right top,from(#e53900),to(#f63));
background:linear-gradient(90deg,#e53900 0,#f63)}
.Progressbar--grey>.Progressbar-progress { 
background:#444;
background:-webkit-gradient(linear,left top,right top,from(#1e1e1e),to(#444));
background:linear-gradient(90deg,#1e1e1e 0,#444)}
.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=low],.Progressbar--low>.Progressbar-progress { 
background:#99755c;
background:-webkit-gradient(linear,left top,right top,from(#69503f),to(#99755c));
background:linear-gradient(90deg,#69503f 0,#99755c)}
.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=medium],.Progressbar--medium>.Progressbar-progress { 
background:#c76700;
background:-webkit-gradient(linear,left top,right top,from(#7b3f00),to(#c76700));
background:linear-gradient(90deg,#7b3f00 0,#c76700)}
.Progressbar--high>.Progressbar-progress,.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=high] { 
background:#1b9601;
background:-webkit-gradient(linear,left top,right top,from(#0d4a00),to(#1b9601));
background:linear-gradient(90deg,#0d4a00 0,#1b9601)}
.Progressbar--fraction .Progressbar-fraction,.Progressbar--percent .Progressbar-percent { 
display:inline-block}
.Progressbar--large .Progressbar-content { 
padding:10px}
.Progressbar--leftText .Progressbar-content { 
text-align:left;
margin-left:10px}
.Progressbar--border { 
border:1px solid rgba(177,153,127,.5)}

html:not(.touch) .RaceTile-link:hover .RaceTile-content { 
border-color:#f8b700}
html:not(.touch) .RaceTile-link:hover .RaceTile-back,html:not(.touch) .RaceTile-link:hover .RaceTile-front { 
-webkit-transform:translate3d(-50%,0,0) scale(1.1);
transform:translate3d(-50%,0,0) scale(1.1)}
html:not(.touch) .RaceTile-link:hover .RaceTile-name { 
color:#fff}
.RaidDifficultyDetails--noProgressbar .RaidDifficultyDetails-progressbar { 
display:none}
.RaidDifficultyDetails-bossKills { 
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
grid-column-gap:20px;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px}
.RaidDifficultyDetails--stackBossKills .RaidDifficultyDetails-bossKills { 
-webkit-column-count:1;
-moz-column-count:1;
column-count:1;
grid-column-gap:20px;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px}
.RaidProgress { 
background:url('images/RaidProgress-background.jpg');
background-position:top;
border:1px solid #3f4f56}
.RaidProgress-header { 
padding:0 8px}
.RaidProgress-header.gutter-vertical { 
padding:20px 0}
.RaidProgress-header.gutter-all { 
padding:20px}
.RaidProgress-header.gutter-negative { 
padding:0;
margin:0 -20px}
.RaidProgress-header.gutter-negative.gutter-vertical { 
margin:-20px 0}
.RaidProgress-header.gutter-negative.gutter-all { 
margin:-20px}
.RaidProgress-image { 
-webkit-transition:all .25s cubic-bezier(.23,1,.32,1) 0s;
transition:all .25s cubic-bezier(.23,1,.32,1) 0s}
html:not(.touch) .ControlledModalToggle:hover .RaidProgress-image { 
cursor:pointer;
-webkit-filter:brightness(1.1);
filter:brightness(1.1)}
.RaidProgress-name { 
-webkit-transition:all .25s cubic-bezier(.23,1,.32,1) 0s;
transition:all .25s cubic-bezier(.23,1,.32,1) 0s;
font-size:1.08rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
color:#f8b700;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:400}
@media (min-width:720px) { 
.RaidProgress-name { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.RaidProgress-name { 
font-size:1.44rem}
}
.RaidProgress-name.zh-cn,.zh-cn .RaidProgress-name { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .RaidProgress-name,.RaidProgress-name.ko-kr { 
font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.RaidProgress-name.ru-ru,.ru-ru .RaidProgress-name { 
font-family:Open Sans,Arial,Helvetica,sans-serif}
.RaidProgress-name.zh-tw,.zh-tw .RaidProgress-name { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
html:not(.touch) .RaidProgress-name.ControlledModalToggle:hover,html:not(.touch) .RaidProgress-title:hover .RaidProgress-name { 
cursor:pointer;
color:#fff}
.RaidProgress-level { 
text-align:left;
font-size:1rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
color:#b1997f;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:400;
padding:0}
@media (min-width:720px) { 
.RaidProgress-level { 
font-size:1rem}
}
@media (min-width:1280px) { 
.RaidProgress-level { 
font-size:1rem}
}
.RaidProgress-level.zh-cn,.zh-cn .RaidProgress-level { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .RaidProgress-level,.RaidProgress-level.ko-kr { 
font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.RaidProgress-level.ru-ru,.ru-ru .RaidProgress-level { 
font-family:Open Sans,Arial,Helvetica,sans-serif}
.RaidProgress-level.zh-tw,.zh-tw .RaidProgress-level { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.RaidProgress-body { 
padding:0 7px}
.RaidProgress-body.gutter-vertical { 
padding:20px 0}
.RaidProgress-body.gutter-all { 
padding:20px}
.RaidProgress-body.gutter-negative { 
padding:0;
margin:0 -20px}
.RaidProgress-body.gutter-negative.gutter-vertical { 
margin:-20px 0}
.RaidProgress-body.gutter-negative.gutter-all { 
margin:-20px}
.RaidProgress-difficulty { 
font-size:1rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
color:#f8b700;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:700;
text-transform:uppercase}
@media (min-width:720px) { 
.RaidProgress-difficulty { 
font-size:1rem}
}
@media (min-width:1280px) { 
.RaidProgress-difficulty { 
font-size:1rem}
}
.RaidProgress-difficulty.zh-cn,.zh-cn .RaidProgress-difficulty { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .RaidProgress-difficulty,.RaidProgress-difficulty.ko-kr { 
font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.RaidProgress-difficulty.ru-ru,.ru-ru .RaidProgress-difficulty { 
font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.RaidProgress-difficulty.zh-tw,.zh-tw .RaidProgress-difficulty { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.RaidProgress--bgFade .RaidProgress-head { 
background:-webkit-gradient(linear,left top,left bottom,color-stop(80%,rgba(0,0,0,.5)),to(hsla(0,0%,100%,0)));
background:linear-gradient(180deg,rgba(0,0,0,.5) 80%,hsla(0,0%,100%,0))}
.RaidProgress-difficulties { 
width:100%}
.RaidProgress-difficulty { 
-webkit-transition:all .25s cubic-bezier(.23,1,.32,1) 0s;
transition:all .25s cubic-bezier(.23,1,.32,1) 0s;
border-bottom:16px solid transparent}
html:not(.touch) .RaidProgress-difficulty:hover { 
color:#fff;
cursor:pointer}
.RaidProgress-difficulty-name { 
width:25%}
.RaidProgress-difficulty-progress { 
width:75%}
.RaidProgress-slide { 
width:66%}
.Ratiobar { 
background-color:#181818;
color:#fff;
position:relative;
display:table;
width:100%;
height:30px}
.Ratiobar-left,.Ratiobar-right { 
display:table-cell;
position:relative;
vertical-align:middle}
.Ratiobar-left { 
text-align:left;
padding-left:20px}
.Ratiobar-right { 
text-align:right;
padding-right:20px}
.Ratiobar-value { 
font-size:1.08rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:700;
display:inline-block}
@media (min-width:720px) { 
.Ratiobar-value { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Ratiobar-value { 
font-size:1.44rem}
}
.Ratiobar-value.zh-cn,.zh-cn .Ratiobar-value { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Ratiobar-value,.Ratiobar-value.ko-kr { 
font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Ratiobar-value.ru-ru,.ru-ru .Ratiobar-value { 
font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.Ratiobar-value.zh-tw,.zh-tw .Ratiobar-value { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Ratiobar-percent { 
font-size:1.08rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:400;
display:inline-block;
padding-right:10px}
@media (min-width:720px) { 
.Ratiobar-percent { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Ratiobar-percent { 
font-size:1.44rem}
}
.Ratiobar-percent.zh-cn,.zh-cn .Ratiobar-percent { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Ratiobar-percent,.Ratiobar-percent.ko-kr { 
font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Ratiobar-percent.ru-ru,.ru-ru .Ratiobar-percent { 
font-family:Open Sans,Arial,Helvetica,sans-serif}
.Ratiobar-percent.zh-tw,.zh-tw .Ratiobar-percent { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Ratiobar-value+.Ratiobar-percent { 
padding-left:10px;
padding-right:0}
.Ratiobar--separator .Ratiobar-right:before,.Ratiobar--winLoss .Ratiobar-right:before { 
background-color:#504137;
content:"";
height:100%;
left:-2px;
position:absolute;
top:0;
width:4px}
.Ratiobar--winLoss .Ratiobar-left { 
background-color:#0f0}
.Ratiobar--winLoss .Ratiobar-right { 
background-color:#db2300}
.Reputation { 
position:relative}
.Reputation-title { 
padding-top:5px}
.Reputation-title>* { 
display:inline-block}
.Reputation-progress { 
padding:6.66666667px 0}
.Reputation-name.Reputation-subsection { 
color:#fff;
font-size:1.296rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
font-weight:400}
@media (min-width:720px) { 
.Reputation-name.Reputation-subsection { 
font-size:1.4687999999999999rem}
}
@media (min-width:1280px) { 
.Reputation-name.Reputation-subsection { 
font-size:1.728rem}
}
.Reputation-name.Reputation-subsection.zh-cn,.zh-cn .Reputation-name.Reputation-subsection { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-name.Reputation-subsection,.Reputation-name.Reputation-subsection.ko-kr { 
font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-name.Reputation-subsection.ru-ru,.ru-ru .Reputation-name.Reputation-subsection { 
font-family:Open Sans,Arial,Helvetica,sans-serif}
.Reputation-name.Reputation-subsection.zh-tw,.zh-tw .Reputation-name.Reputation-subsection { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation-name,.Reputation-standing { 
font-size:1.08rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
color:#ebdec2;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:400;
text-shadow:none;
line-height:1.6;
margin:0}
@media (min-width:720px) { 
.Reputation-name,.Reputation-standing { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Reputation-name,.Reputation-standing { 
font-size:1.44rem}
}
.Reputation-name.zh-cn,.Reputation-standing.zh-cn,.zh-cn .Reputation-name,.zh-cn .Reputation-standing { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-name,.ko-kr .Reputation-standing,.Reputation-name.ko-kr,.Reputation-standing.ko-kr { 
font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-name.ru-ru,.Reputation-standing.ru-ru,.ru-ru .Reputation-name,.ru-ru .Reputation-standing { 
font-family:Open Sans,Arial,Helvetica,sans-serif}
.Reputation-name.zh-tw,.Reputation-standing.zh-tw,.zh-tw .Reputation-name,.zh-tw .Reputation-standing { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation-standing { 
position:absolute;
right:0;
text-align:right}
.Reputation-progress .Progressbar-body { 
line-height:1.5em;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-size:1rem;
line-height:1.5;
font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;
font-weight:700;
text-align:left;
padding-left:10px}
@media (min-width:720px) { 
.Reputation-progress .Progressbar-body { 
font-size:1rem}
}
@media (min-width:1280px) { 
.Reputation-progress .Progressbar-body { 
font-size:1rem}
}
.Reputation-progress .Progressbar-body.zh-cn,.zh-cn .Reputation-progress .Progressbar-body { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-progress .Progressbar-body,.Reputation-progress .Progressbar-body.ko-kr { 
font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-progress .Progressbar-body.ru-ru,.ru-ru .Reputation-progress .Progressbar-body { 
font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.Reputation-progress .Progressbar-body.zh-tw,.zh-tw .Reputation-progress .Progressbar-body { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation--DEFAULT .Reputation-standing { 
color:#0f9601}
.Reputation--EXALTED .Reputation-standing { 
color:#28a687}
.Reputation--FRIENDLY .Reputation-standing,.Reputation--HONORED .Reputation-standing,.Reputation--REVERED .Reputation-standing { 
color:#0f9601}
.Reputation--NEUTRAL .Reputation-standing { 
color:#edba03}
.Reputation--UNFRIENDLY .Reputation-standing { 
color:#cc3609}
.Reputation--HATED .Reputation-standing,.Reputation--HOSTILE .Reputation-standing { 
color:#d90e03}
.Reputation--STRANGER .Reputation-standing { 
color:#cc3609}
.Reputation--ACQUAINTANCE .Reputation-standing { 
color:#edba03}
.Reputation--BUDDY .Reputation-standing,.Reputation--FRIEND .Reputation-standing,.Reputation--GOOD_FRIEND .Reputation-standing { 
color:#0f9601}
.Reputation--BEST_FRIEND .Reputation-standing { 
color:#28a687}
.Reputation--BODYGUARD .Reputation-standing,.Reputation--TRUSTED_BODYGUARD .Reputation-standing { 
color:#0f9601}
.Reputation--PERSONAL_WINGMAN .Reputation-standing { 
color:#28a687}
.Reputation--BRONZE_ALLY .Reputation-standing,.Reputation--CHRONO-FRIEND .Reputation-standing,.Reputation--EPOCH-MENDER .Reputation-standing,.Reputation--TEMPORAL_TRAINEE .Reputation-standing,.Reputation--TIMEHOPPER .Reputation-standing,.Reputation--WHELPLING .Reputation-standing { 
color:#0f9601}
.Reputation--TIMELORD .Reputation-standing { 
color:#28a687}
.Reputation--AMBIVALENT .Reputation-standing,.Reputation--APPREHENSIVE .Reputation-standing,.Reputation--CORDIAL .Reputation-standing,.Reputation--DUBIOUS .Reputation-standing,.Reputation--TENTATIVE .Reputation-standing { 
color:#0f9601}
.Reputation--APPRECIATIVE .Reputation-standing { 
color:#28a687}
.Reputation--RANK_1 .Reputation-standing,.Reputation--RANK_2 .Reputation-standing,.Reputation--RANK_3 .Reputation-standing,.Reputation--RANK_4 .Reputation-standing,.Reputation--RANK_5 .Reputation-standing,.Reputation--RANK_6 .Reputation-standing,.Reputation--RANK_7 .Reputation-standing { 
color:#0f9601}
.Reputation--RANK_8 .Reputation-standing { 
color:#28a687}
.Reputation--wide { 
-webkit-box-sizing:border-box;
box-sizing:border-box}
.Reputation--wide:after,.Reputation--wide:before { 
content:"";
display:table;
clear:both}
.Reputation--wide .Reputation-title { 
text-align:center;
padding-top:24px}
.Reputation--wide .Reputation-name { 
clear:none;
float:left;
width:25%;
text-align:right;
padding:6.66666667px}
.Reputation--wide .Reputation-progress { 
clear:none;
float:left;
width:50%;
padding:6.66666667px}
.Reputation--wide .Reputation-standing { 
clear:none;
float:left;
width:25%;
padding:6.66666667px;
text-align:left}


@-webkit-keyframes Expand-Animation-Fade-In { 
0% { 
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)}
to { 
opacity:1}
}
@keyframes Expand-Animation-Fade-In { 
0% { 
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)}
to { 
opacity:1}
}
@-webkit-keyframes Expand-Animation-Fade-Out { 
0% { 
display:block;
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)}
to { 
opacity:0}
}
@keyframes Expand-Animation-Fade-Out { 
0% { 
display:block;
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)}
to { 
opacity:0}
}
@-webkit-keyframes ImageNav-Animation-BounceUp { 
0% { 
-webkit-transform:translateY(0);
transform:translateY(0)}
50% { 
-webkit-transform:translateY(-10px);
transform:translateY(-10px)}
85% { 
-webkit-transform:translateY(4px);
transform:translateY(4px)}
to { 
-webkit-transform:translateY(0);
transform:translateY(0)}
}
@keyframes ImageNav-Animation-BounceUp { 
0% { 
-webkit-transform:translateY(0);
transform:translateY(0)}
50% { 
-webkit-transform:translateY(-10px);
transform:translateY(-10px)}
85% { 
-webkit-transform:translateY(4px);
transform:translateY(4px)}
to { 
-webkit-transform:translateY(0);
transform:translateY(0)}
}