/***** OVERLAY STYLES *****/

.overlay-video {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
  z-index: 5000;
  text-align: center;
	}
	.overlay-video .fade {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: black;
	}
	.overlay-video .content {
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -222px 0 0 -396px;
		width: 792px;
		height: 445px;
    background-color: black;
		}
	.overlay-video .content.jp-video-full {
		left: 0;
		top: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		}

	/** Close button **/
		.overlay-video .content .close {
      position: absolute;
      right: -40px;
      top: 0px;
      width: 21px;
      height: 21px;
      font-size: 20px;
      color: #fff;
      vertical-align: middle;
      text-decoration: none;
      border: none;
		}
		.overlay-video .content .close:hover {
			color: #c51230;
			text-decoration: none;
		}
		.overlay-video .content.jp-video-full .close {
			top: 0;
		}

	/** Iframe **/
		.overlay-video .content iframe {
			width: 100%;
			height: 100%;
		}

	/** jPlayer **/

		.overlay-video .jp-gui {
			width: 792px;
			height: 49px;
			background-color: black;
			}
		.overlay-video .content.jp-video-full .jp-gui {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 49px;
			}
			.overlay-video .jp-gui .jp-video-play { display: none !important; }
			.overlay-video .jp-gui .jp-interface {
				position: relative;
				width: 792px;
				height: 49px;
				}
			.overlay-video .content.jp-video-full .jp-gui .jp-interface {
				width: 100%;
				height: 49px;
			}

			/* Play / Pause */
				.overlay-video .jp-gui .jp-interface .jp-play-pause {
					position: relative;
					float: left;
					width: 49px;
					height: 49px;
					overflow: hidden;
					margin-right: 60px;
					}
					.overlay-video .jp-gui .jp-interface .jp-play-pause a {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 49px;
						height: 49px;
						background-color: #c51230;
						background-position:  center center;
						background-repeat: no-repeat;
						text-indent: -6767px;
						overflow: hidden;
					}
					.overlay-video .jp-gui .jp-interface .jp-play-pause a:hover    { background-color: black; }
					.overlay-video .jp-gui .jp-interface .jp-play-pause a.jp-play  { background-image: url('/assets/images/modules/icon-video.png'); }
					.overlay-video .jp-gui .jp-interface .jp-play-pause a.jp-pause { background-image: url('/assets/images/modules/icon-pause.png'); }

			/* Progress bar */
				.overlay-video .jp-gui .jp-interface .jp-progress {
					position: relative;
					float: left;
					width: 500px;
					height: 5px;
					margin-top: 23px;
					background-color: white;
					}
					.overlay-video .jp-gui .jp-interface .jp-progress .jp-current-time {
						position: absolute;
						top: -6px;
						right: 510px;
						font-size: 0.9em;
					}
					.overlay-video .jp-gui .jp-interface .jp-progress .jp-duration {
						position: absolute;
						top: -6px;
						left: 510px;
						font-size: 0.9em;
					}
					.overlay-video .jp-gui .jp-interface .jp-seek-bar { width: 100%; cursor: pointer; }
					.overlay-video .jp-gui .jp-interface .jp-progress .jp-play-bar {
						height: 5px;
						background-color: #c41230;
						cursor: pointer;
					}

			/* Controls holder */
				.overlay-video .jp-gui .jp-controls-holder {
					float: right;
					height: 49px;
					width: 122px;
					overflow: hidden;
					}

				/* Controls */
					.overlay-video .jp-gui .jp-controls-holder .jp-controls {
						position: relative;
						float: left;
						width: 16px;
						height: 17px;
						margin: 0 9px 0 0;
						padding: 14px 0 0 0;
						list-style: none;
						}
						.overlay-video .jp-gui .jp-controls-holder .jp-controls li {
							position: absolute;
							width: 0;
							height: 0;
							margin: 0;
							padding: 0;
							}
							.overlay-video .jp-gui .jp-controls-holder .jp-controls li a {
								position: absolute;
								width: 16px;
								height: 17px;
								text-indent: -6767px;
								overflow: hidden;
							}
							.overlay-video .jp-gui .jp-controls-holder .jp-controls li a.jp-mute { background-image: url('/assets/images/modules/icon-volume-max.png'); }
							.overlay-video .jp-gui .jp-controls-holder .jp-controls li a.jp-unmute { background-image: url('/assets/images/modules/icon-volume-min.png'); }
							.overlay-video .jp-gui .jp-controls-holder .jp-controls li a:hover {
								opacity: 0.75;
								-moz-opacity: 0.75;
								filter: alpha(opacity=75);
							}

				/* Volume bar */
					.overlay-video .jp-gui .jp-controls-holder .jp-volume-bar {
						position: relative;
						float: left;
						width: 48px;
						height: 3px;
						margin-top: 23px;
						background-color: white;
						}
						.overlay-video .jp-gui .jp-controls-holder .jp-volume-bar .jp-volume-bar-value {
							height: 3px;
							background-color: #c41230;
							cursor: pointer;
						}

				/* Full screen */
					.overlay-video .jp-gui .jp-controls-holder .jp-toggles {
						position: relative;
						float: left;
						width: 17px;
						height: 17px;
						margin: 14px 0 0 15px;
						padding: 0;
						list-style: none;
						}
						.overlay-video .jp-gui .jp-controls-holder .jp-toggles li {
							float: left;
							width: 17px;
							height: 17px;
							margin: 0;
							padding: 0;
							}
							.overlay-video .jp-gui .jp-controls-holder .jp-toggles li a.jp-full-screen {
								display: block;
								width: 17px;
								height: 17px;
								background-image: url('/assets/images/modules/icon-fullscreen.png');
								text-indent: -6767px;
								overflow: hidden;
							}
							.overlay-video .jp-gui .jp-controls-holder .jp-toggles li a:hover {
								opacity: 0.75;
								-moz-opacity: 0.75;
								filter: alpha(opacity=75);
							}

			/* Title */
				.overlay-video .jp-gui .jp-title { display: none; }




@media screen and (max-width: 900px) {
	.overlay-video .content {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 640px;
    max-height: 480px;
    color: white;
    vertical-align: middle;
    margin: 0px;
    left: 0;
    top: 0%;
  }
}

        
@media screen and (max-width: 420px) {
	.overlay-video .content {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 640px;
    max-height: 480px;
    color: white;
    vertical-align: middle;
    margin: 0px;
    left: 0;
    top: 15%;
  }

  .overlay-video .content .close {
    right: 0px;
    top: -40px;
  }
}