.coursetabs-content {
    display: none;
    min-height: 150px;
    position: relative;

    &.active {
        display: block;
    }

    &:before {
		opacity: 0;
		content: '';
		position: absolute;
		top: 100%;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(255,255,255,.95);
		@include mb2_transition1(opacity, .25s);
		z-index: 1;
	}

	&:after {
		display: none;
		content: '';
		position: absolute;
		width: 50px;
		height: 50px;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		background-image: url([[pix:theme|spinners/spinner-default]]);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 1;
	}

    &.loading {
		&:before {
			opacity: 1;
			top: 0;
		}

		&:after {
			display: block;
		}

	}
}


/* Category decription */


.coursetabs-tablist {
    margin: 0;
    margin-bottom: 2.4rem;
    padding: 0;
    list-style: none;
    border-bottom: solid 1px rgba(0,0,0,.1);

    .coursetabs-catitem {
        display: inline-block;
        margin-right: 1.7rem;
        padding-bottom: .6rem;
        position: relative;
        cursor: pointer;

        .catname {
            color: $textcolor;
        }

        .coursecount {
            margin-left: .15rem;
            color: $textcolor_lighten;
            font-size: $fssmall;
        }

        @media only screen and (max-width: $wmediumdevice){
            margin-right: 1rem;

            .coursecount {
                display: none;
            }
        }

        &.active {


            .catname {
                font-weight: $fwbold;
            }

            &:after {
                content: '';
                display: block;
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 3px;
                background-color: $accent1;
            }
        }

    }

    .dark & {
        border-color: rgba(255,255,255,.1);

        .coursetabs-catitem {
            .catname {
                color: #fff;
            }

            .coursecount {
                color: rgba(255,255,255,.5);
            }

            &.active {
                .catname {
                    color: #fff;
                }
            }
        }
    }

    @media only screen and (max-width: $wsmalldevice){

        border: 0;
        margin-left:-5px;
        margin-right: -5px;

        .coursetabs-catitem {
            margin: 5px;
            width: calc(50% - 10px);
            padding: 5px;
            border: solid 1px rgba(0,0,0,.1);
            text-align: center;
            @include mb2_border_radius(.15rem);

            &.active {
                border-color: $accent1;
            }

            &:after {
                display: none !important;
            }
        }

        .dark & {
            .coursetabs-catitem {
                border-color: rgba(255,255,255,.1);

                &.active {
                    border-color: $accent1;
                }
            }
        }
    }

    .coursecount0 & {
        .coursecount {
            display: none;
        }
    }

}


.coursetabs-category {

    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    margin-bottom: 2.5rem;

    .catdesc0 & {
        display: none;
    }

    .category-desc {
        flex: 0 0 65%;

        @media only screen and (max-width: 680px){
            flex: 0 0 100%;
        }

        img {
            &:first-child {
                display: none;
            }
        }
    }

    .category-image {
       display: flex;
       flex: 0 0 35%;
       justify-content: flex-end;

       @media only screen and (max-width: 680px){
           display: none;
       }

       .catimage {
           width: 200px;
           height: 200px;
           background-repeat: no-repeat;
           background-position: 50% 50%;
           background-size: cover;
          @include mb2_border_radius(999px);
       }
    }

    .category-readmore {
        padding-top: .65rem;
    }
}