@font-face {
    font-family: 'Pt sans Narrow', Arial, sans serif;
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#ddd;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
	font-family: 'Pt sans Narrow', Arial, sans serif;
	background: transparent;
	font-weight: 100;
	font-size:15px;
	color: white;
	overflow-y: scroll;
	overflow-x: hidden;
}
.ie7 body{
	overflow:hidden;
}

a{
	color: #ddd;
	text-decoration: none;
}
.container{
	position: relative;
	text-align: justify;
	width:740px !important;
}
.clr{
	clear: both;
}
.container > header{
	padding: 30px 30px 10px 20px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    	text-align: justify;
}
.container > header h1{
	font-family: 'Pt sans Narrow', 'Arial Narrow', Arial, sans-serif;
	font-size: 20px;
	line-height: 20px;
	position: relative;
	font-weight: 100;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    	padding: 0px 0px 5px 0px;
}
.container > header h1 span{

}
.container > header h2, p.info{
	font-size: 16px;
	font-style: none;
	color: #ddd;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.container2{
	position: relative;
	text-align: justify;
	display:block;
	width:740px !important;
}
.container2 > header{
	padding:2em;
	margin: 0px 20px ;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    	text-align: justify;
}
.container2 > header h1{
	font-family: 'Pt sans Narrow', 'Arial Narrow', Arial, sans-serif;
	width:65%;
	font-size: 30px;
	line-height:30px;
	position: relative;
	font-weight: 100;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    	padding: 0px 0px 5px 0px;
}
.container2 > header h1 span{
font-size: 20px;
font-weight: 100;
}
.container2 p{
 	width:65%;
 	font-family: 'Pt sans Narrow', 'Arial Narrow', Arial, sans-serif;
        font-weight: 100;
        padding:0;
	font-size: 18px;
	line-height:22px;
	font-style: none;
	color:white;
	opacity:0.7;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
.container2 > header h2, p.info {
        font-family: 'Pt sans Narrow', 'Arial Narrow', Arial, sans-serif;
        font-weight: 100;
        padding:0;
	font-size: 17px;
	line-height:20px;
	font-style: none;
	color: #ddd;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	opacity:1.5;
}
/* Header Style */
.codrops-top{
	width:100%;
	font-family: 'Pt sans Narrow' Arial, sans-serif;
	line-height: 24px;
	font-size: 11px;
	width: 100% important;
	background:transparent;
	opacity: 0.9;
	text-transform: none;
	z-index: 9999;
	position: absolute;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #ddd;
	display: block;
	float: left;
}
.codrops-top a:hover{
	color: #fff;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: none;
	display: inline;
}

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.container{
    width:192px;
    padding:0 ! important;
/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}
.container2 header {
    width:280px;
    padding:0 ! important;
/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}
.container2 header h1{
 width:280px;
 padding:0;
 margin-top:15%;
 /* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}


.container2 p{
 width:280px;
 padding:0;
 /* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}
.codrops-top{
	width:300px;
	/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}
	
.mejs-container {
width:192px; 
height:105px;
padding:0;
/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 3s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 3s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 3s;
}

.mejs-inner{
      		width:100% !important;
      		height:105px !important;
      		}    		
.mejs-mediaelement video{
 		width:192px ! important;
 		height:105px ! important;
 		}
 .mejs-container{
 		width:192px;
 		height:105px;
 		}		
.player1{
 		width:320;
 		height:175;
 		}
.mejs-backlight  {
 		width:192px ! important;
 		height:105px ! important;
 		}	
.mejs-backlight-glow  {
 		width:192px ! important;
 		height:105px ! important;
 		}
.mejs-backlight-button mejs-backlight-activel{
 		height:10px;
 		background:yellow;
 		}
.mejs-overlay {
 		width:192px ! important;
 		height:105px;
 		}
.mejs-layer{
 		width:192px ! important;
 		height:105px;
 		}
.mejs-overlay-play {
 		width:192px ! important;
 		height:105px;
 		}	
.mejs-controls  {
 		width:192px ! important;
 		height:10px;
 		}	
}