@media only screen and (max-width:767px) {
body.home, body.home .u-white-background {
	background-color: #fbe6e9
}
}
body.home .heroes-section {
	text-align: center
}
body.home .prepurchase-section-desktop {
	text-align: center;
	position: relative;
	border-top: 1px solid rgba(255,255,255,.4)
}
body.home .fight-section {
	letter-spacing: .05em;
	padding: 65px 0 95px;
	position: relative;
	overflow: hidden;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,.4);
	padding-top: 79%
}
@media only screen and (min-width:400px) {
body.home .fight-section {
	padding-top: 50%
}
}
@media only screen and (min-width:992px) {
body.home .fight-section {
	padding-top: 80px;
	background: 0 0;
	color: #f0edf2;
	text-shadow: 1px 2px 3px rgba(51,51,51,.5)
}
}
body.home .fight-section .intro-heading {
	text-shadow: 0 4px 5px rgba(60,72,96,.5)
}
body.home .fight-section .button {
	margin-top: 30px
}
body.home .intro-section {
	background-image: url(../image/hp-mobile-bg.jpg);
	background-position: center top
}
@media only screen and (min-width:768px) {
body.home .intro-section {
	background-color: #fffeff;
	height: 70vh;
	max-height: 41vw;
	position: relative;
	background-image: url(../images/hp-bg-candy-only.jpg);
	background-position: center -100px
}
body.home .intro-section:after, body.home .intro-section:before {
	background-image: url(http://i1.buimg.com/1949/38f27826765d9c21.png);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0
}
body.home .intro-section:after {
	background-image: url(http://i1.buimg.com/1949/b62e87732e5e87f6.png);
	background-position: right
}
body.home .intro-section .border-detail {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 132px;
	width: 100%;
	background-image: url(../images/hp-lower-border-detail.png);
	background-position: center bottom;
	z-index: 1
}
}
body.home .intro-section .overwatch-hero-content {
	position: relative;
	z-index: 10;
	height: 100%;
	margin-top: 2rem
}
@media only screen and (min-width:768px) {
body.home .intro-section .overwatch-hero-content {
	margin-top: 0
}
}
@media only screen and (min-width:992px) {
body.home .intro-section .overwatch-hero-content {
	margin-top: 2rem
}
}
@media only screen and (min-width:1300px) {
body.home .intro-section .overwatch-hero-content {
	margin-top: 0
}
}
body.home .intro-section .overwatch-hero-content .logo {
	width: 80vw;
	height: 60.21053vw;
	max-width: 30rem;
	max-height: 22.57895rem
}
@media only screen and (min-width:768px) {
body.home .intro-section .overwatch-hero-content .logo {
	width: 27vw;
	height: 15.37028vw;
	max-width: 75vh;
	max-height: 42.69521vh
}
}
@media only screen and (min-width:1600px) {
body.home .intro-section .overwatch-hero-content .logo {
	width: 32vw;
	height: 18.21662vw;
	max-width: 80vh;
	max-height: 45.54156vh
}
}
body.home .intro-section .cta-stacked {
	margin-top: 4rem
}
body.home .intro-section .cta-stacked .button {
	margin-bottom: 1rem
}
body.home .cta-bar-container {
	position: relative;
	z-index: 20;
	display: none
}
body.home .cta-bar-container .button {
	padding-top: 0;
	padding-bottom: 0;
	border-top: 0;
	border-bottom: 0
}
body.home .cta-bar-container .center-in-button {
	padding-top: 12px;
	padding-bottom: 12px
}
body.home .cta-bar-container .cell {
	width: 50%;
	display: table-cell;
	height: 100%;
	float:left;
}
body.home .cta-bar-container .cell a {
	height: 100%
}
body.home .cta-bar-container .cta-bar {
	display: table;
	width: 100%;
	height: 100%;
	margin-top: 5px
}
body.home .cta-bar-container .cta-bar .center-in-button-wrapper {
	height: 100%;
	width: 100%;
	display: table
}
body.home .cta-bar-container .cta-bar .center-in-button {
	display: table-cell;
	vertical-align: middle;
	height: 100%
}
body.home .cta-bar-container .cta-bar .buy-cta, body.home .cta-bar-container .cta-bar .video-cta {
	position: relative
}
@media only screen and (min-width:768px) and (max-width:991px) {
body.home .cta-bar-container .cta-bar .buy-cta, body.home .cta-bar-container .cta-bar .video-cta {
	font-size: 2rem
}
}
body.home .cta-bar-container .cta-bar .buy-cta {
	float: right;
	padding-right: 140px;
	padding-left: 20px;
	display: inline-block;
	width: auto
}
body.home .cta-bar-container .cta-bar .buy-cta .btn-art {
	opacity: 0
}
body.home .cta-bar-container .cta-bar .buy-cta .btn-art.fallback {
	opacity: 1
}
body.home .cta-bar-container .cta-bar .buy-cta .btn-art.trans-out {
	z-index: 1;
	-webkit-animation: transition-out 3s;
	animation: transition-out 3s;
	-webkit-animation-timing-function: cubic-bezier(0.075, .82, .165, 1);
	animation-timing-function: cubic-bezier(0.075, .82, .165, 1)
}
body.home .cta-bar-container .cta-bar .buy-cta .btn-art.trans-in {
	-webkit-animation: transition-in 3s;
	animation: transition-in 3s;
	-webkit-animation-timing-function: cubic-bezier(0.075, .82, .165, 1);
	animation-timing-function: cubic-bezier(0.075, .82, .165, 1)
}
body.home .cta-bar-container .cta-bar .video-cta {
	float: left;
	padding-left: 180px;
	padding-right: 20px;
	display: inline-block;
	width: auto
}
body.home .cta-bar-container .cta-bar .video-cta .media-thumbnail {
	border: 0;
	border-radius: 0
}
body.home .cta-bar-container .cta-bar .video-cta .media-thumbnail>.wrap:after {
	background-size: 30% auto
}
body.home .cta-bar-container .cta-bar .video-cta .btn-art {
	left: 10px;
	width: 150px;
	margin-top: 0;
	right: auto
}
body.home .cta-bar-container .cta-bar .btn-art {
	position: absolute;
	right: 10px;
	display: block;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}
body.home .cta-bar-container .cta-bar .buy-cta .btn-art {
	right: 0;
	top: 7%
}
.media-thumbnail>.wrap>.media {
	top: 0;
	left: 0;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
@media only screen and (min-width:768px) {
body.home .cta-bar-container {
	display: block
}
}
body.home .widowmaker-container {
	padding-top: 77%
}
@media only screen and (min-width:768px) {
body.home .widowmaker-container {
	padding-top: 38%
}
}
body.home .fg-widowmaker-shoulder-rifle {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 116%;
	background-image: url(../image/widowmaker-default-mobile.png);
	background-size: 90% auto;
	background-position: center top
}
@media only screen and (min-width:768px) {
body.home .fg-widowmaker-shoulder-rifle {
	height: 110%;
	background-image: url(../images/widowmaker-default-tablet.png);
	background-size: auto 100%
}
}
@media only screen and (min-width:992px) {
body.home .fg-widowmaker-shoulder-rifle {
	width: 50%;
	height: 118%;
	background-image: url(../images/widowmaker-default-pc.png);
	background-size: 100% auto
}
}
body.home .overwatch-game-container {
	position: relative;
	margin-top: -32%
}
@media only screen and (min-width:768px) {
body.home .overwatch-game-container {
	margin-top: -6%
}
}
@media only screen and (min-width:992px) {
body.home .overwatch-game-container {
	margin-top: 3rem
}
}
body.home .overwatch-game {
	vertical-align: top;
	width: 23%;
	max-width: 180px;
	margin-top: 1.5rem
}
body.home .overwatch-game-pc {
	width: 33%;
	max-width: 251px;
	margin-bottom: -2rem;
	margin-top: 0;
	margin-left: 1rem;
	margin-right: 1rem
}
@media only screen and (min-width:768px) {
body.home .overwatch-game-pc {
	margin-left: 3rem;
	margin-right: 3rem
}
}
@media only screen and (max-width:767px) {
body.home .buy-cta, body.home .intro-trailer {
	width: 100%;
	max-width: 310px
}
}
body.home .intro-vods {
	margin-top: 12px
}
body.home .bg-mountain-city {
	min-height: 14rem;
	background-size: cover;
	background-position: 80% top;
	background-image: url(../image/dorado-desktop.jpg)
}
@media only screen and (min-width:992px) {
body.home .bg-mountain-city {
	min-height: 20rem;
	background-position: center 16%;

	}
}
@media only screen and (min-width:1300px) {
body.home .bg-mountain-city {
	background-attachment: fixed;
	min-height: 33.5rem
}
}
body.home .bottom-bg {
	background: url(../image/game-bg-mobile.png) 0 bottom
}
@media only screen and (min-width:768px) {
body.home .bottom-bg {
	background: url(../images/game-bg-tablet.png) no-repeat
}
}
body.home .intro-heading.m-tagline {
	color: #727272
}
body.home .hero-portrait-group {
	max-width: 54.6rem;
	padding: 0 1.2rem
}
@media only screen and (min-width:768px) {
body.home .hero-portrait-group {
	padding: 0
}
}
body.home .spotlight, body.home .spotlight>.header, body.home .spotlight>.holder {
	position: relative;
	text-shadow: 0 0 1px #405275
}
@media only screen and (min-width:992px) {
body.home .spotlight:before {
	content: '';
	position: absolute;
	top: 59%;
	left: 0;
	right: 0;
	padding-top: 28.07%;
	background-image: url(../images/glow.png);
	background-size: cover
}
}
@media only screen and (min-width:992px) {
body.home .spotlight>.header:before {
	content: '';
	position: absolute;
	top: 87%;
	left: 0;
	right: 0;
	padding-top: 10.4%;
	background-image: url(../images/line-glow.png);
	background-size: cover
}
}
body.home .spotlight>.caption {
	min-height: 7em
}
@media only screen and (min-width:1300px) {
body.home .spotlight>.caption {
	min-height: 5em
}
}
body.home .mobile-cta {
	text-align: center
}
@media only screen and (min-width:768px) {
body.home .mobile-cta {
	display: none
}
}
body.home .mobile-cta .buy-cta {
	margin: 25px auto 0
}
body.home .mobile-cta .intro-trailer {
	margin: 35px auto;
	display: block;
	max-width: none
}
body.home .cta-bar {
	padding: 0 .8333%
}
body.home .news-panels {
	margin: 0 0 70px;
	text-align: center
}
body.home .news-panels h2 {
	text-align: center;
	margin: 30px 0
}
body.home .news-panels .intro-button {
	margin-top: 25px
}
@media only screen and (max-width:767px) {
body.home .news-panels .intro-button {
	width: 100%;
	padding-left: 0;
	padding-right: 0
}
}
body.home .news-panels .grid-item .subtitle {
	display: none
}
[overlay*=promo] {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
overflow-y:auto;
text-align:center;
font-size:0;
visibility:hidden;
-webkit-transition:all 200ms linear;
-ms-transition:all 200ms linear;
transition:all 200ms linear;
opacity:0
}
[overlay*=promo].open {
	visibility: visible;
	opacity: 1
}
[overlay*=promo]:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle
}
[overlay*=promo] .inner {
	width: 90%;
	max-width: 2560px;
	vertical-align: middle;
	display: inline-block;
	font-size: 12px;
	margin: 0;
	position: relative;
	z-index: 99;
	background: #000;
	box-shadow: 0 0 20px 10px rgba(0,0,0,.75);
	box-sizing: border-box
}
[overlay*=promo] .inner .close.x {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 65px;
	height: 65px;
	cursor: pointer;
	background-image: url(../image/button-close-sprite.png);
	background-repeat: no-repeat;
	z-index: 99
}
[overlay*=promo] .inner .close.x:hover {
	background-position: -66px 0
}
[overlay*=promo] .blackout-home {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 98
}
[overlay*=promo] .top {
	padding-bottom: 49.5703%;
	position: relative;
	width: 100%
}
[overlay*=promo] .top .actions {
	position: absolute;
	bottom: 0;
	width: 50%;
	margin-bottom: 13%;
	padding-right: 5%;
	padding-left: 5%;
	z-index: 1;
	text-align: left
}
[overlay*=promo] .top .actions.h-right {
	right: 0;
	text-align: right
}
[overlay*=promo] .top .actions .box {
	-webkit-transform: skew(-.25rad);
	-ms-transform: skew(-.25rad);
	transform: skew(-.25rad);
	display: inline-block;
*display:block;
	text-align: left
}
[overlay*=promo] .top .actions .box h1 {
	color: #ffd81c;
	text-shadow: 3px 3px 0 rgba(0,0,0,.29);
	font-weight: 300;
	letter-spacing: -.025em;
	line-height: 1;
	font-size: 85px;
	margin: 5px 0
}
[overlay*=promo] .top .actions .box h2 {
	color: #fff;
	text-shadow: 3px 3px 0 rgba(0,0,0,.29);
	font-family: BigNoodleToo, impact, sans-serif;
	font-size: 150px;
	font-weight: 300;
	letter-spacing: .01em;
	line-height: 1
}
[overlay*=promo] .top .actions .box .btn {
	-webkit-transform: skew(0);
	-ms-transform: skew(0);
	transform: skew(0);
	background-color: #ffc70e;
	padding: 12px 40px;
	border-radius: 4px;
	box-shadow: 0 0 15px rgba(255,78,0,.5);
	transition: all 100ms linear;
	margin-top: 15px
}
[overlay*=promo] .top .actions .box .btn span {
	color: #511616;
	font-size: 30px;
	line-height: 1;
	font-weight: 300;
	text-transform: none
}
[overlay*=promo] .top .actions .box .btn:hover {
	background-color: #fff
}
[overlay*=promo] .top .showVideo, [overlay*=promo] .top .videoWrap {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../image/opacity-1px.png) repeat
}
.top .videoWrap {
	opacity: 0
}
[overlay*=promo] .top .img {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0
}
[overlay*=promo] .btm {
	padding: 2.34375% 0;
	background-image: url(../image/prom-btm.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	position: relative
}
[overlay*=promo] .btm hr {
	height: 2px;
	display: block;
	width: 100%;
	background-color: rgba(255,255,255,.25);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	border: 0;
	background-image: none;
	padding: 0
}
[overlay*=promo] .btm .text {
	-webkit-transform: skew(-.25rad);
	-ms-transform: skew(-.25rad);
	transform: skew(-.25rad);
	padding-right: 58px;
	color: #ffd81c;
	text-shadow: 3px 3px 0 rgba(0,0,0,.29);
	font-size: 38px;
	font-weight: 300;
	letter-spacing: .01em;
	display: inline-block;
	transition: all 100ms linear;
	cursor: pointer;
	line-height: 41px;
	position: relative
}
[overlay*=promo] .btm .text:after {
	-webkit-transform: skew(0.25rad);
	-ms-transform: skew(0.25rad);
	transform: skew(0.25rad);
	background-image: url(../image/prom-arrows.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 38px 41px;
	width: 38px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	content: ''
}
[overlay*=promo] .btm .text:hover {
	color: #fff
}
@media (max-height:955px) {
[overlay*=promo] .inner {
	width: 80%
}
}
 @media only screen and (max-width:1681px) {
[overlay*=promo] .top .actions .box h1 {
	font-size: 65px
}
[overlay*=promo] .top .actions .box h2 {
	font-size: 104px
}
[overlay*=promo] .top .actions {
	margin-bottom: 12%
}
}
@media only screen and (max-width:1400px) {
[overlay*=promo] .top .actions .box h1 {
	font-size: 55px
}
[overlay*=promo] .top .actions .box h2 {
	font-size: 89px
}
[overlay*=promo] .top .actions .box .btn span {
	font-size: 20px
}
[overlay*=promo] .btm .text {
	font-size: 28px
}
[overlay*=promo] .top .actions {
	margin-bottom: 11%
}
}
@media only screen and (max-width:1024px) {
[overlay*=promo] .top .actions {
	margin-bottom: 10%
}
[overlay*=promo] .top .actions .box h1 {
	font-size: 40px
}
[overlay*=promo] .top .actions .box h2 {
	font-size: 65px
}
[overlay*=promo] .top .actions .box .btn span {
	font-size: 15px
}
[overlay*=promo] .btm .text:after {
	background-size: 28px 31px;
	width: 28px
}
[overlay*=promo] .btm .text {
	font-size: 25px;
	padding-right: 40px
}
}
@media only screen and (max-width:768px) {
[overlay*=promo].open {
	visibility: hidden;
	opacity: 0
}
}
.announcement {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
	min-height: 556px;
	padding-left: 20px;
	padding-right: 20px
}
@media only screen and (min-width:992px) {
.announcement {
	min-height: 46vw
}
}
.announcement.m-bot-align {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end
}
.announcement.u-video {
	cursor: pointer
}
.announcement.u-video:after {
	background-size: 60px auto
}
@media only screen and (min-width:992px) {
.announcement.u-video:after {
	background-size: 120px auto
}
}
.announcement.m-video-background>.announcement-video-background {
	display: none
}
@media only screen and (min-width:768px) {
.announcement.m-video-background>.announcement-video-background {
	display: block
}
}
@media only screen and (min-width:768px) {
.announcement.m-video-background>.announcement-background {
	display: none
}
}
.announcement-background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-bottom: 30vw;
	background-size: cover;
	background-position: top;
	z-index: -1
}
.video-background-vid {
	height: 100%;
	width: auto
}
.video-background-vid.m-center-horizontal, .video-background-vid.m-center-vertical {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%)
}
.announcement-content {
	width: 100%;
	margin: 0 auto;
	padding-top: 24px;
	padding-bottom: 24px;
	color: #ccc;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(51,51,51,.75)
}
@media only screen and (min-width:992px) {
.announcement-content {
	padding-top: 4vw;
	padding-bottom: 4vw
}
}
@media only screen and (min-width:768px) {
.announcement-content.m-pull-left.md-min {
	width: 45vw;
	margin-left: 0
}
.announcement-content.m-pull-right.md-min {
	width: 45vw;
	margin-right: 0
}
}
.announcement-content.m-dark-theme>.announcement-subheader {
	color: #727272
}
.announcement-content.m-dark-theme>.announcement-subheader.m-pre-title {
	color: #00c3ff
}
.announcement-content.m-dark-theme>.announcement-legal {
	color: #727272
}
.announcement-header {
	margin: 12px 0;
	color: #f0edf2;
	line-height: .9
}
.announcement-header.m-border-accent {
	border-top: 4px solid hsla(0,0%,100%,.2);
	border-bottom: 4px solid hsla(0,0%,100%,.2);
	padding: 10px 0
}
.announcement-header.m-image-title {
	width: auto
}
.announcement-subheader.m-pre-title {
	letter-spacing: 5px;
	color: #f7931e
}
.announcement-subheader.m-space-after+:first-of-type {
	margin-top: 20px
}
.announcement-subheader, .announcement-superheader {
	margin-top: 0;
	letter-spacing: 2px
}
.announcement-superheader {
	margin-bottom: 20px;
	letter-spacing: 5px;
	color: #f7931e
}
.announcement-content.m-dark-theme, .announcement-content.m-dark-theme>.announcement-superheader {
	color: #333
}
.announcement-content.m-dark-theme>.announcement-header {
	color: #405275
}
.announcement-button {
	margin: 5px
}
.announcement-lockup {
	width: 80%;
	margin: 0 auto;
	z-index: 1;
	position: relative
}
.announcement-lockup .playerBtn {
	width: 25vw;
	height: 25vw;
	display: block;
	margin: 3vw auto 2vw;
	background-size: contain;
	background-image: url(../image/play-btn.png);
	background-repeat: no-repeat
}
@media only screen and (min-width:768px) {
.announcement-lockup .playerBtn {
	width: 12vw;
	height: 12vw
}
}
@media only screen and (min-width:1600px) {
.announcement-lockup .playerBtn {
	width: 158px;
	height: 158px
}
}
@media only screen and (min-width:768px) {
.announcement-lockup {
	width: 28vw;
	margin-left: 6vw;
	margin-right: 0
}
}
.news-panels .grid-item .bg.m-video:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 3px;
	visibility: visible;
	opacity: 1;
	background-image: url(../image/youtube-btn-ylw.png);
	background-size: 13% auto
}
.announcement-summer-games-wrapper {
	position: relative;
	display: block;
	overflow: hidden;
	padding-bottom: 144%
}
@media only screen and (min-width:400px) {
.announcement-summer-games-wrapper {
	padding-bottom: 120%
}
}
@media only screen and (min-width:768px) {
.announcement-summer-games-wrapper {
	padding-bottom: 60%
}
}
@media only screen and (min-width:992px) {
.announcement-summer-games-wrapper {
	padding-bottom: 50%
}
}
@media only screen and (min-width:1300px) {
.announcement-summer-games-wrapper {
	padding-bottom: 46.25%
}
}
.summer-games-container {
	margin: 20px 20px 0
}
.announcement-summer-games {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../image/summer-games-bg-mobile.jpg) bottom no-repeat;
	background-size: cover
}
@media only screen and (min-width:768px) {
.announcement-summer-games {
	background: url(../images/summer-games-bg.jpg) 20% bottom no-repeat;
	background-size: cover
}
}
.announcement-summer-games .large-cta-lockup {
	width: 80%;
	margin: 0 auto;
	margin-top: 24vw;
	z-index: 1;
	position: relative
}
@media only screen and (min-width:768px) {
.announcement-summer-games .large-cta-lockup {
	width: 28vw;
	margin: 0;
	margin-top: 4vw
}
}
@media only screen and (min-width:1300px) {
.announcement-summer-games .large-cta-lockup {
	margin-left: 10rem
}
}
.lockup {
	text-align: center;
	text-shadow: 1px 1px 1px rgba(51,51,51,.75)
}
.large-cta-lockup {
	text-align: center
}
.large-cta-lockup .lockup-large-msg {
	padding: 1rem 0;
	margin: 1.2rem 0;
	line-height: 1em
}
.large-cta-lockup .lockup-cta {
	margin-top: 1.5rem
}
.lockup-small-msg {
letter-spacing:.2rem;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.75);
	margin-top: 0;
	font-size: 3.5vw
}
@media only screen and (min-width:768px) {
.lockup-small-msg {
	font-size: 1.5vw
}
}
.lockup-large-msg {
	padding: 1rem 0;
	margin: 1.2rem 0;
	color: #fff;
	line-height: 1;
	font-size: 14vw
}
@media only screen and (min-width:768px) {
.lockup-large-msg {
	font-size: 8vw
}
}
.lockup-small-msg.m-long-spacing {
letter-spacing:.5rem
}
.lockup-small-msg.m-highlight {
	color: #f7931e
}
.summer-games-heroes {
	display: none
}
@media only screen and (min-width:768px) {
.summer-games-heroes {
	display: block;
	background: url(../images/summer-games-heroes.png) no-repeat;
	background-size: cover;
	width: 56vw;
	height: 34vw;
	position: absolute;
	bottom: 0;
	right: 10rem
}
}
@media only screen and (min-width:1300px) {
.summer-games-heroes {
	right: 20rem
}
}
.summer-games-loot-box {
	right: 50%;
	margin-right: -22vw;
	width: 50vw;
	height: 43vw;
	bottom: -5vw;
	background: url(../image/summer-games-loot-box.png) no-repeat;
	background-size: cover;
	position: absolute
}
@media only screen and (min-width:768px) {
.summer-games-loot-box {
	bottom: 0;
	right: -3vw;
	margin-right: 0;
	width: 20vw;
	height: 17vw
}
}
.summer-games-logo {
	top: 14vw;
	left: 50%;
	margin-left: -5.5vw;
	width: 11vw;
	height: 15vw;
	background: url(../image/summer-games-logo.png) no-repeat;
	background-size: cover;
	position: absolute;
	right: 20px
}
@media only screen and (min-width:768px) {
.summer-games-logo {
	top: auto;
	margin-left: 0;
	left: auto;
	width: 8vw;
	height: 11vw
}
}
.announcement-background {
	background-image: url(../image/sombra-announcement-2560.png)
}
@media only screen and (min-width:768px) {
.announcement-background {
	background-image: url(../images/sombra-announcement-991.png)
}
}
@media only screen and (min-width:1024px) {
.announcement-background {
	background-image: url(../image/sombra-announcement-2560.png)
}
}