@font-face {
  font-family: 'ATTBd';
    src:       url('ATTAleckCd_Bd.ttf')  format('truetype');
}

@font-face {
  font-family: 'ATTMd';
    src:       url('ATTAleckCd_Md.ttf')  format('truetype');
}

@font-face {
  font-family: 'ATTRg';
    src:       url('ATTAleckCd_Rg.ttf')  format('truetype');
}

body 
{
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	background-color: #000000;
}

h1 {
	font-family: ATTBd;	
	color: #FFFFFF;
	font-size: 6vw;
	text-align: center;
}

h2 {
	font-family: ATTMd;	
	color: #FFFFFF;
	font-size: 5vw;
	text-align: center;
}

label {
	font-family: ATTMd;	
	color: #FFFFFF;
	font-size: 4.8vw;
	text-align: left;
	display: block;
}

a:link, a:visited, a:active
{
	color: #FFFFFF;	
	text-decoration: underline;
}

#logo
{
    border:none;
    width:14vw;
    height:auto;
	/*display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 6vw;
	*/
	
	position: absolute; 
	left: 0;
	top: 3vh; 	
	z-index: 1; 	
}

#title
{
    border:none;
    width:80vw;
    height:auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 12vw;
	padding-bottom: 12vw;	
}

.btnContinue
{
    background:url(../media/btcontinue.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:31.32vw;
    height:10.8vw;	
}

.buttonHolder{ text-align: center; }

#idle
{
	max-width: 100vw;
	max-height: 100vh;	
	position: relative;
	aspect-ratio: 16/9;
	display: inline-block;
	/*padding-left:10px;
	padding-right:10px;*/
}

.playerVideo
{
	max-width: 100vw;
	max-height: 100vh;
	display: block;
}

/*.buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}*/

#contentParent
{
	background-color: #000000;
	display: table;
	height: 100vh;	
}

#contentChild
{
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	width: 100vw;
	max-height: 100vh;
}


#title01
{
    position: absolute; 
	left: 15vw;
	top: 30vh; 	
	z-index: 1; 	
}

.btn01
{
    background:url(../media/btn01.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:9.7616vw;
    height:12vw;
	
	position: absolute; 
	left: 7%;
	top: 40%; 	
	z-index: 1; 	
}

.btn02
{
    background:url(../media/btn02.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:8.3316vw;
    height:12vw;
	
	position: absolute; 
	left: 20%;
	top: 26%; 	
	z-index: 1; 	
}

.btn03
{
    background:url(../media/btn03.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:9.3886vw;
    height:12vw;
	
	position: absolute; 
	left: 35%;
	top: 12%; 	
	z-index: 1; 	
}

.btn04
{
    background:url(../media/btn04.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:10.1347vw;
    height:12vw;
	
	position: absolute; 
	left: 53%;
	top: 12%; 	
	z-index: 1; 	
}

.btn05
{
    background:url(../media/btn05.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:7.9585vw;
    height:12vw;
	
	position: absolute; 
	left: 68%;
	top: 26%; 	
	z-index: 1; 	
}

.btn06
{
    background:url(../media/btn06.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:8.3937vw;
    height:12vw;
	
	position: absolute; 
	left: 81%;
	top: 40%; 	
	z-index: 1; 	
}

.btnHome
{
    background:url(../media/btnhome.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    cursor:pointer;
    border:none;
    width:7vw;
    height:7vw;
	
	position: absolute; 
	left: 90%;
	top: 2%; 	
	z-index: 1; 	
}


.scene
{
	max-width: 100vw;
	max-height: 100vh;	
	position: relative;
	aspect-ratio: 16/9;
	display: inline-block;
}


#tensarno
{
    border:none;
    width:24vw;
    height:auto;
	
	position: absolute; 
	left: 12%;
	bottom: 5%;
	z-index: 1; 	
}

#tensaryes
{
    border:none;
    width:24vw;
    height:auto;
	
	position: absolute; 
	left: 64%;
	bottom: 5%;
	z-index: 1; 	
}