/home/arranoyd/magicraft/wp-content/themes/massive-dynamic/lib/customizer/assets/css/introjs.css
.introjs-overlay {
position: absolute;
z-index: 999999;
background-color: #000;
opacity: 0;
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/*.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
position: absolute !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}*/
.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
z-index: 9999999 !important;
}
.introjs-disableInteraction {
z-index: 99999999 !important;
position: absolute;
}
/*.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
position: relative;
}*/
.introjs-helperLayer {
position: fixed;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
/* border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
border-radius: 4px;
box-shadow: 0 2px 15px rgba(0,0,0,.4);*/
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.introjs-tooltipReferenceLayer {
position: fixed;
visibility: hidden;
z-index: 10000000;
background-color: transparent;
-webkit-transition: all 0.55s ease-out;
-moz-transition: all 0.55s ease-out;
-ms-transition: all 0.55s ease-out;
-o-transition: all 0.55s ease-out;
transition: all 0.55s ease-out;
}
.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
.introjs-arrow {
border: 5px solid #ffffff;
content:'';
position: absolute;
}
.introjs-arrow.top {
top: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#ffffff;
border-left-color:transparent;
}
.introjs-arrow.top-right {
top: -10px;
right: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#ffffff;
border-left-color:transparent;
}
.introjs-arrow.top-middle {
top: -10px;
left: 50%;
margin-left: -5px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#ffffff;
border-left-color:transparent;
}
.introjs-arrow.right {
right: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#ffffff;
}
.introjs-arrow.right-bottom {
bottom:10px;
right: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#ffffff;
}
.introjs-arrow.bottom {
bottom: -10px;
border-top-color:#ffffff;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left {
left: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:#ffffff;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left-bottom {
left: -10px;
bottom:10px;
border-top-color:transparent;
border-right-color:#ffffff;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-tooltip {
position: absolute;
visibility: visible;
padding: 43px;
background-color: #ffffff;
min-width: 255px;
max-width: 300px;
border-radius: 3px;
box-shadow: 0 1px 10px rgba(0,0,0,.4);
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.introjs-tooltipbuttons {
text-align: center;
display: inline-block;
white-space: nowrap;
margin-top: 8px;
margin-bottom: 15px;
}
/*
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
Changed by Afshin Mehrabani
*/
.introjs-tooltipbuttons .introjs-button {
background-color: #ebebeb;
padding: 8px 38px;
text-decoration: none;
color: #0a0a0a;
transition: background-color .3s;
}
.introjs-tooltipbuttons .introjs-button:not(.introjs-disabled):hover {
background-color: #07e7a0;
color: #fff;
}
/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.introjs-skipbutton {
margin-right: 5px;
color: #7a7a7a;
display: none;
padding: 8px 49px !important;
}
.introjs-prevbutton {
margin-right: 7px;
}
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
color: #9a9a9a;
cursor: default;
background-color: #f4f4f4;
/* background-image: none;*/
text-decoration: none;
margin-right: 7px;
}
.introjs-bullets {
text-align: center;
position: absolute;
bottom: 14px;
margin: auto;
right: 0;
left: 0;
}
.introjs-bullets ul {
clear: both;
margin: 15px auto 0;
padding: 0;
display: inline-block;
}
.introjs-bullets ul li {
list-style: none;
float: left;
margin: 0 2px;
}
.introjs-bullets ul li a {
display: block;
width: 5px;
height: 5px;
background: #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
text-decoration: none;
}
.introjs-bullets ul li a:hover {
background: #999;
}
.introjs-bullets ul li a.active {
background: #999;
}
.introjs-progress {
overflow: hidden;
height: 10px;
margin: 10px 0 5px 0;
border-radius: 4px;
background-color: #ecf0f1
}
.introjs-progressbar {
float: left;
width: 0%;
height: 100%;
font-size: 10px;
line-height: 10px;
text-align: center;
background-color: #08c;
}
.introjsFloatingElement {
position: absolute;
height: 0;
width: 0;
left: 50%;
top: 50%;
}
/* Add Hint */
.introjs-hints {
position: relative;
z-index: 999999;
}
.introjs-hint {
position: absolute;
background: transparent;
width: 20px;
height: 15px;
text-decoration: none;
}
.introjs-hidehint {
display: none !important;
}
.introjs-fixedhint {
position: fixed;
}
/*.introjs-hint:hover > .introjs-hint-pulse {
border: 5px solid rgba(60, 60, 60, 0.57);
}*/
.introjs-hint-pulse {
width: 5px;
height: 5px;
border: 3px solid #7ed7bb;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
/* background-color: rgb(40, 208, 143); */
z-index: 10;
position: absolute;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.introjs-hint-dot {
border: 7px solid rgb(128, 228, 189);
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 30px;
width: 30px;
animation: introjspulse 2s cubic-bezier(0.4, 0.39, 0.39, 0.48);
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -16px;
left: -16px;
z-index: 1;
opacity: 0;
}
@-webkit-keyframes introjspulse {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
@-moz-keyframes intrjspulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
/* Massive added */
.introjs-tooltiptext {
font-weight: 700;
font-size: 21px;
font-family: "Raleway";
/* text-align: justify; */
letter-spacing: 1px;
}
.introjs-tooltiptext p {
font-size: 13px;
color: #3b3b3b;
/* opacity: .6; */
letter-spacing: 0;
font-weight: 300;
}
a:focus {
box-shadow: none;
color: inherit;
}
/* video js */
#video-55a737f4ce261_video_youtube_api body,
.html5-video-player{
background-color: transparent !important;
}
/*!
Video.js Default Styles (http://videojs.com)
Version 4.12.11
Create your own skin at http://designer.videojs.com
*/
/* SKIN */
.vjs-default-skin {
color: #cccccc;
}
/* Base UI Component Classes */
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
outline: 0;
position: relative;
cursor: pointer;
padding: 0;
background-color: #fff;
}
.vjs-default-skin .vjs-slider:focus {
/* box-shadow */
-webkit-box-shadow: 0 0 2em #ffffff;
-moz-box-shadow: 0 0 2em #ffffff;
box-shadow: 0 0 2em #ffffff;
}
.vjs-default-skin .vjs-slider-handle {
position: absolute;
/* Needed for IE6 */
left: 0;
top: 0;
}
.vjs-default-skin .vjs-slider-handle:before {
font-size: 1em;
line-height: 1;
text-align: center;
text-shadow: 0 0 1em #fff;
position: absolute;
top: 0;
left: 0;
}
/* Control Bar
*/
.vjs-default-skin .vjs-control-bar {
display: none;
position: absolute;
bottom: 23px;
left: 0;
right: 0;
height: 3.0em;
background-color: transparent;
z-index: 999999;
width: 50%;
margin: auto;
}
.compose-mode .video-js:after{
bottom: -23px;
}
.video-js:after{
content: "";
position: absolute;
height: 197px;
background-color: rgba(0,0,0,0);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
background-image: -o-linear-gradient(bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
background-image: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
width: 100%;
left: 0;
bottom: -40px;
z-index: 0;
}
/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
display: block;
visibility: visible;
opacity: 1;
-webkit-transition: visibility 0.1s, opacity 0.1s;
-moz-transition: visibility 0.1s, opacity 0.1s;
-o-transition: visibility 0.1s, opacity 0.1s;
transition: visibility 0.1s, opacity 0.1s;
width: 50%;
margin: auto;
right: 45px;
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
display: block;
}
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
display: none;
}
/* The control bar shouldn't show after an error */
.vjs-default-skin.vjs-error .vjs-control-bar {
display: none;
}
/* Don't hide the control bar if it's audio */
.vjs-audio.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
opacity: 1;
visibility: visible;
}
@media \0screen {
.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
content: "";
}
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
outline: none;
position: relative;
float: left;
text-align: center;
margin: 0;
padding: 0;
height: 3.0em;
width: 4em;
}
/* Font button icons */
.vjs-default-skin .vjs-control:before {
font-family: VideoJS;
font-size: 1.5em;
line-height: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
text-shadow: 0em 0em 1em #ffffff;
}
/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
/* hide-visually */
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control .vjs-control-content{
border:1px solid #fff;
border-radius: 100%;
/*width: 40px;
height: 40px;*/
position: absolute;
/*top:-16px;
left:-18px*/
top: -18px;
left: -20px;
width: 45px;
height: 45px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vjs-default-skin .vjs-play-control {
width: 0;
cursor: pointer;
position: absolute;
left: -35px;
top: -8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vjs-default-skin .vjs-play-control.vjs-paused{
width: 0;
height: 0;
cursor: pointer;
border-style: solid;
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent #fff;
top:-12px;
left:-33px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vjs-default-skin .vjs-play-control.vjs-paused .vjs-control-content{
/*top:-20px;
left:-25px*/
top: -22px;
left: -27px;
}
.vjs-default-skin .vjs-play-control.vjs-playing {
width: 10px;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
background: none;
height: 10px;
}
/* Playback toggle
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
font-size: 1.5em;
line-height: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
width: 4em;
left: -2em;
list-style: none;
}
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
cursor: pointer;
float: right;
display: none;
}
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
content: "\e006";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
content: "\e003";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
content: "\e004";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
content: "\e005";
}
.vjs-default-skin .vjs-volume-control {
width: 5em;
float: right;
position: absolute;
top: -14px;
right: -61px;
}
.vjs-default-skin .vjs-volume-bar {
width: 5em;
height: 1px;
margin: 1.1em auto 0;
}
.vjs-default-skin .vjs-volume-level {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 100%;
background: #fff;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
width: 0.5em;
height: 0.5em;
left: 4.5em;
}
.vjs-default-skin .vjs-volume-handle:before {
content: " ";
font-size: 0.9em;
top: -4px;
left: 3px;
width: 1px;
height: 9px;
background: #fff;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu {
display: block;
width: 0;
height: 0;
border-top-color: transparent;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
height: 0;
width: 0;
}
.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
border-top-color: rgba(7, 40, 50, 0.5);
}
.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
height: 2.9em;
width: 10em;
}
/* Progress */
.vjs-default-skin .vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: auto;
font-size: 0.3em;
height: 1em;
top: -1em;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.vjs-default-skin:hover .vjs-progress-control {
/* transition */
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.vjs-default-skin .vjs-progress-holder {
height: 1px;
}
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
position: absolute;
display: block;
height: 100%;
margin: 0;
padding: 0;
width: 0;
left: 0;
top: 0;
}
.vjs-default-skin .vjs-play-progress {
background: #e2a92f;
}
.vjs-default-skin .vjs-load-progress {
background: #5b5b5b;
}
.vjs-default-skin .vjs-load-progress div {
background: #787878 /* IE8- Fallback */;
background: rgba(255, 255, 255, 0.1);
}
.vjs-default-skin .vjs-seek-handle {
width: 1.5em;
height: 100%;
}
.vjs-default-skin .vjs-seek-handle:before {
padding-top: 0.1em /* Minor adjustment */;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 100%;
margin-top: -3px;
content: " ";
}
/* Live Mode
--------------------------------------------------------------------------------
*/
.vjs-default-skin.vjs-live .vjs-time-controls,
.vjs-default-skin.vjs-live .vjs-time-divider,
.vjs-default-skin.vjs-live .vjs-progress-control {
display: none;
}
.vjs-default-skin.vjs-live .vjs-live-display {
display: block;
}
/* Live Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-live-display {
display: none;
font-size: 1em;
line-height: 3em;
}
/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-time-controls {
font-size: 1em;
line-height: 3em;
}
.vjs-default-skin .vjs-current-time {
float: left;
}
.vjs-default-skin .vjs-duration {
float: left;
}
.vjs-default-skin .vjs-remaining-time {
display: none;
float: left;
}
.vjs-time-divider {
float: left;
line-height: 3em;
}
/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-fullscreen-control {
width: 3.8em;
cursor: pointer;
float: right;
position: absolute;
top: -12px;
right: -99px;
}
/*.vjs-default-skin .vjs-fullscreen-control:before {
content: " ";
background: url(../img/fullscreen.png) no-repeat;
margin-left:11px;
}*/
/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
content: "\e00b";
}
/* Big Play Button (play button at start) */
.vjs-default-skin .vjs-big-play-button {
display: none!important;
left: 0.5em;
top: 0.5em;
font-size: 3em;
display: block;
z-index: 2;
position: absolute;
width: 4em;
height: 2.6em;
text-align: center;
vertical-align: middle;
cursor: pointer;
opacity: 1;
background-color: #07141e;
background-color: rgba(7, 20, 30, 0.7);
border: 0.1em solid #3b4249;
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
border-radius: 0.8em;
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
/* Optionally center */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
left: 50%;
margin-left: -2.1em;
top: 50%;
margin-top: -1.4000000000000001em;
}
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
display: none;
}
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
display: none;
}
/* Hide on mobile devices. Remove when we stop using native controls
by default on mobile */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
display: none;
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
display: none;
outline: 0;
border-color: #fff;
background-color: #A1A1A1;
background-color: rgba(50, 50, 50, 0.75);
/* box-shadow */
-webkit-box-shadow: 0 0 3em #ffffff;
-moz-box-shadow: 0 0 3em #ffffff;
box-shadow: 0 0 3em #ffffff;
/* transition */
-webkit-transition: all 0s;
-moz-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
}
.vjs-default-skin .vjs-big-play-button:before {
content: "\e001";
font-family: VideoJS;
line-height: 2.6em;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center /* Needed for IE8 */;
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
.vjs-error .vjs-big-play-button {
display: none;
}
/* Error Display */
.vjs-error-display {
display: none;
}
.vjs-error .vjs-error-display {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.vjs-error .vjs-error-display:before {
content: 'X';
/*font-family: Arial;*/
font-size: 4em;
color: #666666;
line-height: 1;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center /* Needed for IE8 */;
vertical-align: middle;
position: absolute;
left: 0;
top: 50%;
margin-top: -0.5em;
width: 100%;
}
.vjs-error-display div {
position: absolute;
bottom: 1em;
right: 0;
left: 0;
font-size: 1.4em;
text-align: center;
padding: 3px;
background: #000000;
background: rgba(0, 0, 0, 0.5);
}
.vjs-error-display a,
.vjs-error-display a:visited {
color: #F4A460;
}
/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
/* Should be hidden by default */
display: none;
position: absolute;
top: 50%;
left: 50%;
font-size: 4em;
line-height: 1;
width: 1em;
height: 1em;
margin-left: -0.5em;
margin-top: -0.5em;
opacity: 0.75;
}
.vjs-waiting .vjs-loading-spinner,
.vjs-seeking .vjs-loading-spinner {
display: block;
-webkit-animation: spin 1.5s infinite linear;
-moz-animation: spin 1.5s infinite linear;
-o-animation: spin 1.5s infinite linear;
animation: spin 1.5s infinite linear;
}
.vjs-error .vjs-loading-spinner {
display: none;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.vjs-default-skin .vjs-loading-spinner:before {
content: "\e01e";
font-family: VideoJS;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
text-align: center;
text-shadow: 0em 0em 0.1em #000;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Menu Buttons (Captions/Subtitles/etc.) */
.vjs-default-skin .vjs-menu-button {
float: right;
cursor: pointer;
}
.vjs-default-skin .vjs-menu {
display: none;
position: absolute;
bottom: 0;
left: 0em;
width: 0em;
height: 0em;
margin-bottom: 3em;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
border-top: 1.55em solid #000000;
border-top-color: rgba(7, 40, 50, 0.5);
}
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
display: block;
padding: 0;
margin: 0;
position: absolute;
width: 10em;
bottom: 1.5em;
max-height: 15em;
overflow: auto;
left: -5em;
background-color: #07141e;
background-color: rgba(7, 20, 30, 0.7);
-webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
-moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}
.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,
.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
display: block;
}
/* prevent menus from opening while scrubbing (FF, IE) */
.vjs-default-skin.vjs-scrubbing .vjs-menu-button:hover .vjs-control-content .vjs-menu {
display: none;
}
.vjs-default-skin .vjs-menu-button ul li {
list-style: none;
margin: 0;
padding: 0.3em 0 0.3em 0;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
text-transform: lowercase;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
background-color: #000;
}
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
outline: 0;
color: #111;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.75);
-webkit-box-shadow: 0 0 1em #ffffff;
-moz-box-shadow: 0 0 1em #ffffff;
box-shadow: 0 0 1em #ffffff;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
text-align: center;
text-transform: uppercase;
font-size: 1em;
line-height: 2em;
padding: 0;
margin: 0 0 0.3em 0;
font-weight: bold;
cursor: default;
}
/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
content: "\e00c";
}
/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
content: "\e008";
}
/* Chapters Button */
.vjs-default-skin .vjs-chapters-button:before {
content: "\e00c";
}
.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
width: 24em;
left: -12em;
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
/* box-shadow */
-webkit-box-shadow: 0 0 1em #ffffff;
-moz-box-shadow: 0 0 1em #ffffff;
box-shadow: 0 0 1em #ffffff;
}
/*
REQUIRED STYLES (be careful overriding)*/
.video-js {
/*background-color: #000;*/
position: relative;
padding: 0;
font-size: 10px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Playback technology elements expand to the width/height of the containing div
<video> or <object> */
.video-js .vjs-tech {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-50%);
}
.video-js .vjs-tech[id *= 'vimeo']{
height: 180%;
}
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
checking fullScreenEnabled. */
.video-js:-moz-full-screen {
position: absolute;
}
/* Fullscreen Styles */
body.vjs-full-window {
padding: 0;
margin: 0;
height: 100%;
overflow-y: auto;
}
.video-js.vjs-fullscreen {
position: fixed;
overflow: hidden;
z-index: 1000;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
/* IE6 full-window (underscore hack) */
_position: absolute;
}
.video-js:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
left:0!important;
top:0!important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
cursor: none;
}
/* Poster Styles */
.vjs-poster {
display: none!important;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
background-color: #000000;
cursor: pointer;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.vjs-poster img {
display: block;
margin: 0 auto;
max-height: 100%;
padding: 0;
width: 100%;
}
/* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster {
display: none;
}
/* Don't hide the poster if we're playing audio */
.video-js.vjs-audio.vjs-has-started .vjs-poster {
display: block;
}
/* Hide the poster when controls are disabled because it's clickable
and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster {
display: none;
}
/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
display: none;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
position: absolute;
top: 0;
left: 0;
bottom: 3em;
right: 0;
pointer-events: none;
}
/* Captions Settings Dialog */
.vjs-caption-settings {
position: relative;
top: 1em;
background-color: #000;
opacity: 0.75;
color: #FFF;
margin: 0 auto;
padding: 0.5em;
height: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 40em;
}
.vjs-caption-settings .vjs-tracksettings {
top: 0;
bottom: 2em;
left: 0;
right: 0;
position: absolute;
overflow: auto;
}
.vjs-caption-settings .vjs-tracksettings-colors,
.vjs-caption-settings .vjs-tracksettings-font {
float: left;
}
.vjs-caption-settings .vjs-tracksettings-colors:after,
.vjs-caption-settings .vjs-tracksettings-font:after,
.vjs-caption-settings .vjs-tracksettings-controls:after {
clear: both;
}
.vjs-caption-settings .vjs-tracksettings-controls {
position: absolute;
bottom: 1em;
right: 1em;
}
.vjs-caption-settings .vjs-tracksetting {
margin: 5px;
padding: 3px;
min-height: 40px;
}
.vjs-caption-settings .vjs-tracksetting label {
display: block;
width: 100px;
margin-bottom: 5px;
}
.vjs-caption-settings .vjs-tracksetting span {
display: inline;
margin-left: 5px;
}
.vjs-caption-settings .vjs-tracksetting > div {
margin-bottom: 5px;
min-height: 20px;
}
.vjs-caption-settings .vjs-tracksetting > div:last-child {
margin-bottom: 0;
padding-bottom: 0;
min-height: 0;
}
.vjs-caption-settings label > input {
margin-right: 10px;
}
.vjs-caption-settings input[type="button"] {
width: 40px;
height: 40px;
}
/* Hide disabled or unsupported controls */
.vjs-hidden {
display: none !important;
}
.vjs-lock-showing {
display: block !important;
opacity: 1;
visibility: visible;
}
.vjs-no-js {
padding: 2em;
color: #ccc;
background-color: #333;
font-size: 1.8em;
font-family: Arial, sans-serif;
text-align: center;
width: 30em;
height: 15em;
margin: 0 auto;
}
.vjs-no-js a,
.vjs-no-js a:visited {
color: #F4A460;
}
.video-overlay .close:hover {
transform: scale(.9);
}
.introjs-hintReference {
opacity: 0;
}
/* Text added to intro hints */
.introjs-hints .introjs-hint .text {
margin-left: 20px;
color: #a2a2a2;
font-size: 10px;
font-family: "Roboto";
margin-top: -2px;
white-space: nowrap;
}