/**
 * Profound Grid
 * 
 * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts, 
 * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes.
 * 
 * The biggest difference to other grid systems is the use of negative margins for column
 * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts
 * in some browsers.
 * 
 * Nested columns are supported too, without having to reset the grid on each level. 
 *
 * Credits/Inspiration:
 * -------------------
 * Semantic Grid: http://www.semantic.gs
 * Susy: http://susy.oddbird.net
 * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/
 *
 * @author Profound Creative Studio
 * @url http://www.profoundgrid.com
 * @url http://www.weareprofound.com 
 */
/**
 * Clearfix
 */
/**
 * Legacy Clearfix
 */
/**
 * Establish the grid-containing element.
 */
/**
 * Align an element to the grid.
 */
/**
 * Apply to any column to make it the last one of the current row.
 */
.left {
  float: left; }

.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

.wrap {
  position: relative;
  padding: 5px 6px 6px 7px;
  /* readjust in jsfiddle*/
  background: #f0f0f0;
  border: 1px solid #ccc;
  overflow: hidden; }
  .wrap .btn-c {
    display: inline-block;
    margin-top: 4px; }

#faq-search.search {
  width: 360px;
  position: relative;
  top: 2px;
  padding: 8px 5px 8px 30px;
  border: 1px solid #ccc; }

.icon-search {
  position: absolute;
  top: 20px;
  left: 15px;
  z-index: 50; }

.go {
  position: relative;
  top: 0;
  padding: 3px 5px 2px;
  margin-left: 8px;
  border: none;
  background: -webkit-gradient(linear, left top, left bottom, from(#d631a7), to(#8f1b64));
  background: -moz-linear-gradient(top, #d631a7, #8f1b64); }
  .go span {
    display: block;
    width: 64px;
    height: 28px;
    /* background:url(http://i.imgur.com/mxxzQ.png) 0 0 no-repeat; */ }

.article h2 {
  color: #1b2e5f; }
  .article h2.page-h2 {
    margin-bottom: 20px; }

.article .blue {
  color: #1b2e5f; }

.article .col-left {
  text-align: center; }
  .article .col-left img {
    margin-bottom: 20px; }

.article .col-right h2, .article .col-right h3, .article .col-right h4 {
  padding-bottom: 0;
  margin-bottom: 15px; }

.article .col-right h3, .article .col-right h4 {
  margin-left: 15px; }

.article .col-right h2, .article .col-right h2 a, .article .col-right h2 a:hover {
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: inherit;
  cursor: default; }

.article .col-right h3, .article .col-right h3 a, .article .col-right h3 a:hover {
  color: #905191;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none; }

.article .col-right h4 {
  margin-bottom: 30px; }
  .article .col-right h4 p:first-child {
    display: inline; }
  .article .col-right h4 p:last-child {
    margin-bottom: 0;
    padding-bottom: 0; }

.article .col-right h5 {
  margin-bottom: 10px;
  color: #717FCB;
  font-size: 14px;
  font-weight: 600; }

.article .col-right .qa-div {
  margin-bottom: 60px; }

.article .qa-div h3 {
  cursor: pointer; }

.guide {
  margin-left: 16px; }

@media (min-width: 960px) {
  .btn-container {
    margin-top: 0; }
  .main .shell .article {
    width: 100%;
    margin: 0 0%; }
  h2.page-h2 {
    float: left;
    margin-right: -100%;
    width: 22.11%;
    margin-left: 10.82%; }
  .col-left {
    float: left;
    margin-right: -100%;
    width: 22.11%;
    margin-bottom: 0; }
  .col-right {
    float: left;
    margin-right: -100%;
    width: 74.04%;
    margin-left: 21.64%; } }