/*------------------------------------------------------------------------

# mod_mx_course Extension

# ------------------------------------------------------------------------

# author    mixwebtemplates

# copyright Copyright (C) 2019 mixwebtemplates.com. All Rights Reserved.

# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL

# Websites: http://www.mixwebtemplates.com

-------------------------------------------------------------------------*/



.mx-courses .cource-item {

  border: 1px solid #dddddd;

}

.mx-courses .cource-item .cource-img {

  position: relative;

  margin-bottom: 22px;

}

.mx-courses .cource-item .cource-img img {

  width: 100%;

  transition: all 0.3s ease 0s;

}

.mx-courses .cource-item .cource-img .course-value {

  position: absolute;

  bottom: -35px;

  right: 25px;

  height: 70px;

  width: 70px;

  line-height: 70px;

  text-align: center;

  background-color: #ff3115;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;

  border-radius: 50%;

  z-index: 1;

}

.mx-courses .cource-item .course-body {

  text-align: center;

  padding: 0 20px;

}

.mx-courses .cource-item .course-body a{

 color: #ff3115;

}

.mx-courses .cource-item .course-body .course-category {

  display: inline-block;

}

.mx-courses .cource-item .course-body .course-title {

  font-size: 20px;

  margin-bottom: 7px;

}

.mx-courses .cource-item .course-body .course-title a {

  color: #212121;

}

.mx-courses .cource-item .course-body .course-title a:hover {

  color: rgba(33, 33, 33, 0.6);

}

.mx-courses .cource-item .course-body .review-wrap .rating, .mx-courses-3 .review-wrap .rating {

  display: inline-block;

  color: #ff3115;

  margin-right: 10px;

  padding-right: 10px;

  border-right: 1px solid #ddd;

  line-height: 10px;

}

.mx-courses .cource-item .course-body .review-wrap .review,.mx-courses-3 .review-wrap .review {

  line-height: 10px;

  display: inline-block;

}

.mx-courses .cource-item .course-body .course-desc {

  margin-top: 10px;

}

.mx-courses .cource-item .course-body .course-desc p {

  margin: 0 0 22px;

}

.mx-courses .cource-item .course-footer {

  padding: 15px 20px;

  background-color: #f0f0f0;

  text-align: center;

}

.mx-courses .cource-item .course-footer div {

  display: inline-block;

  text-align: center;

  position: relative;

  line-height: 19px;

}

.mx-courses .cource-item .course-footer div span {

  display: block;

  font-size: 14px;

  color: #212121;

  font-weight: 500;

}

.mx-courses .cource-item .course-footer div span.label {

  font-weight: 700;

  background-color: #fafafa;

  padding: 4px;

}

.mx-courses .cource-item .course-footer div div {

  padding-left: 8px;

  margin-left: 8px;

  border-left: 1px solid #ccc;

}

.mx-courses .cource-item.blue-color .course-footer {

  background: #00bcd4;

}

.mx-courses .cource-item.orange-color .course-footer {

  background: #fc7f0c;

}

.mx-courses .cource-item.purple-color .course-footer {

  background: #92278f;

}

.mx-courses .cource-item.red-color .course-footer {

  background: #e84b3a;

  box-shadow: 0 12px 20px #f4f5ff;

}



.event-item .events-details {

  margin-top: -20px;

  padding: 15px;

}

.event-item .events-details.white-bg {

  background: #fff;

}

.event-item .event-img,

.cource-item .event-img,

.event-item .cource-img,

.cource-item .cource-img {

  position: relative;

}

.event-item .event-img:after,

.cource-item .event-img:after,

.event-item .cource-img:after,

.cource-item .cource-img:after {

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: rgba(0, 0, 0, 0.6);

  -webkit-transform: scaleY(0);

  -ms-transform: scaleY(0);

  transform: scaleY(0);

  -webkit-transition: 0.4s;

  -ms-transition: 0.4s;

  transition: 0.4s;

}

.event-item .event-img .image-link,

.cource-item .event-img .image-link,

.event-item .cource-img .image-link,

.cource-item .cource-img .image-link {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) !important;

  -webkit-transform: translate(-50%, -50%) !important;

  -ms-transform: translate(-50%, -50%) !important;

  color: #ff3115;

  z-index: 11;

}

.event-item .event-img .image-link:hover,

.cource-item .event-img .image-link:hover,

.event-item .cource-img .image-link:hover,

.cource-item .cource-img .image-link:hover {

  color: #000;

}

.event-item .event-img .image-link i,

.cource-item .event-img .image-link i,

.event-item .cource-img .image-link i,

.cource-item .cource-img .image-link i {

  font-size: 20px; 

  height: 50px;

  width: 50px;

  line-height: 50px;

  text-align: center;

  border-radius: 50%;

  font-weight: 400;

  background: #f1f1f1;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  transition: all 0.3s ease 0s;

}

.event-item:hover .event-img:after,

.cource-item:hover .event-img:after,

.event-item:hover .cource-img:after,

.cource-item:hover .cource-img:after {

  -webkit-transform: scaleY(1);

  -ms-transform: scaleY(1);

  transform: scaleY(1);

}

.event-item:hover .event-img .image-link i,

.cource-item:hover .event-img .image-link i,

.event-item:hover .cource-img .image-link i,

.cource-item:hover .cource-img .image-link i {

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}



.mx-courses-3 .row.grid {

  min-height: 500px;

  overflow: hidden;

}

.mx-courses-3 .course-item {

  margin-bottom: 30px;

  border: 1px solid #dddddd;

  transition: all 0.35s ease 0s;

}

.mx-courses-3 .course-item .course-img {

  position: relative;

  margin: -1px -1px 0 -1px;

}

.mx-courses-3 .course-item .course-img:before {

  background: rgba(0, 0, 0, 0.5);

  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));

  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));

  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));

  position: absolute;

  content: "";

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -webkit-transition: all 1s ease;

  transition: all 1s ease;

}

.mx-courses-3 .course-item .course-img img {

  width: 100%;

}

.mx-courses-3 .course-item .course-img .course-value {

  position: absolute;

  bottom: -30px;

  right: 22px;

  height: 60px;

  width: 60px;

  line-height: 60px;

  text-align: center;

  background-color: #ff3115;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;

  border-radius: 50%;

}

.mx-courses-3 .course-item .course-toolbar {

  position: absolute;

  width: 100%;

  bottom: 15px;

  padding: 0 20px;

}

.mx-courses-3 .course-item .course-toolbar .course-category {

  margin-bottom: 15px;

  font-size: 24px;

  color: #ffffff;

}

.mx-courses-3 .course-item .course-toolbar .course-category a {

  font-size: 24px;

  color: #ffffff;

}

.mx-courses-3 .course-item .course-toolbar .course-category a:hover {

  color: #ff3115;

}

.mx-courses-3 .course-item .course-toolbar .course-date,

.mx-courses-3 .course-item .course-toolbar .course-duration {

  display: inline-block;

  font-size: 14px;

  text-transform: uppercase;

  color: #ffffff;

  font-weight: 300;

}

.mx-courses-3 .course-item .course-toolbar .course-date i,

.mx-courses-3 .course-item .course-toolbar .course-duration i {

  margin-right: 3px;

}

.mx-courses-3 .course-item .course-toolbar .course-duration {

  margin-left: 12px;

}

.mx-courses-3 .course-item .course-body .course-title {

  font-size: 20px;

  margin-bottom: 7px;

}

.mx-courses-3 .course-item .course-body .course-title a {

  color: #212121;

}

.mx-courses-3 .course-item .course-body .course-title a:hover {

  color: rgba(33, 33, 33, 0.6);

}

.mx-courses-3 .course-item .course-body .course-desc {

  padding: 20px;

}

.mx-courses-3 .course-item .course-body .course-desc p {

  margin-bottom: 10px;

  transition: all 0.35s ease 0s;

}

.mx-courses-3 .course-item:hover {

  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.1);

}

.mx-courses-3 .course-item:hover .course-img:before {

  background: rgba(0, 0, 0, 0.5);

  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

}

.mx-courses-3 .course-footer {

  padding: 15px 20px;

  background-color: #f0f0f0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  font-weight: 600;

  font-size: 15px;

}

.mx-courses-3 .course-footer .course-button a {

  color: #505050;

  display: inline-block;

  position: relative;

  padding-right: 12px;

}

.mx-courses-3 .course-footer .course-button a:hover {

  color: #ff3115;

}

.mx-courses-3 .course-footer .course-button a:after {

  font-family: fontAwesome;

  content: "\f101";

  position: absolute;

  right: 0;

}

.mx-courses-3 .view-more {

  bottom: auto;

}

.mx-courses-list .course-item {

  margin-bottom: 40px;

}

.mx-courses-list .course-item .course-img {

  position: relative;

}

.mx-courses-list .course-item .course-img:before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(33, 33, 33, 0.8);

  transition: all 0.3s ease 0s;

  opacity: 0;

}

.mx-courses-list .course-item .course-img .image-link {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 50px;

  line-height: 50px;

  height: 50px;

  border-radius: 50%;

  text-align: center;

  background-color: #ff3115;

  color: #ffffff;

  font-size: 18px;

  transform: translateX(-50%) translateY(-50%) scale(0.7);

  transition: all 0.3s ease 0s;

  opacity: 0;

}

.mx-courses-list .course-item .course-img .image-link:hover {

  background-color: #e41f05;

}

.mx-courses-list .course-item .course-img:hover:before {

  opacity: 1;

}

.mx-courses-list .course-item .course-img:hover .image-link {

  opacity: 1;

  transform: translateX(-50%) translateY(-50%) scale(1);

}

.mx-courses-list .course-category {

  margin-bottom: 0;

  font-size: 15px;

  font-weight: 600;

}

.mx-courses-list .course-category a {

  color: #505050;

}

.mx-courses-list .course-title {

  font-size: 24px;

  margin-bottom: 7px;

}

.mx-courses-list .course-title a {

  color: #212121;

}

.mx-courses-list .course-title a:hover {

  color: #ff3115;

}

.mx-courses-list .course-date,

.mx-courses-list .course-value {

  display: inline-block;

  font-size: 14px;

  color: #777777;

  font-weight: 600;

}

.mx-courses-list .course-value {

  margin-left: 12px;

}

.mx-courses-list .course-value span {

  color: #ff3115;

}

.mx-courses-list .course-body {

  margin-top: 12px;

}

.mx-courses-list .course-button a {

  display: inline-block;

  height: 42px;

  line-height: 42px;

  text-align: center;

  min-width: 170px;

  padding: 0 20px;

  background-color: #ff3115;

  color: #fff;

  transition: all 0.3s ease 0s;

  font-weight: 500;

}

.mx-courses-list .course-button a:hover {

  background-color: #e41f05;

}

.gridFilter {

  margin-bottom: 35px;

}

.gridFilter button {

  background: transparent;

  border: 0;

  font-size: 15px;

  font-weight: 700;

  outline: none;

  color: #505050;

  cursor: pointer;

}

.gridFilter button.active {

  color: #ff3115;

}

.gridFilter button + button {

  margin-left: 20px;

}

.mx-courses-categories .container {

  overflow: hidden;

}

.mx-courses-categories .container .col-lg-3 {

  margin-bottom: 30px;

}

.mx-courses-categories .courses-item {

  text-align: center;

  background-color: #f0f0f0;

  padding: 30px 30px 22px;

}

.mx-courses-categories .courses-item .courses-title {

  font-size: 20px;

  margin-bottom: 5px;

  margin-top: 18px;

}

.mx-courses-categories .courses-item .courses-title a {

  color: #212121;

}

.mx-courses-categories .courses-item .courses-title a:hover {

  color: #ff3115;

}

.mx-courses-categories .courses-item .courses-amount {

  font-size: 13px;

  font-weight: 600;

  color: #505050;

}

.mx-courses-categories .courses-item i {

  display: inline-block;

  width: 80px;

  height: 80px;

  line-height: 80px;

  text-align: center;

  background-color: #ff3115;

  color: #ffffff;

  border-radius: 50%;

  font-size: 36px;

  transition: 0.5s;

  -webkit-transition: 0.5s;

  -ms-transition: 0.5s;

}

.mx-courses-categories .courses-item:hover {

  background-color: #d0d0d0;

}

.mx-courses-categories .courses-item:hover i {

  background-color: #212121;

  color: #ff3115;

  transform: rotate(360deg);

}



.cource-item .instructor {

 display:flex;

 align-items:center;

  text-align: center;

 background-color: #fafafa;

 color: #555;

 padding: 5px 20px;

}

.course-toolbar .instructor {

 display:flex;

 align-items:center;

  text-align: center;

}

.cource-item .instructor span,.course-toolbar.instructor span {

 margin-left: 20px;

}

.cource-item .instructor-thumb {

 width:50px;

 height:50px;

 border-radius:50%;

 -webkit-border-radius:50%;

 -ms-border-radius:50%;

 display:inline-block;

 margin-right:20px;

 background:#defff6;

 overflow:hidden

}

 .course-toolbar .instructor-thumb {

 width:40px;

 height:40px;

 border-radius:50%;

 -webkit-border-radius:50%;

 -ms-border-radius:50%;

 display:inline-block;

 margin-right:10px;

 background:#defff6;

 overflow:hidden

}

.cource-item .instructor-thumb img,.course-toolbar .instructor-thumb img  {

 width:100%

}

.cource-item .instructor a {

 font-size:16px;

 color: #ff3115;

 font-weight:500;

 line-height:26px

}

.course-toolbar .instructor a {

 font-size:16px;

 margin-left: 15px;

 color: #ff3115;

 font-weight:500;

 line-height:26px

}