h1{
	font-size:18px;
	pointer-events: none;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
	outline:none;
  
  	text-decoration: none;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	user-select: none;
	
}

body {
	background: #21bfff;
	overflow:hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.disable-select {
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}

.buttonframe{
	position:absolute;
	width:180px;
	height:240px;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-120px;
	background-color:#c9edff;
	border:solid 4px #fff;
	z-index:5;	
	box-shadow: 6px 6px 12px rgba(0,0,0,0.4);
	
	-webkit-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1); /* older webkit */
	-webkit-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	-moz-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	-o-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); /* custom */

	/*-webkit-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1); /* older webkit */
	/*-webkit-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*-moz-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*-o-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); /* custom */

}

.videoframe{
	position:absolute;
	width:180px;
	height:240px;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-120px;
	background-image:url('../images/back_0.png');

	background-repeat: no-repeat;
	background-size: 100%; //propotional resize
	z-index:0;	
	box-shadow: 6px 6px 12px rgba(0,0,0,0.4);
	
	-webkit-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1); /* older webkit */
	-webkit-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	-moz-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	-o-transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); */
	transition: left 1000ms ease-out;/*cubic-bezier(0.260, 0.555, 0.390, 1.465); /* custom */

	/*-webkit-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1); /* older webkit */
	/*-webkit-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*-moz-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*-o-transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); 
	/*transition-timing-function: cubic-bezier(0.260, 0.555, 0.390, 1.465); /* custom */
}



.nonactive{
	left:-50%;
}

.videocontainer{
	position:absolute;
	top:0;
	left:0;
	width:180px;
	height:240px;
	z-index:10;
}


#video {
	background-color:rgba(0, 0, 0, 0.0);
	pointer-events: none;
}

.videooutline{
	position:absolute;
	width:180px;
	height:240px;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-120px;
	border: solid 4px #fff;
	pointer-events: none;
	background-color:none;
	z-index:200;
}


	

.menubutton {
	position: absolute;
	width: 50px;
	height: 50px;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	padding-top:6px;
	background-repeat: no-repeat;
	background-size: 100%; //propotional resize
	z-index:0;
	cursor:pointer;
	border: 3px solid white;
	border-radius:25px;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.4);
}

.versienumber{
	position:absolute;
	right:2px;
	bottom:1px;
	color:#555;
	font-size:4px;
}


#button1 {
	top:40px;
	left:5px;
	background-image:url('../images/button_0.png');
}
#button2 {
	top:20px;
	left:60px;
	//background-image:url('../images/button_0.png');
}

#button3 {
	top:40px;
	left:115px;
	//background-image:url('../images/button_0.png');
}


#button4 {
	top:90px;
	left:35px;
	//background-image:url('../images/button_0.png');
}

#button5 {
	top:90px;
	left:90px;
	//background-image:url('../images/button_0.png');
}


#button6 {
	top:140px;
	left:5px;
	//background-image:url('../images/button_0.png');
}

#button7 {
	top:155px;
	left:60px;
	//background-image:url('../images/button_0.png');
}

#button8 {
	top:140px;
	left:115px;
	//background-image:url('../images/button_0.png');
}

.videobutton{
	position:absolute;
	width:30px;
	height:30px;
	border: solid 2px #21bfff;
	cursor:pointer;
	border-radius:15px;
	background-color: none;
	opacity:0.0;
	z-index:100;
	
	  -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
	
}

.videbuttonactive{
	opacity:0.3;
}

#vidbtn1{
	top:52px;
	left:90px;
	width:24px;
	height:24px;
	border-radius:12px;
}

#vidbtn2{
	top:32px;
	left:52px;
	width:40px;
	height:20px;
	border-radius:12px;
}

#vidbtn3{
	top:50px;
	left:34px;
	width:24px;
	height:24px;
	border-radius:12px;
}

#vidbtn4{
	top:52px;
	left:58px;
	width:32px;
	height:18px;
	border-radius:12px;
}

#vidbtn5{
	top:70px;
	left:49px;
	width:50px;
	height:25px;
	border-radius:12px;
}

#vidbtn6{
	top:115px;
	left:49px;
	width:56px;
	height:50px;
	border-radius:12px;
}

#vidbtn7{
	top:164px;
	left:76px;
	width:53px;
	height:35px;
	border-radius:15px;
}

#vidbtn8{
	top:164px;
	left:7px;
	width:69px;
	height:67px;
	border-radius:15px;
}

#vidbtn9{
	top:144px;
	left:128px;
	width:39px;
	height:48px;
	border-radius:15px;
}


.videoclosebutton{
	position:absolute;
	top:7px;
	right:7px;
	width:16px;
	height:16px;
	cursor:pointer;
	border:2px solid #21bfff;
	border-radius:8px;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
	background-color: none;
	opacity:1;
	z-index:100;
	background-image:url('../images/video_close.png');
	background-size: 100%; //propotional resize
}