/*------------------------------------------------------------------------
# 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
-------------------------------------------------------------------------*/

.la-member{
  position: relative;
}

.single-courses-item{
 position:relative;
 perspective:1000px
}
.single-courses-item a{ color: var(--thm16-base)}
.single-courses-item  .front,.single-courses-item  .back{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:inherit;-moz-perspective:inherit;perspective:inherit;min-height:inherit;-webkit-border-radius:inherit;-moz-border-radius:inherit;border-radius:inherit;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-color:#fff;-webkit-transition:-webkit-transform .8s cubic-bezier(0.5,0.2,0.2,0.8);transition:-webkit-transform .8s cubic-bezier(0.5,0.2,0.2,0.8);-o-transition:-o-transform .8s cubic-bezier(0.5,0.2,0.2,0.8);-moz-transition:transform .8s cubic-bezier(0.5,0.2,0.2,0.8),-moz-transform .8s cubic-bezier(0.5,0.2,0.2,0.8);transition:transform .8s cubic-bezier(0.5,0.2,0.2,0.8);transition:transform .8s cubic-bezier(0.5,0.2,0.2,0.8),-webkit-transform .8s cubic-bezier(0.5,0.2,0.2,0.8),-moz-transform .8s cubic-bezier(0.5,0.2,0.2,0.8),-o-transform .8s cubic-bezier(0.5,0.2,0.2,0.8)}

.single-courses-item  .front{
 transition:transform .75s ease-in-out;
 box-shadow:#959da533 0 8px 24px;
 background-color:#fff;
 transform-style:preserve-3d;
 backface-visibility:hidden;
 transform:rotateY(0);
 position:relative
}
.single-courses-item  .front  .image{
 text-align:center;
 padding-top:25px;
 padding-left:25px;
 padding-right:25px
}
.single-courses-item  .front  .content{
 padding:20px 25px 25px
}
.single-courses-item  .front  .content  h3{
 margin-bottom:10px;
 line-height:1.4;
 font-size:22px;
 font-weight:600
}
.single-courses-item  .front  .content  .author{
 display:inline-block;
 color:var(--paragraphColor)
}
.single-courses-item  .front  .content  .author:hover {
 color:var(--secondaryColor)
}
.single-courses-item  .front  .content  .rating{
 margin-top:15px;
 line-height:1
}
.single-courses-item  .front  .content  .rating  .overall{
 color:#111;
 margin-right:7px;
 font-weight:500;
 font-size:15px
}

.single-courses-item  .front  .content  .rating  .total{
 color:var(--paragraphColor);
 margin-left:7px;
 font-size:15px
}
.single-courses-item  .front  .content  .price{
 margin-top:18px;
 font-size:20px;
 line-height:1
}
.single-courses-item  .front  .content  .price  .new-price{
 font-weight:600
}
.single-courses-item .text{
 padding-bottom:20px;
}
.single-courses-item .back{
 top:0;
 left:0;
 width:100%;
 height:100%;
 padding:25px;
 position:absolute;
 transform:rotateY(-180deg);
 backface-visibility:hidden;
 transform-style:preserve-3d;
 box-shadow:#959da533 0 8px 24px;
 transition:transform .75s ease-in-out
}
.single-courses-item  .back  h3{
 margin-bottom:10px;
 line-height:1.4;
 font-size:22px;
 font-weight:600
}
.single-courses-item  .back  h3  a{
 color:#111;
 text-decoration:none!important
}
.single-courses-item  .back  h3  a:hover {
 color:var(--primaryColor)
}
.single-courses-item  .back  .update-info{
 display:block;
 font-size:15px;
 margin-bottom:15px;
 color:var(--primaryColor)
}
.single-courses-item  .back  .stats{
 margin-bottom:12px
}
.single-courses-item  .back  .stats  span{
 color:var(--paragraphColor);
 margin-right:20px;
 font-size:15px;
 font-weight:500
}
.single-courses-item  .back  .stats  span.level{
 background-color:#f5f5f5;
 padding:4px 10px
}
.single-courses-item  .back  .stats  span:last-child {
 margin-right:0
}
.single-courses-item  .back  p{
 font-size:15px
}
.single-courses-item  .back  ul{
 padding-left:0;
 margin-bottom:0;
 list-style-type:none
}
.single-courses-item  .back  ul  li{
 font-size:15px;
 padding-left:25px;
 position:relative;
 margin-bottom:12px;
 color:var(--paragraphColor)
}
.single-courses-item  .back  ul  li:last-child {
 margin-bottom:0
}
.single-courses-item  .back  ul  li  i{
 left:0;
 top:3px;
 font-size:17px;
 position:absolute;
 color:var(--primaryColor)
}
.single-courses-item  .back  .btn-box{
 margin-top:20px
}

.single-courses-item:hover   .front{
 transform:rotateY(180deg)
}
.single-courses-item:hover   .back{
 transform:rotateY(0)
}
.d-none.d-block{
 display:block!important
}

.view-all-courses-btn{
 margin-top:30px
}
.view-all-courses-btn  .default-btn{
 background-color:var(--thm16-black);
 color: #fff;
 border-radius:5px;
 position:relative;
 border:none;
 z-index:1;
 padding: 9px 15px;
 font-weight: 600;
}
.view-all-courses-btn  .default-btn:before {
 top:0;
 left:0;
 right:0;
 opacity:0;
 content:"";
 width:100%;
 z-index:-1;
 height:100%;
 position:absolute;
 border-radius:5px;
 visibility:hidden;
 transition:.5s;
 background: var(--thm16-base)
}
.view-all-courses-btn  .default-btn:hover:before {
 opacity:1;
 visibility:visible
}
.view-all-courses-btn  .default-btn  img{
 top:-2px;
 max-width:20px;
 margin-left:5px;
 position:relative
}

@media only screen and (max-width: 767px) {
 .single-courses-item{
  text-align:center
 }
 .single-courses-item  .front  .image{
  padding-top:20px;
  padding-left:15px;
  padding-right:15px
 }
 .single-courses-item  .front  .content{
  padding:15px 15px 20px
 }
 .single-courses-item  .front  .content  h3{
  font-size:18px
 }
 .single-courses-item  .front  .content  .rating{
  margin-top:12px
 }
 .single-courses-item  .front  .content  .rating  .d-flex{
  justify-content:center
 }
 .single-courses-item  .front  .content  .rating  .overall{
  font-size:14px
 }
 .single-courses-item  .front  .content  .rating  .star  i{
  line-height:1
 }
 .single-courses-item  .front  .content  .rating  .total{
  font-size:14px
 }
 .single-courses-item  .front  .content  .price{
  margin-top:17px;
  font-size:16px
 }
 .single-courses-item  .front  .content  .price  .old-price{
  font-size:15px;
  padding-right:2px
 }
 .single-courses-item  .front  .content  .price  .old-price:before {
  bottom:9px
 }
 .single-courses-item  .back{
  display:none
 }
 .single-courses-item:hover   .front{
  transform:rotateY(0)
 }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
 .courses-area  .container-fluid{
  max-width:540px
 }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
 .courses-area  .container-fluid{
  max-width:720px
 }
 .single-courses-item  .front  .image{
  padding-top:20px;
  padding-left:20px;
  padding-right:20px
 }
 .single-courses-item  .front  .content{
  padding:20px
 }
 .single-courses-item  .front  .content  h3{
  font-size:20px;
  margin-bottom:8px
 }
 .single-courses-item  .front  .content  .rating{
  margin-top:12px
 }
 .single-courses-item  .front  .content  .rating  .overall{
  font-size:14px
 }
 .single-courses-item  .front  .content  .rating  .star  i{
  line-height:1
 }
 .single-courses-item  .front  .content  .rating  .total{
  font-size:14px
 }
 .single-courses-item  .front  .content  .price{
  margin-top:15px;
  font-size:17px
 }
 .single-courses-item  .front  .content  .price  .old-price{
  font-size:16px
 }
 .single-courses-item  .front  .content  .price  .old-price:before {
  bottom:9px
 }
 .single-courses-item  .back{
  padding:20px
 }
 .single-courses-item  .back  h3{
  font-size:20px
 }
 .single-courses-item  .back  .update-info,
 .single-courses-item  .back  .stats  span{
  font-size:14px
 }
 .single-courses-item  .back  p{
  font-size:14.5px
 }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
 .courses-area  .shape4{
  display:none
 }
 .courses-area  .container-fluid{
  max-width:960px
 }
 .single-courses-item  .back{
  padding:20px
 }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
 .single-courses-item  .front  .image{
  padding-top:20px;
  padding-left:20px;
  padding-right:20px
 }
 .single-courses-item  .front  .content{
  padding:15px 20px 20px
 }
 .single-courses-item  .front  .content  h3{
  font-size:20px
 }
 .single-courses-item  .back{
  padding:15px
 }
 .single-courses-item  .back  h3{
  font-size:20px
 }
 .single-courses-item  .back  .update-info,
 .single-courses-item  .back  .stats  span,
 .single-courses-item  .back  p,
 .single-courses-item  .back  ul  li{
  font-size:14px
 }
 .single-courses-item  .back  .btn-box{
  margin-top:15px
 }
}

 
:root {
  --thm16-base: #525FE1;
  --thm16-black: #231F40;
 }