/* Css resets */
* {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
}
ul {
	list-style: none;
}
img {
	max-width: 100%;
	height: auto;
}
body {
	font-family: 'cambria', serif;
	background-color: #2c73cc;
}
h1,h2,h2,h3,h4,h5 {
	margin:0.3em 0 0.5em 0;
}
/* End css resets */

/* Css default */
@media (min-width:768px){
	.container {
		width:760px;
	}
}
.container {
	margin:3vh auto;
	padding:10px;
}
.page-title {
	margin:17px auto;
	text-align: center;
	color:#fff;
	font-size: 17px;
}
.page-title h1 {
	font-size:40px;
	line-height: 1;
}
.page-title a{
	color:#ff7777;
	text-decoration: none;
}
.page-title a:hover{
	text-decoration: underline;
	color: #ff3333;
}
/* End css default */


.video-player{
	position: relative;
	width:100%;
}
	#controls {
		position: absolute;
		background-color: rgba(0,0,0,0.5);
		bottom:0;
		right:0;
		left: 0;
		padding:5px;
	}
	#controls >* {
		background-color: transparent;
		color:#fff;
		border:0;
		cursor: pointer;
		display: inline-block;
		position: relative;
	}
	#controls >*:focus {
		outline: none;
	}

	#controls i[class^="flaticon-"] {
		padding:3px;
		font-size: 13px;
	}

	.progress-bar {
		width:73%;

	}
	#progress1, #progress2 {
		width:100%;
		-webkit-appearance:none;
		vertical-align: middle;
	}
	#progress1 {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}


	#progress2::-webkit-progress-bar {
		overflow: hidden;
		-webkit-appearance:none;
		height:13px;
		border-radius: 3px;
		background: #eee;
	}
	#progress2::-webkit-progress-value {
		background: #2C73CC;
	}

	#progress2::-moz-progress-bar {
		overflow: hidden;
		height:13px;
		border-radius: 3px;
		background: #eee;
	}
	#progress2::-moz-progress-value {
		background: #2C73CC;
	}

	#volume {
		text-align: left;
		vertical-align: middle;
		left: 0;
		width: 10%;
		-webkit-appearance: none;
	}
	#volume::-webkit-slider-runnable-track {
		-webkit-appearance:none;
		width: 100%;
		height:3px;
		border:none;
		background: #fff;
	}
	#volume::-moz-range-track {
		width: 100%;
		height:3px;
		border:none;
		background: #fff;
	}
	#volume::-ms-track {
		width: 100%;
		height:3px;
		border:none;
		background: #fff;
	}


	#volume::-webkit-slider-thumb {
		-webkit-appearance:none;
		width: 5px;
		margin-top: -6px;
		height:15px;
		border:none;
		background: #eee;
	}
	#volume::-moz-range-thumb {
		width: 5px;
		height:15px;
		border:none;
		background: #eee;
	}
	#volume::-ms-thumb {
		width: 5px;
		height:15px;
		border:none;
		background: #eee;
	}