/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

 /* Reusable column setup */
 .col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
    margin-left:0%;
    padding:0;
}

.container {
  position: relative;
  /*width: 960px;*/
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

@media only screen and (max-width: 767px) {
 body .hide-mobile {
    display: none;
}
}

@media only screen and (min-width: 768px) {
 .hide-desktop {
    display: none;
}
}

.row .col:first-child {
    margin-left:0;
}

.span_1 {
    width:6.25%;
}
.span_2 {
    width:12.5%;
}
.span_3 {
    width:18.75%;
}
.span_4 {
    width:25.0%;
}
.span_5 {
    width:31.25%;
}
.span_5_5 {
    width:34.375%;
}
.span_6 {
    width:37.5%;
}
.span_7 {
    width:43.75%;
}
.span_8 {
    width:50.0%;
}
.span_9 {
    width:56.25%;
}
.span_10 {
    width:62.5%;
}
.span_10_5 {
    width:65.625%;
}
.span_11 {
    width:68.75%;
}
.span_12 {
    width:75.0%;
}
.span_12_5 {
    width:78.125%;
}
.span_13 {
    width:81.25%;
}
.span_14 {
    width:87.5%;
}
.span_15 {
    width:93.75%;
}
.span_16 {
    margin-left:0;
    width:100%;
}

.one_third	{
   margin-left:0;
   width: 33.33333%;
}
.two_thirds {
  margin-left:0;
  width: 66.66666%;
}
.one_fifth	{
   margin-left:0;
   width: 20%;
}

.half_col {
   width:3.125%
}
.shift_right_half {
   padding-right: 3.125%;
}



    /* 1. 16 Column Grid 0px - 959px
    -----------------------------------------------------------------------------

    Span 1:    6.25%
    Span 2:    12.5%
    Span 3:    18.75%
    Span 4:    25.0%
    Span 5:    31.25%
    Span 6:    37.5%
    Span 7:    43.75%
    Span 8:    50.0%
    Span 9:    56.25%
    Span 10:    62.5%
    Span 11:    68.75%
    Span 12:    75.0%
    Span 13:    81.25%
    Span 14:    87.5%
    Span 15:    93.75%
    Span 16:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 768px) and (max-width: 959px) {

    	.container {
    		/*width: 748px;*/
    	}

    }

    /* 2. 16 Column Grid 960px - Infinity
    -----------------------------------------------------------------------------
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 960px) and (max-width: 1159px) {

        .container {
          /*width: 940px;*/
      }

  }
    /*
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1160px) {

        .container {
          width: 1140px;
      }

  }
/*
----------------------------------------------------------------------------- */

@media screen and (min-width: 1430px) {

    .container {
      width: 1140px;
  }

}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px),
only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {

    .col {
        margin-left:0;
        width:100%;
    }
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px),
only screen and (device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){

    .container {
       /*width: 460px;*/
   }

   .col {
    margin-left:0;
    width:100%;
}

}

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
      .row:after,
      .clearfix:after {
          clear: both; }
          .row,
          .clearfix {
              zoom: 1; }

              /* You can also use a <br class="clear" /> to clear columns */
              .clear {
                  clear: both;
                  display: block;
                  overflow: hidden;
                  visibility: hidden;
                  width: 0;
                  height: 0;
              }