/* === card component ====== 
 * Variation of the panel component
 * version 2018.10.30
 * https://codepen.io/jstneg/pen/EVKYZj
 */
.card{ background-color: #fff; border: 1px solid transparent; border-radius: 6px; }
.card > .card-link{ color: #333; }
.card > .card-link:hover{  text-decoration: none; }
.card > .card-link .card-img img{ border-radius: 6px 6px 0 0; }
.card .card-img{ position: relative; padding: 0; display: table; }
.card .card-img .card-caption{
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
}
.card .card-body{ display: table; width: 100%; padding: 5px; }
.card .card-header{ border-radius: 6px 6px 0 0; padding: 8px; }
.card .card-footer{ border-radius: 0 0 6px 6px; padding: 8px; border-top: 1px solid #ddd; }
.card .card-left{ position: relative; float: left; padding: 0 0 8px 0; }
.card .card-right{ position: relative; float: left; padding: 8px 0 0 0; }
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child, 
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3, 
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block;  }
.card .card-body .heading:last-child{ margin-bottom: 0; }

.card .card-body .lead{ text-align: center; }

/* -- price theme ------ */
.card-price{ border-color: #999; background-color: #fff; margin-bottom: 15px; }
.card-price > .card-heading,
.card-price > .card-footer{ color: #333; background-color: #fdfdfd; border-top: 1px solid #ddd; }
.card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-price > .card-left{ padding-right: 4px; }
.card-price > .card-right{ padding-left: 4px; }
.card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
.card-price p:last-child{ margin-bottom: 0; }

.card-price .details{ list-style: none; margin-bottom: 15px; padding: 0 5px; }
.card-price .details li{ text-align: center; margin-bottom: 8px; }
.card-price .buy-now{ text-transform: uppercase; }
.card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
.card-price table .note{ color: #666; font-size: 0.8em; }

.sequence-card-header {
	height: 116px;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: gray;
    color: #fff;
    overflow: hidden;
    position: relative;
    text-shadow: 0 0 10px rgba(0,0,0,.5);
}

.sequence-card-header-images{
	position: absolute;
    white-space: nowrap;
    width: 100%;
    height: 150%;
    top: -25%;
    z-index: 1;
    text-align: center;
}

.sequence-card-header-image{
	display: inline-block;
    position: relative;
    height: 100%;
    margin: 0 -50px;
    width: 200px;
}

.sequence-card-overlay{
/*	padding: 21px;*/
    position: relative;
    z-index: 2;
    padding-bottom: 21px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(0,0,0,.25);
}

.sequence-card-overlay h6 {
    font-weight: 600;
    margin: 10.5px 0 21px 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    color: #fff;
    font-size: 2.1rem;
}

.sequence-grades{
	text-align: center;
}

.subjects{
	font-size: 85%;
    vertical-align: middle;
    white-space: nowrap;
    overflow: auto;
    text-align: center;
    position: relative;
    top: -25px;
    z-index: 100;
}

.subject-icon{
	width: 80px;
    text-align: center;
    font-weight: normal;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}

.subject-icon-round{
	display: inline-block;
    background: #fff;
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 24px;
    margin: 0 0 10.5px 0;
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.6);
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.6);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.6);
}

.sequence-card-num{
	margin: 0 0 .75em 0;
    text-align: center;
}

.sequence-card-description{
	color: #444;
    font-size: 85%;
    text-align: justify;
	margin-left: 5px;
	margin-right: 5px;
}