.courses-title {
    margin-top: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 0;
    position: relative;
    font-size: 1.5rem;
	font-family: 'Signika Negative', sans-serif;
    color: #525b6e;
    font-weight: 600;
}

.courses-title:before, .courses-title:after {
    position: absolute;
    content: "";
    bottom: -12px;
    left: calc(var(--bs-gutter-x)/ 2);
    height: 2px;
}

.courses-title:after {
    right: calc(var(--bs-gutter-x)/ 2);
    background-color: #e6e6e8;
}

.courses-title:before {
    width: 50px;
    z-index: 1;
	background-color: rgba(102,16,242,.7);
}

.courses-card {
  margin: 10px auto;
  background: #555555;
  box-shadow: 0 1px 38px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 1s;
  transform: translateX(0) scale(1);
  cursor:pointer;
   position: relative;
}

.courses-card:hover {
	transform: scale(1.05);
	transform: translateY(0);
}

.courses-card:hover .show{
  transition: 0.5s;
  transform: translateY(-100%);
  opacity: 1!important;
}

.courses-card .back {
	position: absolute;
	left:0;
	background-color: rgba(255, 255, 255, 1);
	opacity: 0!important;
	z-index: 1;
}

.courses-card .background {
  background-size: cover;
  background-position: center center;
  opacity: 0.5;
  transition: opacity 1s, visibility 1s;
  position: absolute;
  width: 100%;
  height: 356px;
}

.courses-card .top {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.courses-card:hover .background {
  opacity: 0.8;
	transition: opacity 1s, visibility 1s;
}

.courses-card .top .wrapper {
	padding: 15px;
	position: relative;
	z-index: 1;
	min-height: 356px;
    max-height: 356px;
    overflow: auto;
}

.courses-card .top .wrapper .mynav {
  height: 20px;
}

.courses-card .top .wrapper .mynav .lnr {
  color: #fff;
  font-size: 20px;
}

.courses-card .top .wrapper .mynav .lnr-chevron-left {
  display: inline-block;
  float: left;
}

.courses-card .top .wrapper .mynav .lnr-cog {
  display: inline-block;
  float: right;
}

.courses-card .top .wrapper .heading {
  font-size: 21px;
  font-weight: 400;
  color: #fff;
  opacity: 1!important;
}

.courses-card .top .wrapper .area {
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  opacity: 1!important;
}

.courses-card .top .wrapper .content {
  font-size: 14px;
  margin-top: 20px;
  color: #333!important;
  overflow: hidden;
}

.back .wrapper .content {
	margin-top: 0!important;
}

.courses-card .top:after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.courses-card .bottom {
  padding: 0 10px;
  background: #fff;
  font-size: 12px;
}

.courses-card .bottom .wrapper div{
	color:#999;
}

.courses-card .bottom .wrapper div:hover{
	color:#000;
}

.courses-card.rain .top {
  background: url("http://img.freepik.com/free-vector/girl-with-umbrella_1325-5.jpg?size=338&ext=jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}