@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

#container{
	width: 300px;
	height: 600px;
	position: relative;
	top: 0px;
	left:0px;
	overflow: hidden;
}

#content{
	position: absolute;
    width: 298px;
    height: 598px;
    top: 0px;
    left: 0px;
    background-color: #000000;
    z-index: 100;
    overflow: hidden;
    border: 1px solid #000000;
    opacity: 1;
}

.btnPlay {
    background-image:url('btnPlay.png');
    background-size:80px 80px;
    width:80px;
    height:80px;
    position:absolute;
    left: 110px;
    top: 260px;
    opacity:0.7;
    z-index:10;
    cursor: pointer;
}

#background_exit {
	width: 300px;
	height: 600px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:9;
	cursor:pointer;
}


#mainBg {
	/* background-image:url('mainBg_50.jpg'); */
	width: 300px;
	height: 600px;
	position:absolute;
	top:0px;
	left:0px;
	opacity:1;
	z-index:1;
	cursor:pointer;
}



.platformLogos {
	background-image: url("platformLogos.png");
    cursor: pointer;
	width: 300px;
    height: 74px;
    opacity: 0;
    position: absolute;
	left: 0px;
    top: 526px;
    z-index: 8;
}


#cta
{
    position: absolute;
    width: 161px;
    height: 41px;
    left: 68px;
    top: 480px;
    opacity: 0;
    overflow: hidden;
}

.btn {
	background-image: url("btn.png");
    cursor: pointer;
	width: 161px;
    height: 41px;
    left: 68px;
    top: 480px;
    opacity: 0;
    position: absolute;
    z-index: 8;
}
.sheen
{
    background-image: url("sheen.png");
	position: absolute;
    top: -20px;
    left: -80px;
	width:83px;
	height:98px;
    opacity: 1;
	z-index:8;
}



.text {
	background-image: url("text.png");
    cursor: pointer;
	width: 300px;
    height: 90px;
    left: 0px;
	top: 390px;
    opacity: 0;
    position: absolute;
    z-index: 8;
}

#charFront {
	/* background-image: url("charFront-s.png"); */
    cursor: pointer;
	width: 300px;
    height: 320px;
    left: 0px;
	top: 141px;
    opacity: 0;
    position: absolute;
    z-index: 3;
}
#charRight {
	/* background-image: url("charRight-s-75.png"); */
    cursor: pointer;
	width: 225px;
    height: 240px;
    left: 0px;
	top: 150px;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
#charLeft {
	/* background-image: url("charLeft-s-75.png"); */
    cursor: pointer;
	width: 225px;
    height: 240px;
    left: 0px;
	top: 150px;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.blackGradient {
	background-image: url("blackGradient.png");
    cursor: pointer;
	width: 300px;
    height: 286px;
    opacity: 0;
    position: absolute;
	left: 0px;
    top: 330px;
    z-index: 3;
}

.effect {
	background-image: url("effect.png");
	mix-blend-mode: screen;
    cursor: pointer;
	width: 178px;
    height: 152px;
    left: 113px;
	top: 218px;
    opacity: 0;
    position: absolute;
    z-index: 8;
}

#textFrame1 {
	/* background-image: url("text_Frame1.png"); */
	width: 300px;
    height: 115px;
    left: 0px;
	top: 220px;
    opacity: 0;
    position: absolute;
    z-index: 6;
}
#textFrame2 {
	/*background-image: url("text_Frame2.png"); */
	width: 300px;
    height: 90px;
    left: 0px;
	top: 232px;
    opacity: 0;
    position: absolute;
    z-index: 6;
}
#textFrame3 {
	/* background-image: url("text_Frame3.png"); */
	width: 300px;
    height: 90px;
    left: 0px;
	top: 232px;
    opacity: 0;
    position: absolute;
    z-index: 6;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}