/*
Very simple buttons version mediaelement.js:
    Created on : Jul 26, 2017, 10:49:47 PM
    Author     : luke
*/
.simplebutton {
	float:left;
}

.simplebutton.mejs-container,
.simplebutton.mejs-container .mejs-controls .mejs-button {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;/*override 4.9*/
	background: transparent;
	overflow: hidden;
    margin-right: 20px;
}
.simplebutton.mejs-container .mejs-mediaelement {
	width: 40px !important;
	height: 40px !important;
}
.simplebutton.mejs-container {
	border: 3px solid #e3e3e3;
	border-radius: 22px;
	box-sizing: content-box;
	transition: all 0.4s linear;
}
.simplebutton.mejs-container.alignRight {
	float:right;
}
.simplebutton.mejs-container.alignLeft {
	float:left;
}
.simplebutton.mejs-container.alignCenter {
	float:none;
	margin:0 calc(50% - 23px);/*100% with width*/
}
.simplebutton.mejs-container:hover,
.simplebutton.mejs-container:focus {
	border-color: rgb(130, 178, 68);
	background: rgb(130, 178, 68);
	outline: none !important;
	box-shadow: none;
}
.simplebutton.mejs-container .mejs-controls {
	background: transparent !important;/*overrule customflatligh/dark*/
	top:0;
	left:0;/*for consistency^*/
	padding:0;
}

.simplebutton.mejs-container .mejs-button.mejs-playpause-button ~* {
    /* ~*, elements directly after could be tab-focused if visible, but not visible:*/
    display:none;
}
.simplebutton.mejs-container .mejs-offscreen {
    /*No disappearing on tab key!*/
    clip: auto;
    clip-path: initial;
}
.simplebutton.mejs-container .mejs-button button {
	margin:12px;
}
/* single sfsermons object preview*/
.sermons >.simplebutton.mejs-container {
    z-index: 3;/* or goes below text*/
}

/*body.single-sermons refers to /sermons/individualsermon page not the single vs playlist mode:*/
body.single-sermons .simplebutton {
	overflow: visible;
}
body.single-sermons .simplebutton.mejs-container .mejs-time-rail,
body.single-sermons .simplebutton.mejs-container .mejs-time-loaded{
	display: block;
	/*min-width: 200px !important;
	width: auto !important;*/
}
body.single-sermons .simplebutton.mejs-container .mejs-button.mejs-playpause-button ~* {
	display: block;
}

body.single-sermons .simplebutton.mejs-container .mejs-controls {
	width:400px; max-width:90vw;
	overflow: visible;
	top: 52px;/*below*/
}
body.single-sermons .simplebutton .mejs-time {
	color:inherit;
}
body.single-sermons .simplebutton .mejs-play,
body.single-sermons .simplebutton .mejs-replay,
body.single-sermons .simplebutton .mejs-pause {
	position:absolute;
	top: -52px;/*except play btn*/
}
body.single-sermons .simplebutton .mejs-volume-button,
body.single-sermons .simplebutton .mejs-mute,
body.single-sermons .simplebutton .mejs-play ~*,
body.single-sermons .simplebutton .mejs-replay ~* {
	display:none !important;
}

.simplebutton .mejs-play >button,
.simplebutton .mejs-replay >button,
.simplebutton .mejs-pause >button {
	/*Force the old svg grey in case of white background, which is default.
	In this case bring in similar css to style it like it was pre wp4.9: */
	background:transparent url(mejs.svg) no-repeat;
	width:16px;
	height:16px;
}
.simplebutton .mejs-pause >button {
	background-position: 0 -16px;
}

.SFembedWrap {
	position:relative;
	display: inline-block;/*centerability*/
	max-width: 100%;
	overflow: hidden;
}
.SFembedWrap >img {
	position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
	cursor: pointer;
	
	height:auto;
	width:100%;
}
.SFembedWrap.wideImage >img {
	height:100%;
	width:auto;
	max-width:none !important;
}
/*and effect*/
.SFembedWrap.unclicked:before {
    content: '\e8e1'; z-index: 1;
	
    font-family: "fontello";
    font-size: 3rem;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    color: #FFF;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 100px;
    transition: all 0.3s ease 0s;
    border: 4px solid #fff;
    padding: 0;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-top: 0;
}
/*necessary for wp4.9:*/
.simplebutton.mejs-container .mejs-controls .mejs-button {
	margin-top:0;
}