/* ########################## VIEDO EMBED ##################*/

.media-object {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-flow: wrap row;
  align-items: flex-start;
  margin-bottom: 30px; /* added cm 202502 */
  /*border: 3px solid green;*/

}


/* Video Column treatment */
.is-page.how .media-object .video {
  flex-basis: 100%;
  margin-right: 0;
  margin-bottom: .5em;
}

.is-page.how .media-object .video-desc {
  flex-basis: 100%;
}

.kWidgetCentered.kWidgetPlayBtn {
  margin: auto !important;
}


.media-object .video {
  flex: 1 1 50%;
  position: relative;
  margin-right: 20px;
  order:0;
  border: 1px solid black;
}

.media-object .video-desc {
  flex: 1 1 40%;
  order:1;
  /*border: 1px solid black;*/
}

/* Add this style to a video with transcript content page */
.videoTrans {
	width: 100%;
	max-width: 800px;
	display: inline-block;
	position: relative;
	margin-bottom: 37px;
	}

.media-object .video-desc .view-trans{
  align-items: center;
  height: 20%;
  /*border: 3px solid rgba(255, 255, 255, 0.5);*/
}

.view-trans * {
  margin: auto;
}

/*.view-trans a {
  text-decoration: none;
}*/

/* This will resize this DIV to scale video to 16:9 ratio */
.video-ratio {
  margin-top: 56.25%;
}

/* This finds the Kaltura dynamic playe ID and adds bottom padding */
[id^="kaltura_player_"]{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Changes the play btn of the thumb embed button */
.kWidgetPlayBtn {
	height: 78px!important;
	width: 78px !important;
	margin-top: -3em !important;
	margin-left: -2.5em !important;
	opacity:.7;
	background: url('//www.ets.org/s/kaltura/kaltura-playbutton.png') !important;
}

/* creates a cirle focus outline instead of square */
.btn:focus,
.btn:hover {
    outline-color:rgb(48, 114, 190) !important;
}

.kWidgetPlayBtn:focus,
.kWidgetPlayBtn:hover {
	opacity: 1 !important;
	/*border-style:solid !important; MAKRE BORDER SHOW */
    outline-color:rgba(255, 119, 0, 0) !important;
    border-color: rgb(48, 114, 190) !important;
	border-radius: 40px !important;
}

/*********************************************************************/
/*********************** MEDIA ************************/

@media only screen and (max-width : 850px) {
  .media-object .video {
  flex: 1 1 100%;
    margin-right: 0px;
    order:0;
    border: 1px solid green;
  }

  .media-object .video-desc {
    flex: 1 1 auto;
    padding-top:10px;
    order:1
  }

}

@media only screen and (min-width: 550px) {
	}

@media only screen and (max-width: 550px) {
	}