#hubHeader { position: relative; }
#hubHeader .headerImg { width: 100%; top: 0px; }
#hubHeader #comiclink { max-width: 456px; width: 30%; height: 340px; position: fixed; top: 93px; right: 0px; background-size: contain; background-repeat: no-repeat; text-align: right; z-index: 5; cursor: default; }
#hubHeader #comiclink .comiclinkText { color: #FFF; width: 50%; position: absolute; top: 25px; left: 90px; font-size: 16px; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; line-height: 23px; letter-spacing: 2px; }
#hubHeader #comiclink .comiclinkTextRight { color: #FFF; position: absolute; top: 11px; right: 30px; font-size: 16px; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; line-height: 23px; letter-spacing: 2px; }
#hubHeader #comiclinkHit { position: relative; height: 100%; width: 100%; /*background-color: #00cc00;*/ float: right; margin-right: -66%; -webkit-transform: skew(54deg); -moz-transform: skew(54deg); -o-transform: skew(54deg); cursor: pointer; }
#hubHeader .updateLogoContain { width: 100%; bottom: 180px; position: absolute; }
#hubHeader .updateLogoContain .updateLogo { max-width: 650px; position: relative; margin: 0 auto; width: 35%; }
#hubHeader .updateLogoContain .updateLogo .logoimg { width: 100%; }

#hubUpdate { background-color: #0c0c16; height: 100%; min-height: 800px; padding-bottom: 20px; margin-top: -198px; padding-top: 40px; }
#hubUpdate p { color: #9a9a9a; padding-bottom: 15px; line-height: 26px; }
#hubUpdate a:link { color: #c03a5d; }
#hubUpdate a:visited { color: #c03a5d; }
#hubUpdate h2 { letter-spacing: 3px; color: #28eeed; font-size: 25px; padding: 0px !important; margin-top: 10px; margin-bottom: 10px; }
#hubUpdate h3 { letter-spacing: 3px; color: #c03a5d; padding-top: 20px; padding-bottom: 20px; font-size: 20px; }
#hubUpdate h4 { letter-spacing: 3px; color: #c587dc; padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; font-size: 20px; }
#hubUpdate hr { border-top: 1px solid #393f4f !important; margin: 0px; padding-bottom: 20px; }
#hubUpdate strong, #hubUpdate b { font-weight: bold; }
#hubUpdate ul { color: #9a9a9a; padding-bottom: 30px; line-height: 26px; list-style-type: disc; margin-left: 20px; }
#hubUpdate table { color: #FFFFFF; text-align: center; width: 48%; background-color: #212121; position: relative; }
#hubUpdate table td { padding: 8px; text-align: center; border-bottom: 1px solid #0d0c14; }
#hubUpdate table .tableHeader { font-weight: bold; font-size: 17px; }
#hubUpdate table .altCell { background-color: #2e2e2e; }
#hubUpdate table .disclaimer { background-color: #0c0c16; text-align: left; color: #9a9a9a; }
#hubUpdate .updateStatus { text-align: center; text-transform: uppercase; font-size: 20px; color: #FFFFFF; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; letter-spacing: 1px; }
#hubUpdate .hubImgs { position: relative; width: 100%; margin-bottom: 30px; margin-top: 20px; }
#hubUpdate .modImg { width: 50%; float: left; margin-right: 3%; }
#hubUpdate .modText { width: 40%; float: left; }
#hubUpdate #powers { list-style-type: none; margin-left: 0px; }
#hubUpdate #powers li { text-align: center; }
#hubUpdate #powers li .ability-splash { max-width: 100%; }
#hubUpdate #powers li .ability-icon { margin-top: -50px; }
#hubUpdate #powers li .powerTitle { color: white; text-align: center; font-size: 16pt; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; text-transform: uppercase; margin-bottom: 0.5em; }
#hubUpdate #powers .abilityScale { clear: both; display: none; }
#hubUpdate .videoWrapper { position: relative; padding-bottom: 54%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom: 30px; }
#hubUpdate .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#hubUpdate video { width: 100%    !important; height: auto   !important; }

.twitchBanner { width: 100%; position: relative; background-color: #0c162b; color: #FFFFFF; display: inline-block; padding-bottom: 50px; min-height: 580px; }
.twitchBanner a, .twitchBanner a:visited { color: #FFFFFF; }
.twitchBanner h1 { letter-spacing: 2px; color: #FFFFFF; margin-bottom: 20px; margin-top: 15px; font-size: 22px; }
.twitchBanner .twitchBannerImg { width: 100%; position: absolute; }
.twitchBanner .twitchBannerContent { position: relative; width: 40%; float: right; margin-top: 70px; margin-right: 50px; }
.twitchBanner .twitchBannerContent .twitchBannerText { margin-top: 20px; margin-bottom: 20px; font-size: 16px; line-height: 23px; }
.twitchBanner .twitchBannerContent .twitchBannerText span { font-style: italic; }
.twitchBanner .twitchBannerContent .twitchPurpleText { color: #8957ca; font-weight: bold; font-size: 20px; }
.twitchBanner .twitchBannerContent .twitchBannerButton { background-color: #8957ca; letter-spacing: 3px; padding: 15px; display: inline-block; text-transform: uppercase; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; }

.cd-image-container { position: relative; width: 100%; max-width: 1140px; margin: 0em auto; margin-bottom: 30px; }

.cd-image-container img { display: block; width: 100%; }

.cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; }

.cd-image-label.is-hidden { visibility: hidden; }

.is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

.cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; }

.cd-resize-img .cd-image-label { right: auto; left: 0; }

.is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; }

@-webkit-keyframes cd-bounce-in { 0% { width: 0; }
  60% { width: 55%; }
  100% { width: 50%; } }
@-moz-keyframes cd-bounce-in { 0% { width: 0; }
  60% { width: 55%; }
  100% { width: 50%; } }
@keyframes cd-bounce-in { 0% { width: 0; }
  60% { width: 55%; }
  100% { width: 50%; } }
.cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #d32b45 url("{{cdn_url('images/_newsImages/2017/June/7/cd-arrows.svg')}}") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); }

.cd-handle.draggable { /* change background color when element is active */ background-color: #445b7c; }

.is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

#cboxLoadedContent { width: 558px; margin: 0 auto !important; }

.ui-loader { display: none; }

#comicContainer { display: none; }

#comic { padding-bottom: 40px; position: relative; overflow: hidden; width: 558px; margin: 0 auto; height: 834px; background-color: black; }

#comic .logo { display: block; margin: 0 auto; padding: 20px 0; max-width: 400px; }

#comic .pagination { position: absolute; z-index: 10; color: white; width: auto; margin: 10px 0 0 10px; text-align: right; font-size: 10pt; text-transform: uppercase; }

#comic .subtitles { position: absolute; bottom: 0; width: 100%; margin-bottom: 10px; color: white; text-align: center; z-index: 99; text-shadow: black 1px 1px 0, black 2px 2px 0, black 3px 3px 0; }

#comic .scroll-target { visibility: hidden; position: absolute; top: 230px; }

#comic img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#comic { padding-bottom: 40px; position: relative; overflow: hidden; height: 834px; background-color: black; }
#comic .logo { display: block; margin: 0 auto; padding: 20px 0; max-width: 400px; }
#comic .pagination { position: absolute; z-index: 10; color: white; width: auto; margin: 10px 0 0 10px; text-align: right; font-size: 10pt; text-transform: uppercase; }
#comic .subtitles { position: absolute; bottom: 0; width: 100%; margin-bottom: 10px; color: white; text-align: center; z-index: 99; text-shadow: black 1px 1px 0, black 2px 2px 0, black 3px 3px 0; }
#comic .scroll-target { visibility: hidden; position: absolute; top: 230px; }
#comic img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.page { position: absolute; top: 0px; left: 0px; width: 1112px; height: 835px; display: none; }
.page:first-of-type { display: block; }

.page .strip { position: absolute; }

.hidden { opacity: 0; }

.lang-en .subtitles { display: none !important; }

.lang-de .powerTitle { font-size: 14px !important; }

.lang-de .comiclinkText, .lang-ru .comiclinkText, .lang-fr .comiclinkText, .lang-es .comiclinkText, .lang-pt-br .comiclinkText, .lang-tr .comiclinkText, .lang-pl .comiclinkText, .lang-it .comiclinkText { font-size: 11px !important; left: 150px !important; line-height: 23px !important; top: 8px !important; max-width: 159px !important; }

.lang-de .comiclinkText { max-width: 164px !important; }

.lang-it .comiclinkText { max-width: 152px !important; }

.lang-ja .comiclinkText, .lang-ko .comiclinkText { left: 90px !important; top: -10px !important; }

.lang-ko .comiclinkText { top: 6px !important; }

.lang-de .comiclinkTextRight, .lang-ru .comiclinkTextRight, .lang-es .comiclinkTextRight, .lang-pt-br .comiclinkTextRight, .lang-tr .comiclinkTextRight, .lang-pl .comiclinkTextRight, .lang-it .comiclinkTextRight { font-size: 14px !important; }

.lang-fr .comiclinkTextRight { font-size: 11px !important; }

@media (max-width: 1545px) { .twitchBannerContent { top: 10%; }
  .comiclinkText { top: 35px !important; left: 85px !important; font-size: 14px !important; line-height: 17px !important; }
  .comiclinkTextRight { font-size: 14px !important; }
  .lang-de .comiclinkTextRight, .lang-ru .comiclinkTextRight, .lang-es .comiclinkTextRight, .lang-pt-br .comiclinkTextRight, .lang-tr .comiclinkTextRight, .lang-pl .comiclinkTextRight, .lang-it .comiclinkTextRight { font-size: 12px !important; }
  .lang-fr .comiclinkTextRight { font-size: 8px !important; } }
@media (max-width: 1350px) { .comiclinkText { top: 12px !important; left: 60px !important; font-size: 12px !important; }
  .comiclinkTextRight { top: 7px !important; font-size: 12px !important; }
  .lang-de .comiclinkTextRight, .lang-ru .comiclinkTextRight, .lang-es .comiclinkTextRight, .lang-pt-br .comiclinkTextRight, .lang-tr .comiclinkTextRight, .lang-pl .comiclinkTextRight, .lang-it .comiclinkTextRight { font-size: 10px !important; top: 5px !important; }
  .lang-fr .comiclinkTextRight { right: 18px !important; font-size: 7px !important; } }
@media (max-width: 1250px) { .comiclinkText { top: 12px !important; left: 60px !important; font-size: 12px !important; }
  #hubHeader { top: 49px; }
  #hubUpdate { margin-top: -100px; }
  .powersWebM { display: none; }
  .dualWieldWebM { display: none; }
  .dualWieldFallback { display: block; }
  .modImg { width: 100%; float: left; margin-right: 0%; }
  .modText { width: 100%; float: left; margin-top: -20px; margin-bottom: 20px; }
  .twitchBanner { min-height: 420px; }
  .twitchBannerImg { height: auto; width: auto; max-height: 420px; position: absolute; right: 0px; }
  .twitchBannerContent h1 { font-size: 20px; }
  .twitchBannerContent p { font-size: 14px; line-height: 18px; }
  .twitchBannerButton { padding: 10px; }
  .twitchBannerButton p { font-size: 12px; }
  .updateLogoContain { bottom: 180px !important; }
  .powerTitle { font-size: 18px !important; } }
@media (max-width: 1053px) { #hubUpdate { margin-top: -50px; }
  #comiclink { display: none; }
  .twitchBannerContent { width: 40%; }
  .updateLogoContain { bottom: 90px !important; } }
@media (max-width: 1053px) and (min-width: 875px) { .three.columns { width: 46% !important; margin-bottom: 4%; margin-left: 2%; margin-right: 2%; }
  .three.columns .abilityScale { display: block; } }
@media (max-width: 1000px) { .updateLogoContain { bottom: 90px !important; } }
@media (max-width: 875px) { #hubHeader { top: 0px; }
  #hubUpdate { margin-top: -60px; }
  #comiclink { top: 0px; position: absolute; }
  .updateLogoContain { bottom: 50px !important; }
  .twitchBannerImg { position: relative !important; }
  .twitchBannerContent { width: 90% !important; left: 5% !important; margin-right: 0px !important; float: none !important; }
  .three.columns { width: 100% !important; margin-left: 0px; margin-bottom: 20px; }
  #comiclinkHit { position: absolute; top: 0; right: 0; height: 30%; -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -o-transform: skew(0deg); margin-right: 0; } }
#hubUpdate { background-color: #1e1c32; }
#hubUpdate h2 { color: #ee4eed; text-shadow: 0 0 5px #fff, 0 0 10px #ff4da6, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6; margin-bottom: 20px !important; }
#hubUpdate h3, #hubUpdate a:link, #hubUpdate a:visited, #hubUpdate .powerTitle { color: #fffa8a !important; text-shadow: 0 0 5px #fff, 0 0 5px #e2c697, 0 0 10px #e2c697, 0 0 20px #e2c697, 0 0 30px #e2c697, 0 0 40px #e2c697, 0 0 50px #ff4da6; }
#hubUpdate p, #hubUpdate ul { color: #75eaf4; }
#hubUpdate .cosmeticGrid .ability-splash { display: none; }
#hubUpdate .modChart { margin-bottom: 45px; }
#hubUpdate .modChart .modChartRow { position: relative; margin-bottom: 20px; }
#hubUpdate .modChart .modChartRow .modChartImage { float: left; margin-right: 30px; width: 36%; }
#hubUpdate .modChart .modChartRow .modChartImage .mod-splash { position: relative; width: 100%; max-width: 425px; }
#hubUpdate .modChart .modChartRow .modChartText { float: left; width: 60%; }
#hubUpdate .modChart .modChartRow .modChartText h3 { padding-top: 15px !important; }
#hubUpdate .twitchTempButton { background-color: #8957ca; letter-spacing: 3px; padding: 15px; display: inline-block; text-transform: uppercase; font-family: "Michroma", "Open Sans", Helvetica, sans-serif; }
#hubUpdate .ability-icon { width: 100px; }
#hubUpdate .siblwohf { height: 25px; width: 85px; position: absolute; margin-top: 10px; cursor: help; }

.twitchBanner { background-color: #0d0d17; }
.twitchBanner .twitchBannerContent { margin-top: 140px; }
.twitchBanner .twitchBannerContent .twitchBannerButton { background-color: #ff00bf !important; }
.twitchBanner .twitchBannerContent .twitchBannerText { max-width: 681px; }

.comiclinkText { width: 35% !important; top: 16px !important; left: 69px !important; font-size: 15px !important; }

@media (max-width: 1399px) { .comiclinkText { font-size: 10px !important; left: 50px !important; } }
@media (max-width: 1300px) { .twitchBannerContent { margin-top: 90px !important; } }
@media (max-width: 1053px) { .ability-splash { display: block !important; width: 100% !important; }
  .abilityScale { display: block !important; }
  .powerTitle { margin-top: 20px; }
  .cosmeticLarge { display: none; } }
@media (max-width: 953px) { .modChartText, .modChartImage { width: 100% !important; margin: 0 auto !important; float: none !important; }
  .modChartText .mod-splash, .modChartImage .mod-splash { max-width: 100% !important; } }
@media (max-width: 875px) { .ability-splash { margin: 0 auto; }
  .twitchBannerContent { margin-top: 40px !important; } }
@-webkit-keyframes pinkglow { from { text-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073; }
  to { text-shadow: 0 0 5px #fff, 0 0 10px #ff4da6, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6; } }
@-webkit-keyframes yellowglow { from { text-shadow: 0 0 5px #fff, 0 0 5px #e2c697, 0 0 10px #e2c697, 0 0 20px #e2c697, 0 0 30px #e2c697, 0 0 40px #e2c697, 0 0 50px #ff4da6; }
  to { text-shadow: 0 0 0px #fff, 0 0 2px #fff, 0 0 5px #e0ac54, 0 0 10px #e0ac54, 0 0 20px #e0ac54, 0 0 40px #e0ac54, 0 0 40px #e60073; } }
.lang-de .comiclinkText, .lang-ru .comiclinkText, .lang-fr .comiclinkText, .comiclinkText, .lang-pt-br .comiclinkText, .lang-tr .comiclinkText, .lang-pl .comiclinkText, .lang-it .comiclinkText { left: 93px !important; }

.lang-es .comiclinkText, .lang-ja .comiclinkText, .lang-it .comiclinkText, .lang-zh-hans .comiclinkText, .lang-zh-hant .comiclinkText { left: 32px !important; }

.lang-ja .comiclinkText { top: 25px !important; }

.lang-tr .comiclinkText { left: 55px !important; }

.lang-pl .comiclinkText { left: 70px !important; }