/* arrows in slider https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=306544 */
/* search icon is 'U' */

/*
Theme Name: RAN
Theme URI: http://www.elegantthemes.com/gallery/
Version: 1.0
Description: 2 Column theme from Elegant Themes
Author: Ellen Kronen - Leumesin Design
Author URI: http://www.elegantthemes.com
Template: Divi
*/

/* HEADER */
.et-l--header { position: relative; z-index: 5; }

/* HEADER LOGIN */
.header-login-form.et_pb_newsletter.et_pb_login .et_pb_newsletter_form { padding: 0; width: 100%; }
.header-login-form .et_pb_login_form form { display: flex; justify-content: flex-end; align-items: center; }
.header-login-form .et_pb_login_form .et_pb_contact_form_field { padding-bottom: 0px; margin-right: 2px; }
.header-login-form .et_pb_forgot_password { display:none; }
.header-login-form .et_pb_newsletter_description_content { white-space: nowrap; }
.header-login-form .et_pb_login_form .input, .header-login-form .et_pb_login_form input[type=password] { padding: 2px 5px !important; width: 90px; }
.et_mobile_menu { margin-left: 0; }
.et_mobile_menu li a { padding: 2px 5%; display: block; font-size: 12px; text-transform: unset !important; font-weight: bold; }

/* WOO General */
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img,
.et_pb_grid_item.project img { -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; }
.woocommerce-loop-category__title, .woocommerce-loop-product__title { font-size: 14px; line-height: 1.2; padding: .5em 0; }
.wp-post-image { -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; }
.icon-lock:before { content: "\e06c"; font-family: 'ETmodules'; }
.woocommerce-mini-cart__buttons .button { display: inline-block; white-space: nowrap; }

/* NAV */
.menu-item.feature { padding: 4px 20px; color: #fff; text-transform: uppercase; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0,0,0,.4); background: rgb(170,82,86); background: -moz-linear-gradient(top,  rgba(170,82,86,1) 0%, rgba(173,0,11,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,82,86,1)), color-stop(100%,rgba(173,0,11,1)));	background: -webkit-linear-gradient(top,  rgba(170,82,86,1) 0%,rgba(173,0,11,1) 100%); background: -o-linear-gradient(top,  rgba(170,82,86,1) 0%,rgba(173,0,11,1) 100%); background: -ms-linear-gradient(top,  rgba(170,82,86,1) 0%,rgba(173,0,11,1) 100%); background: linear-gradient(to bottom,  rgba(170,82,86,1) 0%,rgba(173,0,11,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa5256', endColorstr='#ad000b',GradientType=0 );  }

/* ORDER RECEIEVED */
body.woocommerce-order-received .main_title { background-color: #b90a35; color: #fff; font-size: 60px; font-weight: 800; padding: 30px 30px 10px 30px; margin-bottom: 0; display: block; }
body.woocommerce-order-received .woocommerce-thankyou-order-received { background-color: #b90a35; color: #fff; font-size: 18px; letter-spacing: 0.3px; padding: 0 40px 30px; margin-bottom: 60px; display: block; }
body.woocommerce-order-received .woocommerce-thankyou-order-received a { text-decoration: underline; color: #fff; }

/* Non- Divi Templates Kat */
.project .entry-content { padding: 0; font-size: 20px; line-height: 1.8em; }
.project .entry-content h1 { font-size: 60px; font-weight: 800; letter-spacing: 1px; line-height: 1.2em; padding-bottom: 0.5em; }
.project .entry-content h2 { font-size: 26px; font-weight: 700; color: #fff; }
.project .entry-content h4 { font-size: 22px; letter-spacing: 4px; line-height: 1.6em; }
.project .entry-content a { color: #fff; font-weight: bold; }
.project .row_gradient { background-image: linear-gradient(90deg,#990000 0%,rgba(254,73,67,0) 100%); padding: 31px 30px !important; margin-bottom: 30px; }
.project .et_audio_container .mejs-time { line-height: 1 !important; }

#episode-intro { background-color: #990000; background-position: top center; background-image: linear-gradient(180deg,rgba(26,24,68,0) 0%,rgba(0,0,0,0.53) 100%),url(images/content-intro-bg.png); width: 100%; max-width: 100%; }
#episode-intro .et_pb_module { max-width: 800px; margin-left: auto; margin-right: auto; }
#episode-author { font-size: 18px; font-weight: 700; }
#episode-intro li { list-style-position: inside; }

#episode-content { background-color: #990000; background-image: linear-gradient(180deg,rgba(0,0,0,0.53) 0%,rgba(0,0,0,0) 100%)!important; padding-top: 0; }

input.complete { position: absolute; top: -9999px; left: -9999px; visibility: hidden; opacity: 0; }
input.complete + label { background: #fff; padding: 10px 20px; color: #000; font-size: 16px; border-radius: 30px; text-transform: uppercase; font-weight: bold; display: inline-block; margin: 20px auto 0; cursor: pointer; }
input.complete:checked + label { background: #000; color: #fff; }
input.complete:checked + label span { display: none; }
input.complete:checked + label::before { content: ""; display: inline-block; margin-right: 0.5em; width: 0.4em; height: 1em; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }

#related { padding-bottom: 0; }
#related h2 { padding-bottom: 35px; }

#resources ul { margin: 0; }

@media (max-width: 980px) {
	.project .entry-content { font-size: 14px; }
	.project .entry-content h1 { font-size: 20px; }
	.project .entry-content h2 { font-size: 18px; }
	.project .entry-content h4 { font-size: 14px; letter-spacing: 1px; }
	.project .et_audio_container .et_pb_module_header { font-size: 14px; }
	
	#top-header, #et-secondary-menu { display: block !important; width: 100%; text-align: center; }
	#et-secondary-nav { display: inline-block !important; margin: 0; }
	#top-header .container { padding-top: 0.75em; }
	#top-header #et-info { display: none; }
	
	.et_header_style_centered .et_search_outer { display: block !important; }
	.et_header_style_centered #et_top_search { display: block !important; position: absolute; top: 22px; right: 55px; margin: 0; z-index: 10; }
	.et_header_style_centered .et_search_outer .container { max-width: 100% !important; }
	.et_header_style_centered .et_search_outer .et-search-form { background-color: #fff !important; }
}

@media (max-width: 768px) {
	#et-secondary-nav .nav-subscribe,
	.logged-in #et-secondary-menu .et_duplicate_social_icons,
	.logged-in #top-header .et-cart-info { display: none; }
	#top-header .et-cart-info { margin-left: 10px; }
	.et_secondary_nav_two_panels #et-secondary-menu { margin-top: 0px; }
}
@media (max-width: 479px) {
	#et-secondary-nav .nav-subscribe { display: none; }
}

#episodeform label { padding: 0 10px 0 0; }

/*  hides download button for HTML5 video */
video::-internal-media-controls-download-button { display:none; }
video::-webkit-media-controls-enclosure { overflow:hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ }    

/* Prevent Caching logged in/out My Active Content */ 
.menu-item.logged-in { display: none !important; }
.member-logged-in .menu-item.logged-in { display: inline-block !important; }
.member-logged-in .menu-item.logged-out { display: none !important; }

@media (max-width: 768px) {
    .member-logged-in .menu-item.logged-in { display: list-item !important; }
}

/* Square Blog Images */
.pa-blog-image-1-1 .entry-featured-image-url { padding-top: 100%; display: block; }
.pa-blog-image-1-1 .entry-featured-image-url img { position: absolute; height: 100% !important; width: 100% !important; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover !important; }

/* Search REsults */
.pa-blog-grid > div { display: flex; flex-wrap: wrap; }
.pa-blog-grid .et_pb_post { margin-right: 5.5%; margin-bottom: 9.5%; width: 47.25%; }
.pa-blog-grid > div > div:last-child { width: 100%; }
.pa-blog-grid .et_pb_post .entry-featured-image-url { margin-bottom: 10px; }

@media (max-width: 768px) {
  .pa-blog-grid .et_pb_post:nth-child(2n) { margin-right: 0; }
}

@media ((min-width: 769px) and (max-width: 980px)) {
  .pa-blog-grid .et_pb_post { width: 29.666%; margin-right: 5.5%; margin-bottom: 7.5%; }
  .pa-blog-grid .et_pb_post:nth-child(3n) { margin-right: 0; }
}

@media (min-width: 981px) {
  .pa-blog-grid .et_pb_post { width: 22.75%; margin-right: 3%; margin-bottom: 3%; }
  .pa-blog-grid .et_pb_post:nth-child(4n) { margin-right: 0; }
}

/* Already Purchased warning */
.already-purchased { background-color: #b90a35; color: #fff; padding: 5px !important; font-weight: bold; text-align: center; }
.already-purchased a { color: #fff; text-decoration: underline; }


/* ========== CUSTOMISATION STARTS HERE ========== */

html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }

img#wpstats { width:0px; height:0px; padding:0px; border:none; overflow:hidden; }

/* ========== top menu bar ========== */

/*img#logo {
padding: 40px 0;
}*/

/*
#et-info, #et-info a, #top-header .et-cart-info, #top-header a {
color: #fff !important;
}
*/

/* ========== Home page Buttons ========== */

.home .et_pb_promo_description {
display: none;
}

.home h1 {
font-size: 22px;
}

/* ========== main header things ========== */

#main-header {
box-shadow: 2px 1px 10px rgba(0,0,0,.7);
}

/* ========== menu things ========== */

#top-menu li {
padding-right: 18px;
}

#top-menu li > a {
text-transform: uppercase;
font-weight: 500;
letter-spacing: -0.02em;
}

#top-menu li.current-menu-item > a {
/*font-weight: 800;*/
}

.nav li ul {
padding: 10px;
line-height: normal;
}

#top-menu li li a {
text-transform: none;
padding: 10px;
width: 175px;
line-height: normal;
}


/* ========== widgets headings and ul dots ========== */

.footer-widget h4.title {
color: #666 !important;
}

p#footer-info a {
color: #666;
font-weight: normal;
}

/* ========== for home page slider to reduce height of images ========== */
.et_pb_slide_image img { width: auto; }
/* 

.et_pb_slider .et_pb_slide {
height: 500px;
}
.et_pb_slide_description {
padding: 150px 100px;
}
.et_pb_media_alignment_center .et_pb_slide_image {
top: 40%;
} */

/* ========== page header - red bg - to make more of it visible ========== */

.et_pb_fullwidth_header {
/*    padding: 75px 0;*/
}

.et_pb_fullwidth_header h1 {
font-size: 38px;
padding-bottom: 0;
/*text-align: center;*/
}

.et_pb_fullwidth_header p {
font-size: 18px;
}

/* ========== Secondary Navigation Bar (in red top of screen) ========== */

.et_nav_text_color_light, .et_nav_text_color_light #et-secondary-nav a, .et_nav_text_color_light .et-social-icon a {
font-weight: bold !important;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.2);
/*font-size: 14px;*/
}

ul, ol {
margin-left: 20px;
}

ol li {
padding: 5px 0 10px 0px;
line-height: normal;
}

#recent-posts-2 ul {
margin-left:0;
}

#recent-posts-2 li {
line-height: normal;
padding: 5px 0;
}

/* ========== blog articles ========== */

#latest-posts .rpwe-summary {
font-size: 14px;
line-height: normal;
}

#latest-posts .rpwe-block h3 {
font-size: 14px !important;
}

#latest-posts .rpwe-block h3 a {
color: #666;
font-weight: 600;
}

/* ========== grey boxes like the one on the mentoring page ========== */

.et-shadow .et-box-content {
padding: 30px;
}

/* ========== navi but most done within plugin ========== */

.wp-pagenavi span.current {
color: #fff !important;
}

/* ========== posts home page ========== */

.featured-posts .wp-pagenavi, .home .wp-pagenavi {
display: none !important;
}

/* ========== store ========== */

.count {
display: none;
}


/* ========== subscribe box ========== */

.subscribe, #sidebar #wysija-3, .recent-posts-subscribe {
padding: 30px 20px;
border: solid 2px #ad000b;
font-size: 18px;
background-color: #fff;
}

.subscribe label, #sidebar #wysija-3 label,  .recent-posts-subscribe label {
font-size: 14px;
line-height: 1 !important;
padding-top: 10px;
}

.recent-posts-subscribe label {
float: left;
padding-right: 10px;
}

.subscribe input[type="text"], .subscribe input.text, .subscribe input.title, .subscribe textarea, select {
padding: 5px;
border-radius: 3px;
background-color: #efefef;
}

.widget_wysija_cont .wysija-submit {
padding: 7px 20px;
border-radius: 3px;
font-size: 14px;
color: #ad000b;
border: solid 1px #ad000b;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
text-transform: uppercase;
letter-spacing: 1px;
}

/* ========== My account button in nav bar ========== Edite by EBONO Nov '17 based on earlier design
*/



/* ======== Dotti Media - hide WooCommerce "Related Products" heading ========== */
.product .related h2 {
display: none;
}


p.woocommerce-MyAccount-downloads-file, p.woocommerce-MyAccount-downloads-prod  {
	font-family: "PT Sans",Helvetica,Arial,Lucida,sans-serif;
	font-size: 20px;
	left: 0px;
	line-height: 34px;
	margin: 0px;
}
p.woocommerce-MyAccount-downloads-file  {
	color: rgb(102, 102, 102); 
	font-weight: 500;
}
p.woocommerce-MyAccount-downloads-prod  {
	color: rgb(52, 52, 52); 
	font-weight: 900;
}

.download-audio {
	width: 290px;
}

audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

/*.audiofileplayer{
    border: 3px solid #939393;
    border-radius:5px;
    max-width:380px;
}

.audiofileplayer p{
    padding:5px;
}

.videofileplayer{
    border: 3px solid #939393;
    border-radius:5px;
    max-width:380px;
}

.videofileplayer p{
    padding:5px;
}*/

/* Begin MediaElement Styling */

html, body {
    overflow-x: hidden;
}

#container {
    padding: 0 20px 50px;
}
.error {
    color: red;
}
a {
    word-wrap: break-word;
}

code {
    font-size: 0.8em;
}

#player2-container .mejs__time-buffering, #player2-container .mejs__time-current, #player2-container .mejs__time-handle,
#player2-container .mejs__time-loaded, #player2-container .mejs__time-hovered, #player2-container .mejs__time-marker, #player2-container .mejs__time-total {
    height: 2px;
}

#player2-container .mejs__time-total {
    margin-top: 9px;
}
#player2-container .mejs__time-handle {
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    top: -5px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 2;
    border: none;
}
#player2-container .mejs__time-handle-content {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
}

/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
.mejs__offscreen {
    border: 0;
    clip: rect( 1px, 1px, 1px, 1px );
    -webkit-clip-path: inset( 50% );
            clip-path: inset( 50% );
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.mejs__container {
    background: #000;
    box-sizing: border-box;
    font-family: 'Helvetica', Arial, serif;
    position: relative;
    text-align: left;
    text-indent: 0;
    vertical-align: top;
}

.mejs__container * {
    box-sizing: border-box;
}

/* Hide native play button and control bar from iOS to favor plugin button */
.mejs__container video::-webkit-media-controls,
.mejs__container video::-webkit-media-controls-panel,
.mejs__container video::-webkit-media-controls-panel-container,
.mejs__container video::-webkit-media-controls-start-playback-button {
    -webkit-appearance: none;
    display: none !important;
}

.mejs__fill-container,
.mejs__fill-container .mejs__container {
    height: 100%;
    width: 100%;
}

.mejs__fill-container {
    background: transparent;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.mejs__container:focus {
    outline: none;
}

.mejs__iframe-overlay {
    height: 100%;
    position: absolute;
    width: 100%;
}

.mejs__embed,
.mejs__embed body {
    background: #000;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.mejs__fullscreen {
    overflow: hidden !important;
}

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

.mejs__container-fullscreen .mejs__mediaelement,
.mejs__container-fullscreen video {
    height: 100% !important;
    width: 100% !important;
}

/* Start: LAYERS */
.mejs__background {
    left: 0;
    position: absolute;
    top: 0;
}

.mejs__mediaelement {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.mejs__poster {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

:root .mejs__poster-img {
    display: none;
}

.mejs__poster-img {
    border: 0;
    padding: 0;
}

.mejs__overlay {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
}

.mejs__layer {
    z-index: 1;
}

.mejs__overlay-play {
    cursor: pointer;
}

.mejs__overlay-button {
    background: url('mejs-controls.svg') no-repeat;
    background-position: 0 -39px;
    height: 80px;
    width: 80px;
}

.mejs__overlay:hover > .mejs__overlay-button {
    background-position: -80px -39px;
}

.mejs__overlay-loading {
    height: 80px;
    width: 80px;
}

.mejs__overlay-loading-bg-img {
    -webkit-animation: mejs__loading-spinner 1s linear infinite;
            animation: mejs__loading-spinner 1s linear infinite;
    background: transparent url('mejs-controls.svg') -160px -40px no-repeat;
    display: block;
    height: 80px;
    width: 80px;
    z-index: 1;
}

@-webkit-keyframes mejs__loading-spinner {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes mejs__loading-spinner {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

/* End: LAYERS */

/* Start: CONTROL BAR */
.mejs__controls {
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.mejs__controls:not([style*='display: none']) {
    background: rgba(255, 0, 0, 0.7);
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
}

.mejs__button,
.mejs__time,
.mejs__time-rail {
    font-size: 10px;
    height: 40px;
    line-height: 10px;
    margin: 0;
    width: 32px;
}

.mejs__button > button {
    background: transparent url('mejs-controls.svg');
    border: 0;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    width: 20px;
}

/* :focus for accessibility */
.mejs__button > button:focus {
    outline: dotted 1px #999;
}

.mejs__container-keyboard-inactive a,
.mejs__container-keyboard-inactive a:focus,
.mejs__container-keyboard-inactive button,
.mejs__container-keyboard-inactive button:focus,
.mejs__container-keyboard-inactive [role=slider],
.mejs__container-keyboard-inactive [role=slider]:focus {
    outline: 0;
}

/* End: CONTROL BAR */

/* Start: Time (Current / Duration) */
.mejs__time {
    box-sizing: content-box;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    height: 24px;
    overflow: hidden;
    padding: 16px 6px 0;
    text-align: center;
    width: auto;
}

/* End: Time (Current / Duration) */

/* Start: Play/Pause/Stop */
.mejs__play > button {
    background-position: 0 0;
}

.mejs__pause > button {
    background-position: -20px 0;
}

.mejs__replay > button {
    background-position: -160px 0;
}

/* End: Play/Pause/Stop */

/* Start: Progress Bar */
.mejs__time-rail {
    direction: ltr;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 40px;
    margin: 0 10px;
    padding-top: 10px;
    position: relative;
}

.mejs__time-total,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-current,
.mejs__time-float,
.mejs__time-hovered,
.mejs__time-float-current,
.mejs__time-float-corner,
.mejs__time-marker {
    border-radius: 2px;
    cursor: pointer;
    display: block;
    height: 10px;
    position: absolute;
}

.mejs__time-total {
    background: rgba(255, 255, 255, 0.3);
    margin: 5px 0 0;
    width: 100%;
}

.mejs__time-buffering {
    -webkit-animation: buffering-stripes 2s linear infinite;
            animation: buffering-stripes 2s linear infinite;
    background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 15px 15px;
    width: 100%;
}

@-webkit-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;
    }
}

.mejs__time-loaded {
    background: rgba(255, 255, 255, 0.3);
}

.mejs__time-current,
.mejs__time-handle-content {
    background: rgba(255, 255, 255, 0.9);
}

.mejs__time-hovered {
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.mejs__time-hovered.negative {
    background: rgba(0, 0, 0, 0.2);
}

.mejs__time-current,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-hovered {
    left: 0;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transition: 0.15s ease-in all;
    transition: 0.15s ease-in all;
    width: 100%;
}

.mejs__time-buffering {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}

.mejs__time-hovered {
    -webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
    transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
}

.mejs__time-hovered.no-hover {
    -webkit-transform: scaleX(0) !important;
        -ms-transform: scaleX(0) !important;
            transform: scaleX(0) !important;
}

.mejs__time-handle,
.mejs__time-handle-content {
    border: 4px solid transparent;
    cursor: pointer;
    left: 0;
    position: absolute;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    z-index: 11;
}

.mejs__time-handle-content {
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    height: 10px;
    left: -7px;
    top: -4px;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    width: 10px;
}

.mejs__time-rail:hover .mejs__time-handle-content,
.mejs__time-rail .mejs__time-handle-content:focus,
.mejs__time-rail .mejs__time-handle-content:active {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.mejs__time-float {
    background: #eee;
    border: solid 1px #333;
    bottom: 100%;
    color: #111;
    display: none;
    height: 17px;
    margin-bottom: 9px;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 36px;
}

.mejs__time-float-current {
    display: block;
    left: 0;
    margin: 2px;
    text-align: center;
    width: 30px;
}

.mejs__time-float-corner {
    border: solid 5px #eee;
    border-color: #eee transparent transparent;
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    line-height: 0;
    position: absolute;
    top: 100%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 0;
}

.mejs__long-video .mejs__time-float {
    margin-left: -23px;
    width: 64px;
}

.mejs__long-video .mejs__time-float-current {
    width: 60px;
}

.mejs__broadcast {
    color: #fff;
    height: 10px;
    position: absolute;
    top: 15px;
    width: 100%;
}

/* End: Progress Bar */

/* Start: Fullscreen */
.mejs__fullscreen-button > button {
    background-position: -80px 0;
}

.mejs__unfullscreen > button {
    background-position: -100px 0;
}

/* End: Fullscreen */

/* Start: Mute/Volume */
.mejs__mute > button {
    background-position: -60px 0;
}

.mejs__unmute > button {
    background-position: -40px 0;
}

.mejs__volume-button {
    position: relative;
}

.mejs__volume-button > .mejs__volume-slider {
    -webkit-backface-visibility: hidden;
    background: rgba(50, 50, 50, 0.7);
    border-radius: 0;
    bottom: 100%;
    display: none;
    height: 115px;
    left: 50%;
    margin: 0;
    position: absolute;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 25px;
    z-index: 1;
}

.mejs__volume-button:hover {
    border-radius: 0 0 4px 4px;
}

.mejs__volume-total {
    background: rgba(255, 255, 255, 0.5);
    height: 100px;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 8px;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 2px;
}

.mejs__volume-current {
    background: rgba(255, 255, 255, 0.9);
    left: 0;
    margin: 0;
    position: absolute;
    width: 100%;
}

.mejs__volume-handle {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    cursor: ns-resize;
    height: 6px;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 16px;
}

.mejs__horizontal-volume-slider {
    display: block;
    height: 36px;
    position: relative;
    vertical-align: middle;
    width: 56px;
}

.mejs__horizontal-volume-total {
    background: rgba(50, 50, 50, 0.8);
    border-radius: 2px;
    font-size: 1px;
    height: 8px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 16px;
    width: 50px;
}

.mejs__horizontal-volume-current {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    font-size: 1px;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.mejs__horizontal-volume-handle {
    display: none;
}

/* End: Mute/Volume */

/* Start: Track (Captions and Chapters) */
.mejs__captions-button,
.mejs__chapters-button {
    position: relative;
}

.mejs__captions-button > button {
    background-position: -140px 0;
}

.mejs__chapters-button > button {
    background-position: -180px 0;
}

.mejs__captions-button > .mejs__captions-selector,
.mejs__chapters-button > .mejs__chapters-selector {
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    border-radius: 0;
    bottom: 100%;
    margin-right: -43px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 50%;
    visibility: visible;
    width: 86px;
}

.mejs__chapters-button > .mejs__chapters-selector {
    margin-right: -55px;
    width: 110px;
}

.mejs__captions-selector-list,
.mejs__chapters-selector-list {
    list-style-type: none !important;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.mejs__captions-selector-list-item,
.mejs__chapters-selector-list-item {
    color: #fff;
    cursor: pointer;
    display: block;
    list-style-type: none !important;
    margin: 0 0 6px;
    overflow: hidden;
    padding: 0;
}

.mejs__captions-selector-list-item:hover,
.mejs__chapters-selector-list-item:hover {
    background-color: rgb(200, 200, 200) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.mejs__captions-selector-input,
.mejs__chapters-selector-input {
    clear: both;
    float: left;
    left: -1000px;
    margin: 3px 3px 0 5px;
    position: absolute;
}

.mejs__captions-selector-label,
.mejs__chapters-selector-label {
    cursor: pointer;
    float: left;
    font-size: 10px;
    line-height: 15px;
    padding: 4px 10px 0;
    width: 100%;
}

.mejs__captions-selected,
.mejs__chapters-selected {
    color: rgba(33, 248, 248, 1);
}

.mejs__captions-translations {
    font-size: 10px;
    margin: 0 0 5px;
}

.mejs__captions-layer {
    bottom: 0;
    color: #fff;
    font-size: 16px;
    left: 0;
    line-height: 20px;
    position: absolute;
    text-align: center;
}

.mejs__captions-layer a {
    color: #fff;
    text-decoration: underline;
}

.mejs__captions-layer[lang=ar] {
    font-size: 20px;
    font-weight: normal;
}

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

.mejs__captions-position-hover {
    bottom: 35px;
}

.mejs__captions-text,
.mejs__captions-text * {
    background: rgba(20, 20, 20, 0.5);
    box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
    padding: 0;
    white-space: pre-wrap;
}

.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
    display: none;
}

/* End: Track (Captions and Chapters) */

/* Start: Error */
.mejs__overlay-error {
    position: relative;
}
.mejs__overlay-error > img {
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}
.mejs__cannotplay,
.mejs__cannotplay a {
    color: #fff;
    font-size: 0.8em;
}

.mejs__cannotplay {
    position: relative;
}

.mejs__cannotplay p,
.mejs__cannotplay a {
    display: inline-block;
    padding: 0 15px;
    width: 100%;
}
/* End: Error */