
.media-object {
  display: flex;
  display: -ms-flexbox;
  flex-flow: wrap row;
  align-items: flex-start;

  /*border: 3px solid green;*/
}

/* BEFORE PLAYER LOADS*/
.player-ready {
  position: absolute;
  flex: 1 1 100%;
  display: flex;
  align-content: center;
  z-index: 11;
  height: 700px;
  width: 640px;
  background-color: #434343;
}

.fa-spinner {
  margin: auto;
  align-self: center;
  color: white;
  -webkit-animation: fa-spin 1s infinite linear;
          animation: fa-spin 1s infinite linear;
}

/* BEFORE PLAYER LOADS*/

/* ON PAGE LIST */
.media-object .video-playlist-onpage {
  flex: 1 1 100%;
  height: auto;
  max-width: 640px;
  position: relative;
  /*border: 1px solid blue;*/
}

.media-object .fade-out {
  z-index: 10;
  display: flex;
  flex: 1 1 100%;
  margin-top: 42px;
  max-width: 640px;
  height: 290Px;
  background-color: #434343;
  /* animations*/
  -webkit-animation: fadeOut 2s ease 3s forwards,
             moveZ 2s 5s forwards;
          animation: fadeOut 2s ease 3s forwards,
             moveZ 2s 5s forwards;
  /**/
  /*border: 2px solid white;*/
}

/* FRAMES*/
@-webkit-keyframes fadeOut {
  100% {
    opacity:0;
  } 0% {
    opacity:1;
  }
}
@keyframes fadeOut {
  100% {
    opacity:0;
  } 0% {
    opacity:1;
  }
}

@-webkit-keyframes moveZ {
  from {
    z-index: 10;
  } to {
    z-index: 0;
  }
}

@keyframes moveZ {
  from {
    z-index: 10;
  } to {
    z-index: 0;
  }
}

@-webkit-keyframes pulse {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes pulse {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
/* FRAMES*/

#playListHolder {
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #434343;
  flex: 0 1 640px;
  margin-top: -290px;
  height: 290px;
  /*border: 1px solid blue;*/
}

.multi-trans {
  flex: 1 1 100%;
  color: white;
  height: 15px;
  text-align: center;
  max-width: 640px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #888888;
  /*border: 2px solid green;*/
}

/* This will resize this DIV to scale video to 16:9 ratio */
.video-ratio {
  margin-top: 56.25%;
}

.accordion h2[role=button], .accordion h3[role=button] {
  max-width: 640px;
}

.bellows ul {
  margin-top: 10px;
}

.bellows ul li {
  list-style-type: none;
}

.bellows ul li a:link {
  text-decoration: none;
}

/* This finds the Kaltura dynamic playe ID and adds bottom padding */
[id^="kaltura_player_pl"]{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -42px;
  background-color: #434343;
}

/*********************************************************************/


/*********************************************************************/
/*********************** MEDIA ************************/

@media only screen and (max-width : 850px) {
}

@media only screen and (min-width: 550px) {
}

@media only screen and (max-width: 550px) {
}
