video {
	width:100%;
	height:auto;
}

/* controls */
.controls .custom-controls-video {
	display: flex;
	align-items: center;
	background-color: #353995;
}

.controls .custom-controls-video .progress {
	cursor:pointer;
}

.controls progress {
	width: 100%;
	display: block;
	height: 1.25rem;
	margin-top: 0.125rem;
	border: 1px solid #aaa;
	overflow: hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #4e4f4e;	
}

.controls progress span {
	width: 0%;
	height: 100%;
	display: inline-block;
	background-color:#00b6f0;	
}

.video-container-main[data-fullscreen=false] {
	position: relative;
}

.video-container-main[data-fullscreen=false] .controls {
	position: absolute;
	bottom: .4rem;
	width: 100%;
	z-index: 2147483647;
}

.progress {
	width: 75%;
	margin-right: .5rem;
}

.icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	stroke-width: 0;
	stroke: white;
    fill: white;
    margin-right: .5rem;
	margin-left: .5rem;
}

.icon:hover {
	cursor: pointer;
	stroke: #00b6f0;
	fill: #00b6f0;
}

/* full-screen */
html:-ms-fullscreen {
	width: 100%;
}

:-webkit-full-screen {
	background-color: transparent;
}

.video-container-main[data-fullscreen=true] video::-webkit-media-controls {
	display:none !important;
}
.video-container-main[data-fullscreen=true] {
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.video-container-main[data-fullscreen=true] video {
	height:auto;
}
.video-container-main[data-fullscreen=true] .controls {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 2147483647;
}
.video-container-main[data-fullscreen=true] .controls .progress {
	width: 85%;
}