/**
 * The panel module for the whole site
 * usage:
 * <div class="[orange|purple|red...] panel-grid">
 *   <div class="panel-grid__header">
 *     <h2>The panel header</h2>
 *   </div>
 *
 *   <div class="panel-grid__body">
 *     <div class="panel-grid__body__box">
 *
 *        <figure>
 *          <img class="img-responsive" src="path/to/image" />
 *          <figcaption>
 *            <ul>
 *                  <li>item1</li>
 *                  <li>item2</li>
 *                  <li>item3</li>
 *                  <li>item4</li>
 *                  <li>item5</li>
 *                  <li>item6</li>
 *              </ul>
 *          </figcaption>
 *        </figure>
 *     </div>
 *   </div>
 * </div>
 */

/** Start of the color section */

/** orange: #f9a94a; */
.orange .panel-grid__header {
    background : url('./panel-grid__header-background--orange.png');
}

.orange .panel-grid__body__box li:before,
.orange .panel-grid__body__box > figure > figcaption > p,
.orange .panel-grid__body__box > figure > figcaption  li
{
    color : #F9A94A;
}

/** END OF COLOR SECTION */




.panel-grid {
    position   : relative;
    box-shadow : 0 0 20px 5px #9D9D9D;
    margin     : 100px 0 50px;
    padding    : 50px;
}
.panel-grid p,
.panel-grid li {
    line-height : 150%;
    white-space: nowrap;
}
/**
 * position the panel header on the top
 */
.panel-grid__header {
    line-height : 34px;
    width       : 377px;
    height      : 47px;
    left        : 50%;
    top         : -32px;
    color       : white;
    margin-left : -188px;
    position    : absolute;
    text-align  : center;
}

.panel-grid__header h2{
    font-size: 20px;

}

.panel-grid__body p {
    font-size : 12px;
}
.panel-grid__body li {
    font-size : 14px;
    text-align: left;
}
/**
 * list-style nomarlization on the list
 */
.panel-grid__body__box ul {
    list-style   : none;
    padding-left : 25px;

}
/**
 * right panel is wrapped in a background
 * Text color should be white
 */

/**
 * bullet point to on the right list
 */
.panel-grid__body__box li:before {
    content     : "•";
    font-size   : 24px;
    line-height : 20px;
    position    : absolute;
    left        : -20px;
}

.panel-grid__body__box li li:before {
    content     : ">";
    font-size   : 16px;
    line-height : 20px;
    position    : absolute;
    left        : -20px;
}

/**
 * some padding on the list items
 */
.panel-grid__body__box li {
    padding       : 2px 0;
    /*margin-bottom : 10px;*/
    position      : relative;
}

.panel-grid__body__box {
    display        : inline-block;
    vertical-align : top;
    margin-right: 46px;
    width: 300px;
    text-align: center;
}

.panel-grid__body__box.last {
    margin-right: 0px !important;
}


.panel-grid__body__box figure {
    margin: 1em 10px;
}
.panel-grid__body__box figure img{
margin: auto;
}



.panel-grid__body__box > figure > figcaption {
    margin : 0px 0px 5px;

}
.panel-grid__body__box  figure > figcaption > p,
.panel-grid__body__box  figure > figcaption  li,
.panel-grid__body__box  figure > figcaption  a
{
    font-size : 12px;
    text-align: left;
}




.panel-grid a:not(.btn) {
	color: #0000EE !important;
	text-decoration: none;
}
 
.panel-grid a:hover {
	text-decoration:underline;
}