#games-content {
	background-color: white;
	width: 980px;
	margin: 0 auto;
	-moz-box-shadow: inset 0 5px 6px 0 #ccc, 2px 4px 8px 0px #333;
	-webkit-box-shadow:inset 0 5px 6px 0 #ccc, 2px 4px 8px 0px #333;
	box-shadow:inset 0 5px 6px 0 #ccc, 2px 4px 8px 0px #333;
}
#games-wall {
	overflow: auto;
	padding: 15px 20px;
	width: 940px;
}
#games-wall .game-tile-container {
	float: left;
}
#games-wall .game-tile {
	border:2px solid #aeaeae;
	display: block;
	float: left;
	width: 174px;
	height: 157px;
	margin: 5px;
	position: relative;
}

#games-wall .game-tile .game-image {
	pointer-events:none;
	height: 100%;
	width: 100%;
}

#games-wall .game-tile .game-animation-wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top: 0;
	left:0;
	overflow: hidden; 
}

#games-wall .displayNone .game-animation-wrapper .game-overlay {
	display:none;
}

#games-wall .displayNone:hover .game-animation-wrapper .game-overlay {
	display:inherit;
}

#games-wall .game-tile .game-animation-wrapper .game-overlay {
	color: white;
	background-color: black;
	background-color: rgba(0, 0, 0, 0.75);
	font: normal 20px "avenir-next-rounded-std-med", Arial, sans-serif;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	pointer-events:none;

}

#games-wall .game-tile .game-animation-wrapper .game-overlay .controller-icon {
	background-position: -25px -73px;
	bottom: 17px;
	display: block;
	height: 26px;
	left: 14px;
	position: absolute;
	width: 40px;
}
#games-wall .game-tile .game-title {
	display: inline-block;
	margin: 26px 14px 0;
	max-height: 72px;
	overflow: hidden;
}
#games-wall .game-tile.secondary-game .game-title {
	margin-top: 39px;
}
#games-wall .game-tile .game-burst {
	position: absolute;
	top: -10px;
	width: 40px;
	left: -12px;
}
#games-wall #secondary-game .game-burst {
	width: 50px;
}
#games-wall #featured-game .game-burst {
	left: -21px;
	top: -16px;
	width: 100px;
}
#games-wall #featured-game {
	width: 704px;
	height: 385px;
}

#games-wall #featured-game .featured-game-overlay {
	background-color: rgba(0, 0, 0, 0.25);
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	display:none;
}
#games-wall #featured-game:hover .featured-game-overlay{
	display: inherit;
}

#games-wall .game-tile.featured-game .game-animation-wrapper .game-overlay .game-title,
#games-wall .game-tile.featured-game .game-animation-wrapper .game-overlay .controller-icon {
	display: none;
}
#games-wall #wall-pane-1 {
	width: 564px;
}
#games-wall #wall-pane-1a,
#games-wall #wall-pane-4 {
	width: 188px;
}
#games-wall #wall-pane-2,
#games-wall #wall-pane-3 {
	width: 376px;
}
#games-wall #secondary-game {
	height: 186px;
	width: 208px;
}
#games-wall #ad-tile {
	background-color: #cccccc;
	border: none;
	height: 333px;
	text-align: center;
	width: 366px;
	text-align: center;
}
#games-wall #ad-tile #ad-slot-300 {
	margin: 36px 33px 0;
}
#games-wall #ad-tile #ad-label-300 {
	font: bold 10px Arial;
	letter-spacing: 11px;
}

#games-wall .game-tile.genre-tile {
	background-color: #000;
	font-family:avenir-next-rounded-std-med, Arial, Helvetica, sans-serif;
	font-size:40px;
	height: 328px;
	line-height:50px;
	overflow: hidden;
	position:relative;
	text-transform:uppercase;
	width: 362px;
}
#games-wall .game-tile.genre-tile:hover {
	background-position: -4px -4px;
	border-style: solid;
	border-width: 6px;
	-moz-box-sizing:    border-box;
   	-webkit-box-sizing: border-box;
   	box-sizing:         border-box;
	height: 332px;
	width: 366px;
}
#games-wall .game-tile.genre-tile:hover .category-card-copy {
	padding-left: 31px;
	padding-top: 31px;
}
#games-wall .category-card-copy {
	color:#fff;
	padding:35px 35px 0;
}
#games-wall .category-card-sponsor {
	bottom:0px;
	height:150px;
	overflow:hidden;
	position:absolute;
	text-align:center;
	width:100%;
}
#games-wall .game-tile.genre-tile:hover .category-card-sponsor {
	bottom: -4px;
	left: -4px;
}

#other-sections {
	border-top: 1px #7f7f7f solid;
	margin: 10px auto 65px;
	overflow: auto;
	padding: 60px 0;
	text-align: center;
	width: 930px;
}
#other-sections #more-cn {
	display: block;
	font: 36px/26px "cn-bold", Arial, sans-serif;
	margin-bottom: 60px;
}
#other-sections .section-link {
	color: black;
	cursor: pointer;
	display: block;
	float: left;
	font: normal 28px "avenir-next-rounded-std-med", Arial, sans-serif;
	text-align: center;
	text-transform: uppercase;
	width: 33%;
}
#other-sections .section-link .link-icon-container {
	display: block;
	height: 88px;
	margin-bottom: 34px;
	position: relative;
}
#other-sections .section-link .link-icon {
	margin: 0 auto;
	position: relative;
}
#other-sections #video-icon {
	background-position: 0 0;
	height: 71px;
	top: 14px;
	width: 96px;
}
#other-sections #mobile-icon {
	background-position: -97px 0;
	height: 88px;
	top: 0;
	width: 61px;
}
#other-sections #community-icon {
	background-position: -159px 0;
	height: 79px;
	top: 10px;
	width: 83px;
}
#other-sections .section-link:hover .link-text-container {
	background-color: black;
	color: white;
	display: inline-block;
	padding: 0 10px;
}
#other-sections .section-link .link-text,
#other-sections .section-link .link-arrow {
	vertical-align: middle;
}

/* roll over animation */

#games-wall .game-animation-wrapper {
	perspective: 500px;
	-ms-perspective: 500px;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;

}

.game-overlay {
	transform: rotate3d(1, 0, 0, 90deg);
	-ms-transform: rotate3d(1, 0, 0, 90deg);
	-webkit-transform: rotate3d(1, 0, 0, 90deg);
	-moz-transform: rotate3d(1, 0, 0, 90deg);

}

.in-top .game-overlay {
   transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;

   animation: in-top 350ms ease 0ms 1 forwards;
   -webkit-animation: in-top 350ms ease 0ms 1 forwards;
   -moz-animation: in-top 350ms ease 0ms 1 forwards;

}

.in-right .game-overlay {
	transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%;

	animation: in-right 350ms ease 0ms 1 forwards;
	-webkit-animation: in-right 350ms ease 0ms 1 forwards;
	-moz-animation: in-right 350ms ease 0ms 1 forwards;

}

.in-bottom .game-overlay {
	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;

	animation: in-bottom 350ms ease 0ms 1 forwards;
	-webkit-animation: in-bottom 350ms ease 0ms 1 forwards;
	-moz-animation: in-bottom 350ms ease 0ms 1 forwards;
}

.in-left .game-overlay {
	transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;

	animation: in-left 350ms ease 0ms 1 forwards;
	-webkit-animation: in-left 350ms ease 0ms 1 forwards;
	-moz-animation: in-left 350ms ease 0ms 1 forwards;
}

.out-top .game-overlay {
	transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;

	animation: out-top 350ms ease 0ms 1 forwards;
	-webkit-animation: out-top 350ms ease 0ms 1 forwards;
	-moz-animation: out-top 350ms ease 0ms 1 forwards;
}

.out-right .game-overlay {
	transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;

	animation: out-right 350ms ease 0ms 1 forwards;
	-webkit-animation: out-right 350ms ease 0ms 1 forwards;
	-moz-animation: out-right 350ms ease 0ms 1 forwards;
}

.out-bottom .game-overlay {
	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;

	animation: out-bottom 350ms ease 0ms 1 forwards;
	-webkit-animation: out-bottom 350ms ease 0ms 1 forwards;
	-moz-animation: out-bottom 350ms ease 0ms 1 forwards;
}

.out-left .game-overlay {
	transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;

	animation: out-left 350ms ease 0ms 1 forwards;
	-webkit-animation: out-left 350ms ease 0ms 1 forwards;
	-moz-animation: out-left 350ms ease 0ms 1 forwards;

}

@keyframes in-top {
  from {transform: rotate3d(-1, 0, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-right {
  from {transform: rotate3d(0, -1, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-bottom {
  from {transform: rotate3d(1, 0, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-left {
  from {transform: rotate3d(0, 1, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}

@keyframes out-top {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(-1, 0, 0, 102deg);}}
@keyframes out-right {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(0, -1, 0, 102deg);}}
@keyframes out-bottom {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(1, 0, 0, 101deg);}}
@keyframes out-left {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(0, 1, 0, 102deg);}}

@-webkit-keyframes in-top {
  from {-webkit-transform: rotate3d(-1, 0, 0, 90deg);}
  to   {-webkit-transform: rotate3d(0, 0, 0, 0deg);}}
@-webkit-keyframes in-right {
  from {-webkit-transform: rotate3d(0, -1, 0, 90deg);}
  to   {-webkit-transform: rotate3d(0, 0, 0, 0deg);}}
@-webkit-keyframes in-bottom {
  from {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
  to   {-webkit-transform: rotate3d(0, 0, 0, 0deg);}}
@-webkit-keyframes in-left {
  from {-webkit-transform: rotate3d(0, 1, 0, 90deg);}
  to   {-webkit-transform: rotate3d(0, 0, 0, 0deg);}}

@-webkit-keyframes out-top {
  from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-webkit-transform: rotate3d(-1, 0, 0, 102deg);}}
@-webkit-keyframes out-right {
  from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-webkit-transform: rotate3d(0, -1, 0, 102deg);}}
@-webkit-keyframes out-bottom {
  from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-webkit-transform: rotate3d(1, 0, 0, 101deg);}}
@-webkit-keyframes out-left {
  from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-webkit-transform: rotate3d(0, 1, 0, 102deg);}}

  @-moz-keyframes in-top {
  from {-moz-transform: rotate3d(-1, 0, 0, 90deg);}
  to   {-moz-transform: rotate3d(0, 0, 0, 0deg);}}
@-moz-keyframes in-right {
  from {-moz-transform: rotate3d(0, -1, 0, 90deg);}
  to   {-moz-transform: rotate3d(0, 0, 0, 0deg);}}
@-moz-keyframes in-bottom {
  from {-moz-transform: rotate3d(1, 0, 0, 90deg);}
  to   {-moz-transform: rotate3d(0, 0, 0, 0deg);}}
@-moz-keyframes in-left {
  from {-moz-transform: rotate3d(0, 1, 0, 90deg);}
  to   {-moz-transform: rotate3d(0, 0, 0, 0deg);}}

@-moz-keyframes out-top {
  from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-moz-transform: rotate3d(-1, 0, 0, 102deg);}}
@-moz-keyframes out-right {
  from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-moz-transform: rotate3d(0, -1, 0, 102deg);}}
@-moz-keyframes out-bottom {
  from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-moz-transform: rotate3d(1, 0, 0, 101deg);}}
@-moz-keyframes out-left {
  from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
  to   {-moz-transform: rotate3d(0, 1, 0, 102deg);}}