/**
 *<div class="row">
 * <!-- 3 CARDS per row-->
 * <div class="orange card"> 
 *   <img/>|<iframe>
 *   <h3></h3> 
 *   <ul><li></li><li></li></ul>
 * </div>
 *</div>
 */

/** begin of the theme */

/**
 * Orange: 
 *
 * light orange :#f9a94a;
 * dark orange :#f98f4f;
 */
.orange.card > h3.type1 {
    background : #F9A94A;
}
.card li:before {
    color : #F9A94A;
}
/**
 * use border to draw trangles 
 * @see https://css-tricks.com/snippets/css/css-triangle/
 */
.orange.card > h3.type1:before,
.orange.card > h3.type1:after {
    border-top : 10px solid #F98F4F;
}
.orange.card > h3.type1:before {
    border-right : 10px solid #F98F4F;
}
.orange.card > h3.type1:after {
    border-left : 10px solid #F98F4F;
}
/**
 * Yellow: 
 *
 * light yellow:#fabd2f;
 * dark yellow:#fb9c1c;
 */
.yellow.card > h3.type1 {
    background : #FABD2F;
}
.yellow.card li:before {
    color : #FABD2F;
}
/**
 * use border to draw trangles 
 * @see https://css-tricks.com/snippets/css/css-triangle/
 */
.yellow.card > h3.type1:before,
.yellow.card > h3.type1:after {
    border-top : 10px solid #FB9C1C;
}
.yellow.card > h3.type1:before {
    border-right : 10px solid #FB9C1C;
}
.yellow.card > h3.type1:after {
    border-left : 10px solid #FB9C1C;
}
/** end of the theme */

/**
 * base style of the card
 */
.card {
    vertical-align : text-bottom;
    display        : inline-block;
    width          : 29%;
    padding        : 10px 30px;
    margin         : 0 20px;
    box-shadow     : 0 0 15px 5px #DDDDDD;
}
/**
 * base style of the header in the cards
 */
.card > h3.type1 {
    text-align : left;
    position   : relative;
    color      : white;
    padding    : 10px 20px;
    margin     : -10px -50px 10px;

}
.card img,
.card iframe {
    margin-bottom : 20px;
}
.card > h3.type1:before,
.card > h3.type1:after {
    content       : ' ';
    position      : absolute;
    border-bottom : 10px solid transparent;
    bottom        : -20px;
}
.card > h3.type1:before {
    left        : 0;
    border-left : 10px solid transparent;
}
.card > h3.type1:after {
    right        : 0;
    border-right : 10px solid transparent;
}
.card ul {
    padding-left : 0px;
    list-style   : none;
}
.card li {

    margin    : 10px 0;
    position  : relative;
    font-size : 14px;
    white-space: nowrap;
}
.card li:before {
    content     : "•";
    font-size   : 24px;
    line-height : 20px;
    position    : absolute;
    left        : -15px;
}

.card li.no-bullet:before {
    content     : ""!important;
}


/**
 * Type2
 */


.card > h3.type2 {
    text-align : left;
    position   : relative;
    color      : white;
    padding    : 10px 20px;
    margin     : -40px 0px 10px -20px;


}


.card > h3.type2:before
{
    content       : ' ';
    position      : absolute;
    border-bottom : 10px solid transparent;
    top        : 0px;
    left: -10px;


    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0px 30px 10px;
    border-color: transparent transparent #FB9C1C transparent;
}
.card > h3.type2:before {

}


.yellow.card > h3.type2 {
    background : #FABD2F;


}


.yellow.card > h3.type2:before,
.yellow.card > h3.type2:after {

}
.yellow.card > h3.type2:before {

}
.yellow.card > h3.type2:after {
    border-left : 10px solid #FB9C1C;
}