/*
* Skin Flesh 'n' Bones V1.1
* Inspired by Dave Gamache's Skeleton and Twitter Bootstrap
* 01/01/2015
*/



/* BONES - Flexible Percentage Width Grid
================================================== */

/* !!! APPLY BOX LAYOUT MODEL TO ALL ELEMENTS !!!  */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.wrap { margin: 0; }
.container   { position: relative; width: 96%; max-width: 1200px; margin: 0 auto; }
.wrap-container { position: relative; width: 100%;  margin: 0 auto; }
	
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-3 .sixteenth, .eighth .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12, .box-eighth, .box-sixteenth { float: left; display: inline; padding-left: 10px; padding-right: 10px; }
.right	{ float: right; }										

    /* Base Grid */
    .col-1                     { width: 8.333333333333332%;  }
    .col-2                     { width: 16.666666666666664%; }
    .col-3                   { width: 25%; }
    .col-4                    { width: 33.33333333333333%; }
    .col-5                    { width: 41.66666666666667%; }
    .col-6                     { width: 50%; }
    .col-7                   { width: 58.333333333333336%; }
    .col-8                   { width: 66.66666666666666%; }
    .col-9                    { width: 75%; }
    .col-10                     { width: 83.33333333333334%; }
    .col-11                  { width: 91.66666666666666%; }
    .col-12                  { width: 100%; }	
	/* Small columns to nest within threee column div */
	.col-3 .sixteenth       { width: 25%;  }
    .col-3 .eighth           { width: 50%; }
    
    /* Offsets */
    .offset-1                   { margin-left: 8.333333333333332%;  }
    .offset-2                   { margin-left: 16.666666666666664%; }
    .offset-3                 { margin-left: 25%; }
    .offset-4                  { margin-left: 33.33333333333333%; }
    .offset-5                  { margin-left: 41.66666666666667%; }
    .offset-6                   { margin-left: 50%; }
    .offset-7                 { margin-left: 58.333333333333336%; }
    .offset-8                 { margin-left: 66.66666666666666%; }
    .offset-9                  { margin-left: 75%; }
    .offset-10                   { margin-left: 83.33333333333334%; }
    .offset-11                { margin-left: 91.66666666666666%; }
	
	/* Boxes for thumbnails etc. or alternative global settings to columns */
	/* Set other box properties in Skin */
    .box-1                     { width: 8.333333333333332%;  }
    .box-2                     { width: 16.666666666666664%; }
    .box-3                   { width: 25%; }
    .box-4                    { width: 33.33333333333333%; }
    .box-5                    { width: 41.66666666666667%; }
    .box-6                     { width: 50%; }
    .box-7                   { width: 58.333333333333336%; }
    .box-8                   { width: 66.66666666666666%; }
    .box-9                    { width: 75%; }
    .box-10                     { width: 83.33333333333334%; }
    .box-11                  { width: 91.66666666666666%; }
    .box-12                  { width: 100%; }
	.box-eighth           		{ width: 12.5%; }	
	.box-sixteenth       		{ width: 6.25%;  }

/* #Tablet (Portrait)
================================================== */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
    }


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

 @media only screen and (max-width: 767px) {
.container { width: 90%; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-3 .sixteenth, .eighth .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12, .box-eighth, .box-sixteenth { 
	width: 100%;
	padding-left: 0; 
	padding-right: 0;
}

        /* Offsets */
 .offset-1,
 .offset-2,
 .offset-3,
 .offset-4,
 .offset-5,
 .offset-6,
 .offset-7,
 .offset-8,
 .offset-9,
 .offset-10,
 .offset-11,
 .offset-12,
 .offset-sixteenth,
 .offset-eighth { margin-left: 0; }

    }


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


    @media only screen and (max-width: 420px) {
        .container { width: 90%; }
        .container .column { margin-left: 0; margin-right: 0; }

    }


/* #Clearing and Floats
================================================== */

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

    /* Use clearfix class on parent to clear nested column,
    or wrap each row of column 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 column */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }