.VRMenuButton
{
    flow-children: down;
    width: 100%;
    height: 100%;
    //border: 4px solid #000000ee;
}

.VRMenuButton:hover
{
	background-color: #99999900;
}

.VRMenuImageContainer
{
	width: 100%;
	height: width-percentage( 133% );
	background-color: #1b1b1dAA;
}

.VRMenuImage
{
	width: 100%;
	height: 100%;
	pre-transform-scale2d: 1.0;
	wash-color: transparent;
	opacity: 0.8;

	transition-property: pre-transform-scale2d, wash-color, brightness, saturation;
    transition-duration: 0.32s;
	transition-timing-function: ease-in-out;
}

.HeroesImage
{
	background-image: url("s2r://panorama/images/vr/heroes/heroes_png.vtex");
	background-size: 100% 100%;
	background-position: 50%;

	saturation: 0.0;
}
 
.WatchImage
{
    background-image: url("s2r://panorama/images/loadingscreens/midlane_loadingscreen/loadingscreen_tga.vtex") ;
	background-size: 249% 100%;
	background-position: 100% 50%;
}

.VRMenuButton:hover .VRMenuImage
{
	pre-transform-scale2d: 1.05;
	saturation: 1.0;
	transition-duration: 0.4s;
	brightness: 1.4;
}

.VRMenuFooter
{
	background-color: #1b1b1d00;
	width: 100%;
	height: fill-parent-flow( 1.0 );
}

.VRMenuBody
{
	background-color: #1b1b1d00;
	width: 100%;
	height: 100%;
	min-height: 82px;
	padding-bottom: 8px;
	transition-property: background-color;
    transition-duration: 0.26s;
	transition-timing-function: ease-in-out;
	flow-children: down;
}


#VRMenuName
{
	horizontal-align: center;
	text-align: center;
	margin-top: 12px;
	color: white;
	font-size: 80px;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0px 0px 3px 1 #ffffff00;
}

#VRMenuDescription
{
	margin-top: 6px;
	font-size: 18px;
	text-shadow: 0px 0px 3px 1 #ffffff00;
    horizontal-align: left;
	margin-left: 16px;
	padding-right: 10px;
	
	color: white;
	font-size: 26px;
}