/****************************************************************
 * CONTROLS
 ****************************************************************/
 .video .flex-video {
 	background-color: rgba(255, 255, 255, .5);
 }
 .video .flex-video.widescreen {
 	padding-bottom: 53.65%;
 }
 .video .flex-video.widescreen.fullscreen {
 	padding-bottom: 0;
 }
 .video .flex-video.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    padding: 0;
    
    background-color: rgba(255, 255, 255, 1);
}
.video .flex-video:fullscreen {
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: rgba(255, 255, 255, 1);
}
.video .flex-video:-moz-full-screen {
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: rgba(255, 255, 255, 1);
}
.video .flex-video:-webkit-full-screen {
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: rgba(255, 255, 255, 1);
}
.video .flex-video.fullscreen video {
	background-color: #000;
}
 
.video video {
	display: none;
	width: 100%;
	background-color: #F4F2F1;
	
	opacity: 0;
    visibility: hidden;
	
	-webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}
.video video[src] {
	display: block;
}
.video video[src].loaded {
	visibility: visible;
}
.video video[src].ready {
	background-color: #FFF;
	opacity: 1;
}
 
.video .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1001;
    
    color: #FFF;
    background-color: #662D91;
    
    line-height: 0;
    font-size: 0;
    direction: ltr;
    
    opacity: 0;
    visibility: hidden;
    
    -webkit-transition: .4s ease;
    -moz-transition: .4s ease;
    transition: .4s ease;
}
.video .controls * {
	direction: ltr;
}
.video .controls.visible {
    bottom: -8px;
    opacity: 0;
    visibility: visible;
}

.video .controls.visible.show, 
.video:hover .controls.visible {
    bottom: 0;
    opacity: 1;
}

.video .controls div {
    display: inline-block;
}

.video .controls .section {
    padding: 6px 18px;
    border-right: 1px solid #330a56;
}
.video .controls .section.expandable {
    position: absolute;
    width: 100%;
    padding-right: 201px;
    border: none;
}
.mobile .video .controls .section.expandable {
    padding-right: 139px;
}
.video .controls .section.right {
    position: absolute;
    right: 0;
    float: none;
    border: none;
    border-left: 1px solid #330a56;
}


.video .controls .toggle,
.video .controls .volume, 
.video .controls .dragger, 
.video .controls .fullscreen {
    display: inline-block;
    height: 20px;
    width: 24px;
    cursor: pointer;
    
    background: url(data:image/png;base64,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) no-repeat 0 0;
    
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
}
.video .controls .toggle:hover,
.video .controls .volume:hover, 
.video .controls .dragger:hover, 
.video .controls .fullscreen:hover {
    opacity: .8;
}


.video .controls .toggle {
    background-position: 0 0px;
}
.video .controls .toggle.pause {
    background-position: 0 -20px;
}
.video .controls .toggle.replay {
    background-position: 0 -40px;
}


.video .controls .volume {
    background-position: -24px 0px;
}
.video .controls .volume.off {
    background-position: -24px -20px;
}


.video .controls .seek {
    position: relative;
    width: 100%;
    cursor: pointer;
}


.video .controls .seek .dragger {
    position: relative;
    left: 0;
    margin-left: -12px;
    
    background-position: -72px 0px;
}
.video .controls .seek .timeline {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -1px;

    color: white;
    border-bottom: 2px solid #330a56;
}
.video .controls .seek .timeline.buffered {
    width: 0;
    border-bottom-color: #e87a72;
}
.video .controls .seek .timeline.elapsed {
    width: 0;
    border-bottom-color: #f4f2f1;
}


.video .controls .fullscreen {
    background-position: -48px 0px;
}
.video .controls .fullscreen.off {
    background-position: -48px -20px;
}


.video .loader {
 	display: none;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	height: auto;
 	width: auto;
 	margin: -16px 0 0 -16px;
 }
 .video video[src] ~ .loader {
 	display: block;
 }
 .video video.loaded ~ .loader {
 	display: none;
 }
 
 .video .error {
 	display: none;
 	position: absolute;
 	top: 45%;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }
 .video .error.visible {
 	display: block;
 }
 
 .video .error.visible ~ .loader {
 	display: none;
 }


/****************************************************************
 * MOBILE 
 ****************************************************************/
@media only screen and (max-width: 760px) {
	 .video .flex-video.widescreen {
	 	padding-bottom: 56.65%;
	 }
	 
    .video .controls.visible {
        bottom: 0px;
        opacity: .7;
    }
    
}