/* COLUMNAL - CORE */
/* Based on The 1140px Grid by Andy Taylor – http://cssgrid.net */

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11 {
    float: left;
    margin-right: 3.8%;
    position: relative;
}

.col-1:last-child, .col-1.last,
.col-2:last-child, .col-2.last,
.col-3:last-child, .col-3.last,
.col-4:last-child, .col-4.last,
.col-5:last-child, .col-5.last,
.col-6:last-child, .col-6.last,
.col-7:last-child, .col-7.last,
.col-8:last-child, .col-8.last,
.col-9:last-child, .col-9.last,
.col-10:last-child, .col-10.last,
.col-11:last-child, .col-11.last {
    margin-right: 0;
}

.col-1 {width: 4.85%;}  /* ie - 4.7% */
.col-2 {width: 13.5%;}  /* ie - 13.2% */
.col-3 {width: 22.15%;} /* ie - 22.05% */
.col-4 {width: 30.8%;}   /* ie - 30.6% */
.col-5 {width: 39.45%;} /* ie - 39% */
.col-6 {width: 48.1%;}   /* ie - 48% */
.col-7 {width: 56.75%;} /* ie - 56.75% */
.col-8 {width: 65.4%;}   /* ie - 61.6% */
.col-9 {width: 74.05%;} /* ie - 74.05% */
.col-10 {width: 82.7%;} /* ie - 82.7% */
.col-11 {width: 91.35%;}/* ie - 91.35% */
.col-12 {clear: both; width: 100%; float: left;}

.last, .omega {margin-right: 0 !important;}
img, object, embed {max-width: 100%;}

/*
-------------------------------
Columnal - vertical spacing options */
.margin-top-0 {margin-top: 0 !important;}
.margin-top-5 {margin-top: 5px !important;}
.margin-top-10 {margin-top: 10px !important;}
.margin-top-15 {margin-top: 15px !important;}
.margin-top-25 {margin-top: 25px !important;}
.margin-top-30 {margin-top: 30px !important;}
.margin-top-35 {margin-top: 35px !important;}
.margin-top-45 {margin-top: 45px !important;}
.margin-top-60 {margin-top: 60px !important;}
.margin-top-90 {margin-top: 90px !important;}
.margin-top-120 {margin-top: 120px !important;}

.margin-right-15 {margin-right: 15px}

.margin-bottom-0 {margin-bottom: 0 !important;}
.margin-bottom-5 {margin-bottom: 5px !important;}
.margin-bottom-10 {margin-bottom: 10px !important;}
.margin-bottom-15 {margin-bottom: 15px !important;}
.margin-bottom-25 {margin-bottom: 25px !important;}
.margin-bottom-30 {margin-bottom: 30px !important;}
.margin-bottom-35 {margin-bottom: 35px !important;}
.margin-bottom-45 {margin-bottom: 45px !important;}
.margin-bottom-60 {margin-bottom: 60px !important;}
.margin-bottom-90 {margin-bottom: 90px !important;}
.margin-bottom-120 {margin-bottom: 120px !important;}

.padding-top-10  {padding-top:10px !important;}
.padding-top-15 {padding-top:15px !important;}
.padding-top-30 {padding-top:30px !important;}
.padding-top-45 {padding-top:45px !important;}
.padding-top-60 {padding-top:60px !important;}
.padding-top-90 {padding-top:90px !important;}
.padding-top-120 {padding-top:120px !important;}
.padding-top-130 {padding-top:130px !important;}

.padding-bottom-15 {padding-bottom:15px !important;}
.padding-bottom-30 {padding-bottom:30px !important;}
.padding-bottom-45 {padding-bottom:45px !important;}
.padding-bottom-60 {padding-bottom:60px !important;}
.padding-bottom-90 {padding-bottom:90px !important;}
.padding-bottom-120 {padding-bottom:120px !important;}
.padding-bottom-130 {padding-bottom:130px !important;}


/*
-------------------------------
Columnal - extras */
.clear, .clearboth {clear:both !important;}
.clearleft {clear:left !important;}
.clearright {clear:right !important;}
.textcenter {text-align:center;}
.textright {text-align:right;}
.textleft {text-align:left;}

/* this will insert a pseduo element clears floats for an element containing floated content */
.selfclear:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.mobile-only {display: none;}
/* END COLUMNAL - CORE CODE
///////////////////////////////////////////// */



/* COLUMNAL - MOBILE
///////////////////////////////////////////// */
@media handheld, only screen and (max-width: 480px) {
  /* cssgrid.net - mobile presets */
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    clear: both;
    float: none;
    margin-left: 0;
    margin-right: 0;
    width: auto;
    width: -moz-available;
  }

  /* Columnal - sub columns */
  .col-2 .col-1,
  .col-3 .col-2, .col-3 .col-1,
  .col-4 .col-3, .col-4 .col-2, .col-4 .col-1,
  .col-5 .col-4, .col-5 .col-3, .col-5 .col-2, .col-5 .col-1,
  .col-6 .col-5, .col-6 .col-4, .col-6 .col-3, .col-6 .col-2, .col-6 .col-1,
  .col-7 .col-6, .col-7 .col-5, .col-7 .col-4, .col-7 .col-3, .col-7 .col-2, .col-7 .col-1,
  .col-8 .col-7, .col-8 .col-6, .col-8 .col-5, .col-8 .col-4, .col-8 .col-3, .col-8 .col-2, .col-8 .col-1,
  .col-9 .col-1, .col-9 .col-2, .col-9 .col-3, .col-9 .col-4, .col-9 .col-5, .col-9 .col-6, .col-9 .col-7, .col-9 .col-8,
  .col-10 .col-9, .col-10 .col-8, .col-10 .col-7, .col-10 .col-6, .col-10 .col-5, .col-10 .col-4, .col-10 .col-3, .col-10 .col-2, .col-10 .col-1,
  .col-11 .col-10, .col-11 .col-9, .col-11 .col-8, .col-11 .col-7, .col-11 .col-6, .col-11 .col-5, .col-11 .col-4, .col-11 .col-3, .col-11 .col-2, .col-11 .col-1,
  .col-12 .col-11, .col-12 .col-10, .col-12 .col-9, .col-12 .col-8, .col-12 .col-7, .col-12 .col-6, .col-12 .col-5, .col-12 .col-4, .col-12 .col-3, .col-12 .col-2, .col-12 .col-1 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  /* Type presets */
  .container h1 {margin:.5em 0 .5em;}
  .container h2 {margin:.5em 0 .535em;}
  .container h3 {margin:.5em 0 .57em;}
  .container h4 {margin:.5em 0 .615em;}
  .container h5 {margin:.5em 0 .67em;}
  .container h6 {margin:.5em 0 .8em;}

  /* Columnal content control - use on any elements to show/hide content on mobile */
  .mobile-hide {display: none;}
  .mobile-only {display: block;}
}