/**
 * Grid column widths
 */
.grid1  { width: calc(100% / (12 / 1) - 20px);  }
.grid2  { width: calc(100% / (12 / 2) - 20px); }
.grid3  { width: calc(100% / (12 / 3) - 20px); }
.grid4  { width: calc(100% / (12 / 4) - 20px); }
.grid5  { width: calc(100% / (12 / 5) - 20px); }
.grid6  { width: calc(100% / (12 / 6) - 20px); }
.grid7  { width: calc(100% / (12 / 7) - 20px); }
.grid8  { width: calc(100% / (12 / 8) - 20px); }
.grid9  { width: calc(100% / (12 / 9) - 20px); }
.grid10 { width: calc(100% / (12 / 10) - 20px); }
.grid11 { width: calc(100% / (12 / 11) - 20px); }
.grid12 { width: calc(100% / (12 / 12) - 20px); }

/**
 * Floated articles can be 20 pixel wider (no margin)
 */
.mod_article.grid1  { width: calc(100% / (12 / 1) - 20px);  }
.mod_article.grid2  { width: calc(100% / (12 / 2) - 20px); }
.mod_article.grid3  { width: calc(100% / (12 / 3) - 20px); }
.mod_article.grid4  { width: calc(100% / (12 / 4) - 20px); }
.mod_article.grid5  { width: calc(100% / (12 / 5) - 20px); }
.mod_article.grid6  { width: calc(100% / (12 / 6) - 20px); }
.mod_article.grid7  { width: calc(100% / (12 / 7) - 20px); }
.mod_article.grid8  { width: calc(100% / (12 / 8) - 20px); }
.mod_article.grid9  { width: calc(100% / (12 / 9) - 20px); }
.mod_article.grid10 { width: calc(100% / (12 / 10) - 20px); }
.mod_article.grid11 { width: calc(100% / (12 / 11) - 20px); }
.mod_article.grid12 { width: calc(100% / (12 / 12) - 20px); }

/**
 * Default offset widths
 */
 
.offset1  { margin-left: calc(100% / (12 / 1))  !important; }
.offset2  { margin-left: calc(100% / (12 / 2)) !important; }
.offset3  { margin-left: calc(100% / (12 / 3)) !important; }
.offset4  { margin-left: calc(100% / (12 / 4)) !important; }
.offset5  { margin-left: calc(100% / (12 / 5)) !important; }
.offset6  { margin-left: calc(100% / (12 / 6)) !important; }
.offset7  { margin-left: calc(100% / (12 / 7)) !important; }
.offset8  { margin-left: calc(100% / (12 / 8)) !important; }
.offset9  { margin-left: calc(100% / (12 / 9)) !important; }
.offset10 { margin-left: calc(100% / (12 / 10)) !important; }
.offset11 { margin-left: calc(100% / (12 / 11)) !important; }
.offset12 { margin-left: calc(100% / (12 / 12)) !important; }

/**
 * Floated articles do not have margin
 */
.mod_article.offset1  { margin-left: calc(100% / (12 / 1))  !important; }
.mod_article.offset2  { margin-left: calc(100% / (12 / 2)) !important; }
.mod_article.offset3  { margin-left: calc(100% / (12 / 3)) !important; }
.mod_article.offset4  { margin-left: calc(100% / (12 / 4)) !important; }
.mod_article.offset5  { margin-left: calc(100% / (12 / 5)) !important; }
.mod_article.offset6  { margin-left: calc(100% / (12 / 6)) !important; }
.mod_article.offset7  { margin-left: calc(100% / (12 / 7)) !important; }
.mod_article.offset8  { margin-left: calc(100% / (12 / 8)) !important; }
.mod_article.offset9  { margin-left: calc(100% / (12 / 9)) !important; }
.mod_article.offset10 { margin-left: calc(100% / (12 / 10)) !important; }
.mod_article.offset11 { margin-left: calc(100% / (12 / 11)) !important; }
.mod_article.offset12 { margin-left: calc(100% / (12 / 12)) !important; }

/**
 * Reduce the overall width and the width of the grid columns if the screen
 * width is less than 980px (e.g. on a portrait tablet)
 */
@media (min-width:768px) and (max-width:979px)
{

	/**
	 * Reduce the grid column widths
	 */
	.grid1  { width: calc(100% / (12 / 1) - 20px);  }
    .grid2  { width: calc(100% / (12 / 2) - 20px); }
    .grid3  { width: calc(100% / (12 / 3) - 20px); }
    .grid4  { width: calc(100% / (12 / 4) - 20px); }
    .grid5  { width: calc(100% / (12 / 5) - 20px); }
    .grid6  { width: calc(100% / (12 / 6) - 20px); }
    .grid7  { width: calc(100% / (12 / 7) - 20px); }
    .grid8  { width: calc(100% / (12 / 8) - 20px); }
    .grid9  { width: calc(100% / (12 / 9) - 20px); }
    .grid10 { width: calc(100% / (12 / 10) - 20px); }
    .grid11 { width: calc(100% / (12 / 11) - 20px); }
    .grid12 { width: calc(100% / (12 / 12) - 20px); }

	/**
     * Floated articles can be 20 pixel wider (no margin)
     */
    .mod_article.grid1  { width: calc(100% / (12 / 1) - 20px);  }
    .mod_article.grid2  { width: calc(100% / (12 / 2) - 20px); }
    .mod_article.grid3  { width: calc(100% / (12 / 3) - 20px); }
    .mod_article.grid4  { width: calc(100% / (12 / 4) - 20px); }
    .mod_article.grid5  { width: calc(100% / (12 / 5) - 20px); }
    .mod_article.grid6  { width: calc(100% / (12 / 6) - 20px); }
    .mod_article.grid7  { width: calc(100% / (12 / 7) - 20px); }
    .mod_article.grid8  { width: calc(100% / (12 / 8) - 20px); }
    .mod_article.grid9  { width: calc(100% / (12 / 9) - 20px); }
    .mod_article.grid10 { width: calc(100% / (12 / 10) - 20px); }
    .mod_article.grid11 { width: calc(100% / (12 / 11) - 20px); }
    .mod_article.grid12 { width: calc(100% / (12 / 12) - 20px); }

    /**
     * Default offset widths
     */
 
    .offset1  { margin-left: calc(100% / (12 / 1))  !important; }
    .offset2  { margin-left: calc(100% / (12 / 2)) !important; }
    .offset3  { margin-left: calc(100% / (12 / 3)) !important; }
    .offset4  { margin-left: calc(100% / (12 / 4)) !important; }
    .offset5  { margin-left: calc(100% / (12 / 5)) !important; }
    .offset6  { margin-left: calc(100% / (12 / 6)) !important; }
    .offset7  { margin-left: calc(100% / (12 / 7)) !important; }
    .offset8  { margin-left: calc(100% / (12 / 8)) !important; }
    .offset9  { margin-left: calc(100% / (12 / 9)) !important; }
    .offset10 { margin-left: calc(100% / (12 / 10)) !important; }
    .offset11 { margin-left: calc(100% / (12 / 11)) !important; }
    .offset12 { margin-left: calc(100% / (12 / 12)) !important; }

    /**
     * Floated articles do not have margin
     */
    .mod_article.offset1  { margin-left: calc(100% / (12 / 1))  !important; }
    .mod_article.offset2  { margin-left: calc(100% / (12 / 2)) !important; }
    .mod_article.offset3  { margin-left: calc(100% / (12 / 3)) !important; }
    .mod_article.offset4  { margin-left: calc(100% / (12 / 4)) !important; }
    .mod_article.offset5  { margin-left: calc(100% / (12 / 5)) !important; }
    .mod_article.offset6  { margin-left: calc(100% / (12 / 6)) !important; }
    .mod_article.offset7  { margin-left: calc(100% / (12 / 7)) !important; }
    .mod_article.offset8  { margin-left: calc(100% / (12 / 8)) !important; }
    .mod_article.offset9  { margin-left: calc(100% / (12 / 9)) !important; }
    .mod_article.offset10 { margin-left: calc(100% / (12 / 10)) !important; }
    .mod_article.offset11 { margin-left: calc(100% / (12 / 11)) !important; }
    .mod_article.offset12 { margin-left: calc(100% / (12 / 12)) !important; }
}

/**
 * Remove all floats and fixed widths if the screen width is less than 768
 * pixel (e.g. on a mobile phone)
 */
@media (max-width:767px)
{
	/**
	 * Remove the overall width
	 */
	#wrapper {
		width:auto;
	}

	/**
	 * Show all columns underneath each other
	 */
	*[class*="grid"] {
		float:none !important;
		display:block !important;
		width:auto !important;
	}
	*[class*="offset"] {
		margin-left:10px !important;
	}
}