/*------------------------------------------------------------------------
# mod_mx_services Extension
# ------------------------------------------------------------------------
# author    mixwebtemplates
# Copyright (C) 2020 mixwebtemplates.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.mixwebtemplates.com
-------------------------------------------------------------------------*/
:root {
 --mxtmpr-color: #E81C2E;
 --black-color: #000000;
 --white-color: #ffffff;
 --light-color: #8b8e95;
}


.service-steen .class-item {
    background-color: #fff;
    padding-top: 30px;
    border-radius: 10px;
    position: relative;
    transition: all .5s ease-out;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
}

.service-steen.archive-layout .class-item {
    box-shadow: .835px 5.942px 24px rgba(0, 0, 0, .1)
}

.service-steen .class-item .class-thumbnail {
    overflow: hidden;
    border-radius: 0 0 10px 10px
}

.service-steen .class-item .class-thumbnail img {
    border-radius: 0 0 10px 10px;
    filter: grayscale(1);
    transform: scale(1);
    transition: all .5s ease-out
}

.service-steen .thumbnail-img-wrap {
    position: relative
}

.service-steen .class-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
}

.service-steen .class-item:hover .class-thumbnail img {
    mix-blend-mode: normal;
    transform: scale(1.2);
    filter: grayscale(0)
}

.service-steen .class-item:hover .class-media {
    box-shadow: .835px 5.942px 24px rgba(0, 0, 0, .23);
    transition: all .5s ease-out
}

.service-steen .class-content {
    text-align: center
}

.service-steen .class-content p {
    margin-bottom: 10px;
    padding: 5px 25px;
}

.service-steen .class-media .class-icon i {
    transition: all .5s ease-out
}

.service-steen .class-media img {
    max-width: 52px;
    height: auto;
    transition: all .5s ease-out
}

.service-steen .class-item:hover .class-media .class-icon i {
    animation: toBottomFromTop .5s forwards
}

.service-steen .class-item:hover .class-media img {
    animation: toBottomFromTop .5s forwards
}

@-webkit-keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    51% {
        opacity: 1
    }
}

@keyframes toBottomFromTop {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    51% {
        opacity: 1
    }
}

.service-steen .class-media .class-img {
    display: inline-flex;
    align-items: center
}

.service-steen .class-media .class-icon {
    display: inline-flex;
    align-items: center
}

.service-steen .class-media .class-icon i {
    font-size: 48px;
    color: #fff
}

.service-steen .class-media {
    height: 73px;
    width: 73px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    background-color: var(--mxtmpr-color);
    border-radius: 50%;
    transition: all .5s ease-out;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: -30px
}

.service-steen .class-item:hover .class-media {
    background-color: #fff
}

.service-steen .class-item:hover .class-media .class-icon i {
    color: var(--mxtmpr-color)
}

.service-steen .class-item .schedule-time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    margin: 0 20%;
    border-radius: 15px 15px 0 0;
    text-align: center
}

.service-steen .class-item .schedule-time ul {
    background-color: var(--mxtmpr-color);
    color: #fff;
    transition: none;
    padding: 12px 0;
    border-radius: 15px 15px 0 0;
    margin-bottom: 0px;
}

.service-steen .class-item .schedule-time ul li {
    display: block;
    font-size: 15px;
    line-height: 22px
}
.service-steen .class-item .schedule-time ul li a {
  color: #f1f1f1;
}