/** play and pause button styles **/
#myControls {
	margin-top: 5px;
	margin-left: 680px;
	width: 70px;
	z-index: 1;  
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
#myControls.play:before {
	content: "PLAY";
	/*  margin-left: 3px;*/
}
#myControls.pause:before {
	content: "PAUSE";
	/*    margin-left: -3px;*/
}

/** status states **/
#status {
	margin-top: 370px;
	margin-left: 270px;
	z-index: 2;
}
#status.clicktoplay:before {  
	content: "CLICK TO PLAY";    
}
#status.progress:before {  
	margin-top: 370px;
	margin-left: 330px;

}
#status.error:before { 
	content: "OH NO! ERROR!";    
	color: yellow;
}


#kartowith {
	color: #000;
	position: absolute;
	z-index: 2; 
	margin-top: 50px;
	margin-left: 396px;
	width:396px;
	text-align:center;
}

#kartowithout {
	color: #000;
	position: absolute;
	z-index: 2; 
	margin-top: 50px;
	width:396px;
	text-align:center;
}

/** showing and hidden states **/
#overlay.showing {
	opacity: 1.0;
}
.showing {
	opacity: 0.8;
	position: absolute;
	z-index: 1;
}
.hidden {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

/** animations to fade out the overlay image and "Click To Play" button **/
#overlay, #status {
	-webkit-transition-property: opacity, z-index;
	-webkit-transition-duration: 0.8s, 0s;
	-webkit-transition-delay: 0, 2s;
}

/** general body and button styles **/

.button {
	color: #fff;
	-webkit-border-radius: 30px; 
	-webkit-box-shadow: 4px 4px 8px #000;
	position: absolute; 
	height: 20px; 
	width: 200px; 
	padding: 17px; 
	background-color: #d4582a;
	font-size: 20px; 
	letter-spacing: 1px;
	text-shadow: 2px 2px 3px #003366;
	text-align: center; 
	line-height: 20px;
}
.active {  
	background-color: #c25026;
}
a {
	color:white;
	font-size: 12px;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #6699cc;
}
video {
	-webkit-box-shadow: 12px 12px 15px #777;
}