/**
 * WordPress Theme Mediaelement.js Stylesheet
 *
 * A base stylesheet to allow theme developers to more easily overwrite the styles for the WordPress media
 * player, which is mediaelement.js.  Theme developers are expected to handle colors, fonts, backgrounds,
 * and other stylistic elements.  This stylesheet exists as a base for layout and positioning.  However,
 * themes can also overwrite these things.
 *
 * This is a modified version of the default stylesheet provided by the MediaElement.js project.
 *
 * @version   20141221
 * @license   http://opensource.org/licenses/MIT
 * @author    John Dyer
 * @author    Justin Tadlock <justin@justintadlock.com>
 * @copyright Copyright (c) 2013 - 2014
 * @link      https://github.com/justintadlock/theme-mediaelement
 * @link      http://mediaelementjs.com
 */

/**
 * Table of Contents:
 * 01: Structure
 * 02: Media Element
 * 03: Layers
 * 04: Controls
 * 05: Clear
 * 06: Todo
 */

/**
 * 01: Structure - Layout of the major structural elements.
 * --------------------------------------------------------------------------- */

/* ====== Container ====== */

.mejs-container {
	display:         block;
	position:        relative;
	margin:          0;
	padding:         0;
	vertical-align:  baseline;
	outline:         none;
	font-size:       100%;
	background:      transparent;
	border:          none;
	text-decoration: none;
}

	/* === Fullscreen view === */

	.mejs-fullscreen {
		overflow: hidden !important;
	}

		.mejs-container-fullscreen {
			overflow: hidden;
			position: fixed;
			left:     0;
			top:      0;
			right:    0;
			bottom:   0;
			z-index:  1000;
		}

/**
 * 02: Media Element - Wrapper for the actual media HTML (<audio>, <video>).
 * --------------------------------------------------------------------------- */

.mejs-mediaelement {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
}

	/* Fullscreen */
	.mejs-container-fullscreen .mejs-mediaelement,
	.mejs-container-fullscreen video {
		width:  100%;
		height: 100%;
	}

	/* ?? */
	.me-plugin {
		position: absolute;
	}

	/* Embedding youtube.com, etc.??? */
	.mejs-embed,
	.mejs-embed body {
		overflow: hidden;
		width:    100%;
		height:   100%;
		margin:   0;
		padding:  0;
	}

	/* === Background ?? === */

	.mejs-background {
		position: absolute;
		top:      0;
		left:     0;
	}

	/* === Cannot play file link === */

	.me-cannotplay span {
		display: block;
		padding: 15px;
	}

/**
 * 03: Layers - Overlays and other layers to place over the media player.
 * --------------------------------------------------------------------------- */

	/* === Poster - <video poster="example.png"> - default video image. === */

	.mejs-poster {
		position:            absolute;
		top:                 0;
		left:                0;
		background-size:     contain;
		background-position: 50% 50%;
		background-repeat:   no-repeat;
	}

		:root .mejs-poster img {
			display: none;
		}

		.mejs-poster img {
			margin:  0;
			padding: 0;
			border:  none;
		}

	/* === Overlay === */

	.mejs-overlay {
	    position: absolute;
	    top:      0;
	    left:     0;
	}

		/* === Overlay play button === */

		.mejs-overlay-play {
			cursor: pointer;
		}

			/**
			 * Play button.  Assumes a 100px x 100px image.  Adjust top/left margins if using a different
			 * size.  Adjust by 1/2 of the height/width.
			 */
			.mejs-overlay-button {
				position: absolute;
				top:      50%;
				left:     50%;
				width:    100px;
				height:   100px;
				margin:   -50px 0 0 -50px;
			}

				/* Adjust background position or other items when play button is hovered. */
				.mejs-overlay:hover .mejs-overlay-button {
					background-position: 0 -100px;
				}

		/* === Overlay loading === */

		/**
		 * Loading image is expected to be 80px by 80px.  You'll need to adjust the width, height,
		 * and margin values (1/2 of size) for a different size.
		 */
		.mejs-overlay-loading {
			position:   absolute;
			width:      100%;
			height:     100%;
		}

			.mejs-overlay-loading span {
				position:   absolute;
				display:    block;
				top:        50%;
				left:       50%;
				width:      80px;
				height:     80px;
				margin:     -40px 0 0 -40px;
			}

	/* === Captions Layer (not supported in WP core as of 3.6). === */

	/* Example: http://mediaelementjs.com/examples/?name=translation */

	.mejs-captions-layer {
		position:   absolute;
		bottom:     0;
		left:       0;
		text-align: center;
	}

		.mejs-captions-layer a {
			text-decoration: underline;
		}

		.mejs-captions-position {
			position: absolute;
			width:    100%;
			bottom:   15px;
			left:     0;
		}

		.mejs-captions-position-hover {
			bottom: 45px;
		}

			.mejs-captions-text {
				padding:    3px 5px;
			}

	/* ====== Chapters Layer (not supported in WP core as of 3.6). ====== */

	/* Example: http://mediaelementjs.com/examples/?name=chapters */

	.mejs-chapters {
		position: absolute;
		top:      0;
		left:     0;
		width:    10000px;
		z-index:  1;
	}

		.mejs-chapter {
			overflow:   hidden;
			position:   absolute;
			float:      left;
			border:     none;
		}

			.mejs-chapter-block {
				display:       block;
				padding:       5px;
				border-right:  solid 1px;
				border-bottom: solid 1px;
				cursor:        pointer;
			}

				.mejs-chapter-block-last {
					border-right: none;
				}

				.mejs-chapter-block .ch-title {
					display:       block;
					white-space:   nowrap;
					text-overflow: ellipsis;
					margin:        0 0 3px;
				}

					.mejs-chapter-block .ch-timespan {
						display:       block;
						white-space:   nowrap;
						text-overflow: ellipsis;
						margin:        3px 0 4px;
					}

	/* === Postroll Layer === */

	.mejs-postroll-layer {
		overflow:   hidden;
		position:   absolute;
		bottom:     0;
		left:       0;
		width:      100%;
		height:     100%;
		z-index:    1000;
	}

		.mejs-postroll-layer-content {
			width:  100%;
			height: 100%;
		}

		.mejs-postroll-close {
			position:   absolute;
			right:      0;
			top:        0;
			padding:    4px;
			cursor:     pointer;
			z-index:    100;
		}

/**
 * 04: Controls - The media player control panel.
 * --------------------------------------------------------------------------- */

.mejs-controls {
	position:        absolute;
	list-style-type: none;
	margin:          0;
	padding:         0;
	bottom:          0;
	left:            0;
	width:           100%;
	height:          30px;
}

	/* Individual control sections. */
	.mejs-controls > div,
	.mejs-controls > a {
		display:     block;
		float:       left;
		margin:      0;
		padding:     0;
		width:       26px;
		height:      26px;
		border:      none;
		font-size:   11px;
		line-height: 11px;
	}

	/* Individual buttons. */
	.mejs-button button {
		display:  block;
		position: absolute;
		width:    16px;
		height:   16px;
		margin:   7px 5px;
		padding:  0;
		cursor:   pointer;

		border:          none;
		font-size:       0;
		line-height:     0;
		text-decoration: none;
	}

		.mejs-button button:focus {
			outline: solid 1px;
		}

	/* === Play/Pause === */

		.mejs-play button {
			background-position: 0 0;
		}

		.mejs-pause button {
			background-position: 0 -16px;
		}

		.mejs-stop button {
			background-position: -112px 0;
		}

	/* === Media Time (current time) === */

	.mejs-controls .mejs-time {
		overflow:   hidden;
		display:    block;
		width:      auto;
		height:     17px;
		padding:    8px 3px 0;
		text-align: center;
		box-sizing: content-box;
	}

		/* Individual elements within the time wrapper. */
		.mejs-time span {
			display: block;
			float:   left;
			width:   auto;
			margin:  2px 2px 0 0;
		}

	/* Wrapper div for the time rail. */

	.mejs-controls .mejs-time-rail {
		direction: ltr;
		width:     200px;
		padding:   5px 5px 0;
	}

		/* Individual elements within the time rail */
		.mejs-time-rail span,
		.mejs-time-rail > a {
			display:  block;
			position: absolute;
			height:   10px;
			cursor:   pointer;
		}

		/* Total time. */
		.mejs-time-rail .mejs-time-total {
			position:   relative;
			margin:     5px 0;
		}

		/* Buffering */
		.mejs-time-rail .mejs-time-buffering {
			width: 100%;

			/* Theme authors: Overwrite just this portion for custom colors. */
				background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
				background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
			background-image:        linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
			/* === */

				-webkit-background-size: 15px 15px;
				-moz-background-size:    15px 15px;
				-o-background-size:        15px 15px;
			background-size:                15px 15px;

				-webkit-animation: buffering-stripes 2s linear infinite;
				-moz-animation:    buffering-stripes 2s linear infinite;
				-ms-animation:      buffering-stripes 2s linear infinite;
				-o-animation:       buffering-stripes 2s linear infinite;
			animation:                buffering-stripes 2s linear infinite;
		}

			/* Keyframes */
				@-webkit-keyframes buffering-stripes {
					from { background-position: 0 0;    }
					to   { background-position: 30px 0; }
				}
				@-moz-keyframes buffering-stripes {
					from { background-position: 0 0;    }
					to   { background-position: 30px 0; }
				}
				@-ms-keyframes buffering-stripes {
					from { background-position: 0 0;    }
					to   { background-position: 30px 0; }
				}
				@-o-keyframes buffering-stripes {
					from { background-position: 0 0;    }
					to   { background-position: 30px 0; }
				}
			@keyframes buffering-stripes {
				from { background-position: 0 0;    }
				to   { background-position: 30px 0; }
			}

		/* Time loaded */
		.mejs-time-rail .mejs-time-loaded,
		.mejs-time-rail .mejs-time-current {
			width:      0;       /* Don't overwrite. Mediaelement will adjust the width. */
		}

		/* Handle for adjusting current time. */
		.mejs-time-rail .mejs-time-handle {
			display:    none;
			position:   absolute;
			top:        -2px;
			width:      10px;
			margin:     0;
			cursor:     pointer;
			text-align: center;
		}

		/* Time float (Displays time when hovering cursor over time rail). */
		.mejs-time-rail .mejs-time-float {
			display:     none;
			position:    absolute;
			top:         -26px;
			width:       36px;
			height:      17px;
			margin-left: -18px;
			border-width: 1px;
			border-style: solid;
			text-align:  center;
		}

			/* Current time position hovering. */
			.mejs-time-rail .mejs-time-float-current {
				display:    block;
				left:       0;
				margin:     2px;
				width:      30px;
				text-align: center;
			}

			/* Pointer at the botton of the time float. */
			.mejs-time-float-corner {
				display:      block;
				position:     absolute;
				top:          15px;
				left:         13px;
				width:        0;
				height:       0;
				line-height:  0;
				border:       solid 5px;
				/* Note: top corner needs color. Others should be transparent. */
				border-color: #eee transparent transparent transparent;

					-webkit-border-radius: 0;
					-moz-border-radius:    0;
				border-radius: 0;
			}


	/* === Fullscreen === */

	/* Fullscreen button */
	.mejs-fullscreen-button button {
		background-position: -32px 0;
	}
	.mejs-unfullscreen button {
		background-position: -32px -16px;
	}

	/* === Volume === */

	/* Volume button */
	.mejs-controls .mejs-volume-button {
		position: relative;
	}

		.mejs-volume-button .mejs-mute button {
			background-position: -16px -16px;
		}

		.mejs-volume-button .mejs-unmute button {
			background-position: -16px 0;
		}

		/* Vertical volume slider (wrapper). */
		.mejs-volume-button .mejs-volume-slider {
			display:    none;
			position:   absolute;
			top:        -115px;
			left:       0;
			width:      25px;
			height:     115px;
			margin:     0;
			z-index:    1;
		}

		/* Volume total. */
		.mejs-volume-button .mejs-volume-slider .mejs-volume-total {
			position:   absolute;
			top:        8px;
			left:       11px;
			width:      2px;
			height:     100px;
			margin:     0;
		}

		/* Volume current */
		.mejs-volume-button .mejs-volume-slider .mejs-volume-current {
			position:   absolute;
			top:        8px;
			left:       11px;
			width:      2px;
			height:     100px;
			margin:     0;
		}

		/* Volume slider handle */
		.mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
			position:   absolute;
			top:        -3px;
			left:       4px;
			width:      16px;
			height:     6px;
			margin:     0;
			cursor:     N-resize;
		}

	/* === Horizontal volume slider (audio) === */
	.mejs-controls .mejs-horizontal-volume-slider {
		height:   26px;
		width:    60px;
		position: relative;
		display:  table;
	}

		/* Volume total. */
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
			position:   absolute;
			top:        21px;
			left:       0;
			width:      50px;
			height:     8px;
			margin:     0;
			padding:    0;
			font-size:  1px;
		}

		/* Volume current. */
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
			position:   absolute;
			top:        21px;
			left:       0;
			width:      50px;
			height:     8px;
			margin:     0;
			padding:    0;
			font-size:  1px;
		}

		/* Volume handle. */
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
			display: none;
		}

	/* === Loop Button === */

		.mejs-loop-off button {
			background-position: -64px -16px;
		}

		.mejs-loop-on button {
			background-position: -64px 0;
		}

	/* === Backlight button === */

		.mejs-backlight-off button {
			background-position: -80px -16px;
		}
		.mejs-backlight-on button {
			background-position: -80px 0;
		}

	/* === Picture controls button === */

	.mejs-controls .mejs-picturecontrols-button {
		background-position: -96px 0;
	}

	/* === Captions (note that WP core doesn't support these as of 3.6). === */

	/* Example: http://mediaelementjs.com/examples/?name=translation */

	/* Captions button wrapper */
	.mejs-controls .mejs-captions-button {
		position: relative;
	}

		.mejs-captions-button button {
			background-position: -48px 0;
		}

		.mejs-captions-button .mejs-captions-selector {
			overflow:   hidden;
			visibility: hidden;
			position:   absolute;
			bottom:     26px;
			right:      -10px;
			width:      130px;
			height:     100px;
			padding:    10px;
		}

			.mejs-captions-button .mejs-captions-selector ul {
				list-style-type: none;
				overflow:        hidden;
				display:         block;
				margin:          0;
				padding:         0;
			}

				.mejs-captions-button .mejs-captions-selector li {
					list-style-type: none;
					overflow:        hidden;
					display:         block;
					margin:          0 0 6px;
					padding:         0;
				}

					.mejs-captions-button .mejs-captions-selector input {
						clear:  both;
						float:  left;
						margin: 3px 3px 0 5px;
					}

					.mejs-captions-button .mejs-captions-selector label {
						float:   left;
						width:   100px;
						padding: 4px 0 0;
					}

		.mejs-captions-button .mejs-captions-translations {
			margin: 0 0 5px;
		}

	/* === Source Chooser === */

	.mejs-controls .mejs-sourcechooser-button {
		position: relative;
	}

		.mejs-sourcechooser-button button {
			background-position: -128px 0;
		}

		.mejs-sourcechooser-selector {
			overflow:   hidden;
			visibility: hidden;
			position:   absolute;
			bottom:     26px;
			right:      -10px;
			width:      130px;
			height:     100px;
			padding:    10px;
			border:     solid 1px transparent;
		}

			.mejs-sourcechooser-selector ul {
				list-style-type: none;
				overflow:        hidden;
				display:         block;
				margin:          0;
				padding:         0;
			}

				.mejs-sourcechooser-selector li {
					list-style-type: none;
					overflow:        hidden;
					display:         block;
					margin:          0 0 6px;
					padding:         0;
				}

					.mejs-sourcechooser-selector li input {
						clear:  both;
						float:  left;
						margin: 3px 3px 0 5px;
					}

					.mejs-sourcechooser-selector li label {
						float:       left;
						width:       100px;
						padding:     4px 0 0;
						font-size:   10px;
						line-height: 15px;
					}

/**
 * 05: Clear and Off-screen- Clears elements. Hides screen-reader text.
 * --------------------------------------------------------------------------- */

.mejs-clear,
.wp-playlist-item {
    clear: both;
}

.mejs-offscreen {
	position: absolute;
	top:      -9999em;
}

	.ltr .mejs-offscreen { left:  -9999em; }

	.rtl .mejs-offscreen { right: -9999em; }

/**
 * 06: Playlists - WordPress-created playlists.
 * --------------------------------------------------------------------------- */

.wp-playlist {
	margin:      0 0 1.5rem;
	padding:     1.5rem;
	border:      1px solid;
}

	.wp-playlist video {
		display:   inline-block;
		max-width: 100%;
	}

	.wp-playlist audio {
		display:   none;
		max-width: 100%;
		width:     100%;
	}

	.wp-playlist .mejs-container {
		margin: 0;
		width:  100%;
	}

		.wp-playlist .mejs-controls .mejs-button button {
			outline: 0;
		}

	/* All captions. */
	.wp-playlist-caption {
		max-width:     88%;
		overflow:      hidden;
		text-overflow: ellipsis;
	}

	/* Currently playing. */
	.wp-playlist-current-item {
		overflow: hidden;
	}

		.wp-playlist-current-item img {
			max-width:    60px;
			height:       auto;
		}
			.ltr .wp-playlist-current-item img {
				float:        left;
				margin-right: 1.5rem;
			}
			.rtl .wp-playlist-current-item img {
				float:        right;
				margin-left:  1.5rem;
			}

		.wp-playlist-item-meta {
			display: block;
		}

	/* Track list after the current item. */
	.wp-playlist-tracks {
		margin-top: 1.5rem;
	}

		/* Playlist items in the list (not currently playing). */
		.wp-playlist-item {
			overflow:      hidden;
			cursor:        pointer;
			margin-bottom: 0.75rem;
		}

			.wp-playlist-item:last-child {
				margin-bottom: 0;
				border-bottom: none;
			}

		/* Currently-playing item in the track list. */
		.wp-playlist-playing { font-weight: bold; }

			/* Captions in the list. */

				.ltr .wp-playlist-item .wp-playlist-caption { float: left;  }
				.rtl .wp-playlist-item .wp-playlist-caption { float: right; }

				.ltr .wp-playlist-item .wp-playlist-item-length { float: right; }
				.rtl .wp-playlist-item .wp-playlist-item-length { float: left;  }

/**
 * 07: Todo - Items that need to be worked on.
 * --------------------------------------------------------------------------- */

/* === Context menu ??? === */

.mejs-contextmenu {
	position:   absolute;
	top:        0;
	left:       0;
	width:      150px;
	padding:    10px;
	border:     solid 1px;
	z-index:    1001;
}

	.mejs-contextmenu .mejs-contextmenu-separator {
		height:     1px;
		margin:     5px 6px;
		font-size:  0;
	}

	.mejs-contextmenu .mejs-contextmenu-item {
		padding:   4px 6px;
		font-size: 12px;
		cursor:    pointer;
	}

/****************************************************************************************/

.mejs-controls a,
.mejs-controls a:hover,
.mejs-controls a:focus {
	text-shadow: none;
	background: transparent;
}

/* Media player */
.mejs-controls .mejs-button button::after,
.mejs-overlay-button::after,
.media-info-toggle::after,

/* Playlists */
.wp-playlist-playing .wp-playlist-caption::before,
.wp-playlist-item-meta::before {

	display:        inline-block;
	font-family:    FontAwesome;
	font-size:      16px;
	font-style:     normal;
	font-weight:    normal;
	font-variant:   normal;
	line-height:    1;
	vertical-align: middle;

	-webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}


/**
 * WordPress playlist
 *
 * Customizes the output of the media playlist.  For the full media playlist styles, see the
 * `mediaelement/medialement.css` stylesheet.
 */

.wp-playlist {
	padding: 0;
	border:  none;
}

	.wp-playlist a,
	.wp-playlist a:hover,
	.wp-playlist a:focus {
		text-shadow: none;
		background: transparent;
		text-decoration: none;
	}
	.wp-playlist a:hover,
	.wp-playlist a:focus { text-decoration: underline; }

	.wp-video-playlist { padding-top: 0;      }

	/* Currently playing. */
	.wp-playlist-current-item {
		padding: 1.5rem;
	}

		.wp-playlist-light .wp-playlist-current-item {
			border-width: 1px 1px 0;
			border-style: solid;
		}

		.wp-playlist-current-item img { max-width: 100px; }

		.wp-playlist-item-meta { font-size: 1rem; }

		.wp-playlist .mejs-controls .mejs-playpause-button { margin-left: 1rem; }
		.wp-playlist .mejs-controls .mejs-time { margin-right: 1rem; }

	/* Media player. */
	.wp-playlist-dark .mejs-controls {
		padding-bottom: 5px;
		border-bottom: 1px solid;
	}

	/* Playlist tracks (list of items). */

	.wp-playlist-tracks {
		margin-top: 0;
		padding:    1rem 1.5rem;
		border:     1px solid;
	}

		.wp-playlist-dark .wp-playlist-tracks { border: none; }

		.wp-playlist-item {
			margin:        0;
			padding:       0.5rem 0;
			font-size:     1rem;
			border-bottom: 1px solid;
		}

			.wp-playlist-item a { color: inherit; border: none; }

			.wp-playlist-item-title { text-transform: capitalize; }

		.wp-playlist-playing { font-weight: normal; }

/**
 * WordPress media player.
 *
 * This overwrites various elements of the media player styles included.  For the full media player styles,
 * see the `mediaelement/medialement.css` stylesheet.
 */

.mejs-container { margin-bottom: 1.5rem; }


	.wp-audio-shortcode.mejs-container { min-height: 51px !important; }

	.mejs-controls {
		width:           100%;
		height:          51px;
		padding:         0;
		-moz-box-sizing: border-box;
		     box-sizing: border-box;
	}

	.audio-shortcode-wrap .mejs-controls {
		padding-left: 16px;
		padding-right: 6px;
	}

	.wp-video-shortcode .mejs-controls {
		border-top:    1px solid;
		border-bottom: 1px solid;
		opacity:       0.8;
		bottom: 0;
	}

	.wp-audio-shortcode .mejs-controls { top: 0; }
	.audio-shortcode-wrap .mejs-controls { top: 35px; }

	.mejs-controls > div { margin-top: 10px; }

		/* Fix for last item dropping below the controls. */
		.mejs-controls > :last-child {
			position: relative;
			float:    right;
		}

		.wp-audio-shortcode .mejs-mediaelement {
			position: relative;
			top:      0;
			left:     0;
			width:    100%;
			height:   100%;
		}

		.mejs-button button {
			height:     16px;
			width:      16px;
		}

			.mejs-fullscreen-button button,
			.mejs-playpause-button button,
			.mejs-volume-button button { background: none; }

			.mejs-button button:focus { outline: 1px solid; }

		.mejs-time > span,
		.mejs-time .mejs-currenttime,
		.mejs-time .mejs-duration {
			font-size: 14px;
		}

		.mejs-volume-button .mejs-volume-slider {
			width:       40px;
			margin-left: -10px;
		}

			.mejs-volume-button .mejs-volume-slider .mejs-volume-total,
			.mejs-volume-button .mejs-volume-slider .mejs-volume-current {
				top:    10px;
				left:   50%;
				width:  4px;
				margin: 0 0 0 -2px;
			}

			.mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
				left:   50%;
				width:  20px;
				height: 4px;
				margin: 0 0 0 -10px;
			}

	.mejs-overlay-button { margin: -32px 0 0 -32px !important; }

		.mejs-overlay-play .mejs-overlay-button::after {
			content:       '\f01d';
			padding:       0;
			font-size:     64px;
			line-height:   64px;
		}


	.mejs-fullscreen-button button::after { content: '\f065'; }
	.mejs-play button::after              { content: '\f04b'; }
	.mejs-pause button::after             { content: '\f04c'; }
	.mejs-volume-button button::after     { content: '\f028'; }
	.mejs-unmute button::after            { content: '\f026'; }

	/* Media playlist */
	.wp-playlist-playing .wp-playlist-caption::before          { content: '\f04b'; }
	.wp-playlist-current-item .wp-playlist-item-title::before  { content: '\f001'; }
	.wp-playlist-current-item .wp-playlist-item-album::before  { content: '\f07c'; }
	.wp-playlist-current-item .wp-playlist-item-artist::before { content: '\f007'; }

	.wp-playlist-playing .wp-playlist-caption::before,
	.wp-playlist-item-meta::before { padding-bottom: 2px; }

	.ltr .wp-playlist-playing .wp-playlist-caption::before { padding-right: 7px; }
	.rtl .wp-playlist-playing .wp-playlist-caption::before { padding-left: 7px; }

	.ltr .wp-playlist-item-meta::before { padding-right:  10px; }
	.rtl .wp-playlist-item-meta::before { padding-left:   10px; }


		.mejs-controls>div, .mejs-controls>a { width: 16px; margin: 0; }

		.mejs-controls > div { margin: 0; }

		.mejs-controls > .mejs-button { margin-right: 0.75rem; }

		.mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
			top: 11px;
			left: 5px;
		}

		.mejs-controls .mejs-time-rail {
			height: 4px;
			margin: 0 0 0.5rem;
			padding: 0;
			padding: 0px 4px;
			box-sizing: border-box;
		}
		.mejs-time-rail,
		.mejs-time-total {
			float: none !important;
			width: 100% !important;
			padding: 0 !important;
		}

		.mejs-time-rail .mejs-time-total {
			margin: 0;
		}


		.mejs-time-rail span,
		.mejs-time-rail > a { height: 100%; }


		.mejs-time-rail .mejs-time-float {
			top:         -46px;
			height:      35px;
			width:       80px;
			margin-left: -40px;
		}

		.mejs-time-rail .mejs-time-float-current {
			width:      100%;
			margin:     12px 0;
			font-size:  14px;
			box-sizing: border-box;
		}

		.mejs-time-rail .mejs-time-float-corner {
			top:  36px;
			left: 35px;
		}

		.mejs-controls .mejs-playpause-button { margin-left: 0.75rem; }
		.mejs-controls .mejs-time { margin-right: 0.75rem; }
		.mejs-time > span { opacity: 0.5; padding: 0 3px; }
		.mejs-time > .mejs-currenttime,
		.mejs-time > .mejs-duration { opacity: 1; padding: 0; }

		.wp-video-shortcode .mejs-time {
			float: left;
			margin-left: 8px;
		}

		.mejs-controls .mejs-fullscreen-button {
			float:        right;
			margin-right: 1.5rem;
			margin-left:  8px;
		}

	/* Wrapper added when the audio player has an accompanying image. */

	.audio-shortcode-wrap {
		position:      relative;
		max-height:    136px;
		overflow:      hidden;
		margin-bottom: 1.5rem;
	}

		.audio-image {
			position:    relative;
			border:      none;
			margin:      0;
			padding:     8px 0 0;
			max-width:   20%;
			max-height:  131px;
			height:      auto;
		}

			.ltr .audio-image { left: 0;  padding-left: 8px; }
			.rtl .audio-image { right: 0; padding-right: 8px; }

		.audio-shortcode-wrap .wp-audio-shortcode {
			position:   absolute !important;
			top:        50%;
			margin-top: -1.5rem;
			clear:      none;
			width:      79% !important;
		}

		.audio-shortcode-wrap .wp-audio-shortcode .mejs-controls { top: 10px; }

			.ltr .audio-shortcode-wrap .wp-audio-shortcode { left: 20%; }
			.rtl .audio-shortcode-wrap .wp-audio-shortcode { left: 0; }

/* Need this to force overwrite the inline style medialement adds to make the player 30px. */
.mejs-audio { height: 51px !important; }

.wp-video,
.wp-video-shortcode { max-width: 100%; }
