@charset "utf-8";
/* CSS Document */
body{
	overflow: hidden;
	background-color:#d1d1d1;
	height:100%;
}

/*-- Alert Box */
.headerWraper{
	top: 0px;
    /* margin-top: 40px; */
}
.MenuWraper{
	
/* background-color:#07cdb8; */
	
overflow: auto;
	
margin: 0px;
	
height: 45px;
	
width: 223px;
}
.aletBox{
	height:100%;
	background-color:rgba(0, 0, 0, 0.56);
	width:100%;
	position:absolute;
	z-index: 9999;
	display:none;
}

.alertHeadder p
{
	text-align:center;
	font-family: sans-serif;
	font-style:normal;
	font-weight:bold;
	color:#FFFFFF !important;	
}
.menuCloseStrip{
	background-color:#fff;
	height:20px;
	width:100%;
	
}

.alertPanel{
	margin:0px auto;
	width:200px;
	background-color:#FFFFFF;	
	width:450px;
	margin-top:220px;
	border-radius:5px;
}

.alertHeadder{
	background-color:rgb(255, 86, 110);
	margin:0px;
	width:100%;
	padding:7px 0px 2px 0px;
	border-radius:5px 5px 0px 0px;
}
.alertBody p
{
	text-align:center;
	font-family:sans-serif;
	font-style:normal;	
	margin-top:20px;
}

button{
  font-variant:normal;
  font-style:normal;
  font-weight:normal;
  font-family:sans-serif;	
}

#yesBtn,#noBtn{
	background-color:rgb(255, 86, 110);
	border:none;
	color:#FFFFFF;
	padding:5px 20px 5px 20px;
}

.alertControl{
	text-align:center;
	padding:20px 0px 20px 0px;	
}

/* Pre-loader */
/* Pre-loader */
#preloader  {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	height: 100%;
}
#status  {
	position: absolute;
	width:128px;
	height:128px;
	left: 50%;
	top: 50%;
	background:url('../images/loader.gif') center no-repeat;
	margin: -100px 0 0 -100px;
}
/*************/
.btn-sample { 
	color: #07cdb8; 
	background-color: rgba(0, 0, 0, 0); 
	border-color: rgba(0, 0, 0, 0); 
	font-size: 17px;
	padding-bottom: 0;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
} 

.btn-samle-subtitle{
	padding: 0px 40px 0px 5px;
    background: rgba(0, 0, 0, 0.5);
    margin-top: -1px;
}

.btn-sample:hover, .btn-sample:focus, .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample {
	color: #07cdb8; 
	text-shadow: 0px 0px 10px #aaf9f1;
} 
 
.btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample {
	background-image: none; 
} 
 
.btn-sample.disabled, .btn-sample[disabled], fieldset[disabled] .btn-sample, .btn-sample.disabled:hover, .btn-sample[disabled]:hover, fieldset[disabled] .btn-sample:hover, .btn-sample.disabled:focus, .btn-sample[disabled]:focus, fieldset[disabled] .btn-sample:focus, .btn-sample.disabled:active, .btn-sample[disabled]:active, fieldset[disabled] .btn-sample:active, .btn-sample.disabled.active, .btn-sample[disabled].active, fieldset[disabled] .btn-sample.active {
	background-color: #000000; 
	border-color: #000000; 
} 
 
.btn-sample .badge { 
	color: #000000; 
	background-color: #ffffff; 
}

.wrapper{
	position:relative;
	max-height:680px;
	max-width:1024px;
}
.header{
	padding:0px;
	padding: 0px;
	z-index: 2;
	position: inherit;
	position: absolute;
	width: 97.1%;

}
.logo-bar{
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
	height: 45px;
}
.title-bar{
	background-color:#ebebeb;
	border-top:1px solid #afafaf;
}
.logo{
	display: block;
	padding: 5px 10px 5px 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.logoImg{
	/* border-right: #2a2a2a solid 1px; */
	padding-right: 10px;
	margin-top: 9px;
	float:left;
	width: 21%;
}
.pageTitle{
	float:left;
	margin-top: 14px;
	margin-left: 14px;
	font-size: 14px;
	letter-spacing: 1px;
}
.course-title{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	font-family:sans-serif;
	font-style:normal;
}
.resource_btn{
	float:right;
	right:15px;
	height:35px;
	width:25px;
	display:inline-block;
	background:url(../images/button.png) -30px, 0px;
	background-repeat:no-repeat;
}
.menu_btn{
	float: right;
    height: 40px;
    width: 30px;
    display: block;
    background-image: url(../images/button.png);
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 4px 18px 0px 11px;
    /* background-position: -61px, 0px; */
    background-size: 100%;
    /* background-color: #000; */
}
.menuText{
	float:right;
	font-family: sans-serif;
	font-style: normal;
	color: white;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	text-align: center;
	margin: 0px 0px 0px 0px;
	letter-spacing: 2px;
	/* border-right: #6ae1d4 solid 2px; */
	height: 44px;
	padding: 12px 21px 10px 0px;
}
.padding0{
	padding:0px;
}
.videoContainer{
	background-color:#000000;	
	margin:0px -15px;
}
#video{
	width:100%;
	height:auto;
	margin:0px;
	background: white;
}
#video-controls{
	display: block;
	margin:0px;	
	margin: 3px 0px 3px 0px;
}
.progressBar{
    position: relative;
    width: 73%;
    height: 5px;
    background: rgba(0,0,0,0.4); /* fallback */
	box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 1px rgba(0,0,0,1);
	border-radius:10px;
	display:inline-block;
}

.dragger{
	position: absolute;
	top:-3px;
	width:10px;
	height:10px;	
	background-color: #07cdb8;
	border-radius: 50%;
	cursor:pointer;
}
.timeBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,1) 100%);
	box-shadow: 0 0 7px rgba(107,204,226,.5);
}
.playPause, .muteUnmute, .transcriptOnOff{
	position:relative;
	margin:0px;
	padding:0px;
	width:auto;
	height:100%;
	display:inline;
}

#volume-bar{	
	display:inline;
	width:20%;
}

#videoDuration{
	margin-left:15px;
	display:block;
	position:relative;
	display:inline;
	width:100%;
	color:#000000;
}

.externalPage{
	position: absolute;
    width: 100%;
    top: 0px;
	left: 0px;
    margin: 0px;
    padding: 0px;
}
iframe{
	border:0px;
	background:none;
	position:absolute;
	/* top: 40px; */
	width:100%;
	height: 626px;
	margin:0 auto;
	display:none;
	background-color: rgba(0, 0, 0, 0.40);
	z-index:2;
}

#subtitles{
	height:100%;
	text-indent:0;
	font-size:16px;	
	font-weight:bold;
	/*color:#333;
	background:#E5E5E5;*/
	border:none;
}

#subtitles:focus{

border:none;
}
video::-webkit-media-text-track-display {
  font-size: 14px;
}
::cue {
	color:#FFF;
	font-size:14px;
}

#menuList{
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    padding: 0px;
    max-width: 100%;
    left: 0px;
    top: -58%;
    height: 93%;
    /* border: 5px solid rgba(0, 0, 0, 0.22); */
    overflow:hidden;
	z-index: 1;
}
#menuList ul {
	padding: 11px;
	position: absolute;
	background-color: #07cdb8;
	border: #07cdb8 solid 2px;
	margin: 0px;
}
#menuList ul > li{
	float:left;
	list-style:none;
	display:inline-block;
	border: 2px solid #059687;
	background-color: rgb(5, 150, 135);
	/*background:url(../images/menu_selected.png) 0px, 0px;
	background-repeat:no-repeat;*/
	color:#FFFFFF;
	width:157px;
	height:156px;
	margin: 4px;
	cursor:pointer;
	position: relative;
}
#menuList ul > li:last-child{
	border-right:0 none;
}
#menuList ul > li > div{
	position: absolute;
	bottom: -5px;
}
#menuList ul > li > *{
	font-family:sans-serif;
	font-style:normal;
}

#menuList ul > li p{
	color:#fff;
	margin-bottom:2px;
}
#menuList ul > li h3{
	color: #cbcbcb;
    margin-bottom: 2px;
    padding: 0px 10px 0px 10px;
    min-height: 40px;
}

.vidio-start{
	width: 154px;
	height:40px;
	background-color: #059687;
	border: none;
	margin: 0px;
	color:#FFFFFF;
	text-transform: uppercase;
}
.vidio-start p{
	float:left;
}

.ThumbTitle{
    background-color: rgba(0, 0, 0, 0.68);
    width: 100%;
    margin: 0px 0px 5px 0px;
    text-align: center;
    /* padding: 10px; */
    min-height: 27px;
}


.vidio-start span{
	float:right;
    position: absolute;
    right: 4px;
    top: 10px;
	display:none;
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.08); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.05); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.thumb_1{
	    background: url("../images/thumb_1.png") no-repeat;
}
.thumb_2{
	    background: url("../images/thumb_2.png") no-repeat;
}
.thumb_3{
	    background: url("../images/thumb_3.png") no-repeat;
}
.thumb_4{
	    background: url("../images/thumb_4.png") no-repeat;
}
.thumb_5{
	    background: url("../images/thumb_5.png") no-repeat;
}
.thumb_6{
	    background: url("../images/thumb_6.png") no-repeat;
}
.thumb_7{
	    background: url("../images/thumb_7.png") no-repeat;
}
.thumb_8{
	    background: url("../images/thumb_8.png") no-repeat;
}
.playIcon{
	background-color: rgba(12, 206, 185, 0.38);
    height: 157px;
    width: 100%;
}
.playIcon:hover{
	background-color: rgba(12, 206, 185, 0);
}
.playIcon span{
	margin: 34px 0px 0px 53px;
    color: #ffffff;
    background-color: rgb(0,0,0,0.5);
    padding: 12px;
    border-radius: 50%;
    font-size: 17px;
    /* border: #000 solid thin; */
}
@media all and (max-width: 1050px){
	iframe{
		height:800px;
	}
	#menuList {
		top: -95%;
		max-width:100%;
		overflow:hidden;
	}
	
	.progressBar{
		width:70%;
	}
}
@media all and (min-width: 700px) and (max-width:850px){
	#menuList {
		top: -95%;
		max-width:100%;
		overflow:hidden;
	}
	
	.progressBar{
		width:60%;
	}
	
}

@media all and (min-width: 701px) and (max-width:850px){
	.pageTitle{
		display:none;
	}
	
}


@media all and (min-width: 319px) and (max-width: 700px) {	
	#menuList {
		height: 350px;
		max-width:100%;
		top: -125%;
		overflow-y: scroll;
	}
	
	.playPause, .muteUnmute, .transcriptOnOff{
		margin:0px;
	}
	#videoDuration{
		margin-left:5px;
		font-size:12px;
	}
	.progressBar{
		width:30%;
	}
	.pageTitle{
		display:none;
	}
}
@media all and (max-width: 320px) {	
	#menuList {
		height: 450px;
		max-width:100%;
		top: -165%;
		overflow-y: scroll;
	}
	
	.playPause, .muteUnmute, .transcriptOnOff{
		margin:0px;
	}
	#videoDuration{
		margin-left:5px;
		font-size:12px;
	}
	.progressBar{
		width:25%;
	}
}
	
.glyphicon-subtitles:before {
    content: "\e188"!important;
    content: 'cc'!important;
    font-family: FontAwesome!important;
	z-index: 1!important;
    color: #55c2bc!important;
    position: absolute!important;
    border: solid thin #55c2bc!important;
    width: 45px!important;
    height: 22px!important;
    font-family: arial !important;
    font-size: 16px!important;
    border-radius: 2px!important;
    line-height: 20px!important;
    /* background: #FFF!important; */
    text-align: center!important;
}


.custom-subtitles {
    position: relative;
    top: -18px;
    right: 5px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}