/* ==========================================================================
    Course box styles
===========================================================================*/
	video {
		border: 1px solid black;
		padding: 0;
		width: 100%;
		background-color: black;
		margin: auto;
		float: left;
		position: relative;
	}
	.divcourse {
		margin-left: 18px;
	}
	p {
	    line-height: 140%;
	    padding: 10px 10px 0px 10px;
	}
	application-cd2ac3c….css:16
	p, ol, ul {
	    margin-top: 0;
	    margin-bottom: 0px;
	}
	
	application-cd2ac3c….css:8
	p {
	    margin: 0 0 10px;
	}
	application-cd2ac3c….css:8
	* {
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	p {
	    display: block;
	    -webkit-margin-before: 1em;
	    -webkit-margin-after: 1em;
	    -webkit-margin-start: 0px;
	    -webkit-margin-end: 0px;
	}	
	.divpaid{
		display: none;	
		width: 100%;
		height: auto;
	}
	
	.ts-courseTB-head{
		display: table;
		width: 100%;
		height: auto;				
		/*background-color: #fafafa;	*/
		text-align: top;	
	}
	.ts-courseRow-head{
		display: table-row;
		width: 100%;
		height: auto;
		text-align: top;
	}	
	.ts-cellLeft-head{
		display: table-cell;
		float: leftl;			
		text-align: left;
		vertical-align: middle;
	}
	.ts-cellRight-head{
		display: table-cell;	
		float: right;		
		text-align: left;		
		width: 90px;
		vertical-align: middle;
	}
	
	.ts-courseTB{
		display: table;
		width: 100%;
		height: auto;				
		/*background-color: #fafafa;	*/
		text-align: top;	
	}
	.contentHead{
		display: block;					
		text-align: left;
		text-align: top;
		width: 100%;
		color: #ffffff;
		background: #00a499;
	}
	.ts-courseRow{
		display: table-row;
		width: 100%;
		height: auto;
		text-align: top;
	}	
	.ts-courseRow:hover{
		background: #fafafa;
	}
	.ts-cellLeft{
		display: table-cell;
		float: leftl;			
		text-align: left;
		/*text-align: top;
		width: 70%;*/
	}
	.ts-cellRight{
		display: table-cell;	
		float: right;		
		text-align: left;
		/*text-align: top;*/		
		color: #666666;
		width: 90px;
	}
	
	.contentTB{
		display: table;
		width: 100%;
		height: auto;				
		background-color: #ffffff;	
		text-align: top;	
	}
	.contentHead{
		display: block;					
		text-align: left;
		text-align: top;
		width: 100%;
		color: #ffffff;
		background: #00a499;
	}
	.contentRow{
		display: table-row;
		width: 100%;
		height: auto;
		text-align: top;
	}	
	.contentRow:hover{
		background: #fafafa;
	}
	.cellLeft{
		display: table-cell;
		float: leftl;			
		text-align: left;
		text-align: top;
		/*width: 70%;*/
	}
	.cellRight{
		display: table-cell;	
		float: right;		
		text-align: left;
		text-align: top;
		color: #666666;
		width: 90px;
	}
	
 .slick-slide {
      margin: 0px 2px;
    }
    .slick-prev:before,
    .slick-next:before {
      	color: black;
    }
    .slick-prev {
    	left: 0;
    	z-index: 50;
    	font-size: 2em;
    }
    .slick-next {
    	right: 0;
    	z-index: 50;
    }
    .slick-track {
    	margin-left: 0 !important; 
    }
	
	/*
	.black-ribbon {  position: fixed;  z-index: 9999;  width: 40px;}
	@media only all and (min-width: 768px) {  .black-ribbon {    width: auto;  }}
	.stick-left { left: 0; }
	.stick-right { right: 0; }
	.stick-top { top: 0; }
	.stick-bottom { bottom: 0; }
	*/
	.ribbon {
	  position: absolute;
	  left: -5px; top: -5px;
	  z-index: 1;
	  overflow: hidden;
	  width: 75px; height: 75px;
	  text-align: right;
	}
	.ribbon span {
	  font-size: 10px;
	  font-weight: bold;
	  color: #FFF;
	  text-transform: uppercase;
	  text-align: center;
	  line-height: 20px;
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	  width: 100px;
	  display: block;
	  background: #79A70A;
	  background: linear-gradient(#F70505 0%, #8F0808 100%);
	  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	  position: absolute;
	  top: 19px; 
	  left: -21px;
	}
	.ribbon span::before {
	  content: "";
	  position: absolute; 
	 /* left: 0px; */
	  top: 100%;
	  z-index: -1;
	  border-left: 3px solid #8F0808;
	  border-right: 3px solid transparent;
	  border-bottom: 3px solid transparent;
	  border-top: 3px solid #8F0808;
	}
	.ribbon span::after {
	  content: "";
	  position: absolute;  
	  right: 0px;
	  top: 100%;
	  z-index: -1;
	  border-left: 3px solid transparent;
	  border-right: 3px solid #8F0808;
	  border-bottom: 3px solid transparent;
	  border-top: 3px solid #8F0808;
	}
	
	.courseBlock {
		display: inline-block;
		width: 227px;
		height: 250px;		
		background-color: #fff;
		border: 4px solid #fff;
		border-bottom: 20px solid #fff;
		vertical-align: top;		
	}
	
	.courseBlock_h {
		display: inline-block;
		width: 227px;
		height: 250px;		
		background-color: #fff;
		border: 4px solid #fff;
		border-bottom: 20px solid #fff;
		vertical-align: top;	
	}
	
	.courseBlockVdo {
		display: block;
		width: 211px;
		height: 226px;		
		background-color: #fafafa;
		border: 1px solid #fcfcfc;
		border-radius: 0.2em;
		/*border-spacing: 2px;
		border-radius: 0.375em; #00a499*/
		/* border-collapse:separate;*/
	}
		
	.poster {
		display: block;
		width: 100%;
		height: auto;	
		background-size: cover;
	    background-position: top center;
    	background-repeat: no-repeat;
    	border-top-left-radius: 0.2em;
    	border-top-right-radius: 0.2em;
		z-index: 1;		
		/*transition:all 0.2s ;
		-webkit-transition:all 0.2s ;
		-o-transition:all 0.2s ;
		-moz-transition:all 0.2s ;	*/
	}
	.poster:hover {
		background-size: 150%;
		background-position: center;
	}
	
	.poster span {
	  position : relative;	  
	  z-index : -10;
	  width: 100%;
	  height: 122px;
	  opacity : 0.0;	  	
	  top: 10%;
	  /*background: #cccccc 60%; */
	  color: #fff;
	} 

	.poster:hover span{
	  display : block;
	  z-index : 10;
	  opacity : 1.0;	 
	}
	
	.course_name{
		display: block;
		width: 100%;
		min-height: 80px;
		max-height: auto;
		text-align: left;
		vertical-align: top;		
		font-weight: 600;
		margin-left: 0.2em;
		margin-right: 0.2em;
		/*background: #000033;*/
	}
	.course_name a{
		font-size: 0.9em; 
	}
	.teacher{
		display: block;
		width: 100%;
		height: 35px;
		text-align: left;
		vertical-align: top;
		font-size: 0.9em; 
		font-weight: 600;
		margin-left: 0.2em;
		margin-right: 0.2em;
		background-color: #ffffff;		
	}	
	.teacher img{
		border-radius: 50px;
	}
	.teacher span{
		vertical-align:middle;
	}
	.course_price{
		display: block;
		position: relative;
		width: 100%;
		height: 16px;
		text-align: right;
		vertical-align: bottom;
		font-size: 0.7em; 
		font-weight: 600;
		margin-left: 0.2em;
		margin-right: 0.2em;		
		color: red;		
	}
	
	.divheadRow {
		display: table-header-group;
		width: auto;
		background-color: #fff;
		color: #7f888f;
	}
	
	.divRow {
		display: table-row;
		width: 100%;
		background-color: #fff;
	}
	
	.divCell {
		float: left; /*fix for  buggy browsers*/
		display: table-column;
		width: auto;
		height: 32px;
		margin-left: 0.5em;
	}
	
	.divHR {
		display: block;
		width: 100%;
		border-bottom: 1px solid #cccccc;	
	}
	
	.viewall{
		display: inline;
	}
	
	#div-present{				
		display: block;
		width: 100%;
		height: auto;
		max-height: 770px;
	}
	
	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 280px),
	(min-device-width: 288px) and (max-device-width: 624px)  {
	
		.divcourse {
			display: none;
		}
		.divpaid{
			display: block;
		}
		.cellRight{
			width: 60px;
		}
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ffffff; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 0px solid #ffffff; 
			position: relative;
			width: 100%;
			/*padding-left: 50%; */
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*.courseTB{
			display: none;
		}*/
		
		.commentTB{
			display: none;
		}
		
		.comment{
			display: none;
		}
		
		/*
		Label the data
		*/
		/*td:nth-of-type(1):before { content: ""; }
		td:nth-of-type(2):before { content: ""; }*/
		
			
	}
		
	@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		#div-present{
			display: none;
		}											
	}
	
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			/*padding: 0; 
			margin: 0; 
			width: 320px; */
			width: 100%; 
		}
		.courseBlock {		
			width: 100%;
			height: 240px;		
		}
		.courseBlock_h {		
			display: none;	
		}
		
		.viewall{
			display: none;
		}
	}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 226px;			
		}
		.courseBlock_h {		
			display: none;	
		}
	}
	
	@media only screen and (max-device-width: 1440px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 245px;			
		}
		.courseBlock_h {		
			display: none;	
		}
	}
	
	@media only screen and (max-device-width: 1366px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 227px;			
		}
		.courseBlock_h {		
			display: none;	
		}
	}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 226px;			
		}
		.btnprice {
			height: 36px;	
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	@media only screen and (max-device-width: 1440px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 245px;			
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	@media only screen and (max-device-width: 1366px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 227px;			
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	/* added on 2019-09-04 */
	.desc-less {
		height: 150px;
		overflow-y: hidden;
		transition-duration: 500ms;
	}
	.desc-more {
		height: auto;
		overflow-y: auto;
		transition-duration: 500ms;
	}
	
	@media 
	only screen and (max-width: 280px),
	(min-device-width: 288px) and (max-device-width: 624px)  {
	
		.divcourse {
			/*display: none;*/
			margin-left: 0px;
		}
		.btnprice {
			 height: 38px;
		}
		.divpaid{
			display: block;
		}
		.ts-cellRight{
			width: 60px;
		}
		.ts-cellRight-head{
			width: 60px;
		}
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ffffff; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 0px solid #ffffff; 
			position: relative;
			width: 100%;
			/*padding-left: 50%; */
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*.courseTB{
			display: none;
		}*/
		
		.commentTB{
			display: none;
		}
		
		.comment{
			display: none;
		}
		
		/*
		Label the data
		*/
		/*td:nth-of-type(1):before { content: ""; }
		td:nth-of-type(2):before { content: ""; }*/
		
			
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			/*padding: 0; 
			margin: 0; 
			width: 320px; */
			width: 100%; 
		}
		.courseBlock {		
			width: 100%;
			height: 240px;		
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 226px;			
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	@media only screen and (max-device-width: 1440px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 245px;			
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}
	
	@media only screen and (max-device-width: 1366px) {
		body { 
			/*width: 755px; */
			width: 100%;
		}
		.courseBlock {		
			width: 227px;			
		}
		/*.courseBlock_h {		
			display: none;	
		}*/
	}