/**************************************************
Grid V2 - Zulfikar Mohammed - 09/07/2013
**************************************************/

.container{ position:relative;margin:0 auto;padding:0 1%;width:976px;}
.ie .container { width:976px;}
.row{ clear:both;padding:0;margin-bottom:10px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .col21, .col22, .col23, .col24 { float:left;margin:0 2% 0 0;}
.col1.lastCol, .col2.lastCol, .col3.lastCol, .col4.lastCol, .col5.lastCol, .col6.lastCol, .col7.lastCol, .col8.lastCol, .col9.lastCol, .col10.lastCol, .col11.lastCol, .col12.lastCol, .col13.lastCol, .col14.lastCol, .col15.lastCol, .col16.lastCol, .col17.lastCol, .col18.lastCol, .col19.lastCol, .col20.lastCol, .col21.lastCol, .col22.lastCol, .col23.lastCol, .col24 { margin:0;}
.col1 { width:2.25%;}
.col2 { width:6.5%;}
.col3 { width:10.75%;}
.col4 { width:15%;}
.col5 { width:19.25%;}
.col6 { width:23.5%;}
.col7 { width:27.75%;}
.col8 { width:32%;}
.col9 { width:36.25%;}
.col10 { width:40.5%;}
.col11 { width:44.75%;}
.col12 { width:49%;}
.col13 { width:53.25%;}
.col14 { width:57.5%;}
.col15 { width:61.75%;}
.col16 { width:66%;}
.col17 { width:70.25%;}
.col18 { width:74.5%;}
.col19 { width:78.75%;}
.col20 { width:83%;}
.col21 { width:87.25%;}
.col22 { width:91.5%;}
.col23 { width:95.75%;}
.col24 { width:100%;margin:0;}
.colOffset1 { padding-left:4.25%;}
.colOffset2 { padding-left:8.5%;}
.colOffset3 { padding-left:12.75%;}
.colOffset4 { padding-left:17%;}
.colOffset5 { padding-left:21.25%;}
.colOffset6 { padding-left:25.5%;}
.colOffset7 { padding-left:29.75%;}
.colOffset8 { padding-left:34%;}
.colOffset9 { padding-left:38.25%;}
.colOffset10 { padding-left:42.5%;}
.colOffset11 { padding-left:46.75%;}
.colOffset12 { padding-left:51%;}
.colOffset13 { padding-left:55.25%;}
.colOffset14 { padding-left:59.5%;}
.colOffset15 { padding-left:63.75%;}
.colOffset16 { padding-left:68%;}
.colOffset17 { padding-left:72.25%;}
.colOffset18 { padding-left:76.5%;}
.colOffset19 { padding-left:80.75%;}
.colOffset20 { padding-left:85%;}
.colOffset21 { padding-left:89.25%;}
.colOffset22 { padding-left:93.5%;}
.colOffset23 { padding-left:97.75%;}
/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width:480px) and (max-width:975px) { .container{ width:98%;}
.ie .container { width:976px;}
}
/*  #Mobile (Portrait)
================================================== */
    @media only screen and (max-width:479px) { .container{ width:98%;}
.ie .container { width:976px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .col21, .col22, .col23, .col24 { width:100%;margin-bottom:10px;}
.col1.lastCol, .col2.lastCol, .col3.lastCol, .col4.lastCol, .col5.lastCol, .col6.lastCol, .col7.lastCol, .col8.lastCol, .col9.lastCol, .col10.lastCol, .col11.lastCol, .col12.lastCol, .col13.lastCol, .col14.lastCol, .col15.lastCol, .col16.lastCol, .col17.lastCol, .col18.lastCol, .col19.lastCol, .col20.lastCol, .col21.lastCol, .col22.lastCol, .col23.lastCol, .col24 { margin-bottom:10px;}
.colOffset1, .colOffset2, .colOffset3, .colOffset4, .colOffset5, .colOffset6, .colOffset7, .colOffset8, .colOffset9, .colOffset10, .colOffset11, .colOffset12, .colOffset13, .colOffset14, .colOffset15, .colOffset16, .colOffset17, .colOffset18, .colOffset19, .colOffset20, .colOffset21, .colOffset22, .colOffset23 { padding-left:0;}
}
/*  #Mobile (fix minimum screen for mobile)
================================================== */
    @media only screen and (max-width:320px) { .container{ padding:0;width:300px;}
.ie .container { width:976px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .col21, .col22, .col23, .col24 { width:100%;}
}
/* #Clearing
================================================== */
    .container:after { content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.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;}
.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}