/* *********************************************************************************************************************
    One% CSS Grid - 12 Columns Fluid CSS Grid System

	MODIFIED FOR MATRIX FRONT END PROJECTS BY: SAM CARNE
   ================================================== */

/* *********************************************************************************************************************
 * Main container for all
   ================================================== */

#main {
  margin: 0 !important;
    padding: 0 0 0 0; /* THAT'S THE NAME ;) _NO__DOTCOMMA__AFTER__*/
    text-align: center;
}

.row {
    clear: both;
}

section {
  padding: 10%;
}

/* *********************************************************************************************************************
 * Common columns definitions
   ================================================== */
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
 {
    float: left;
    margin: 0 3% 0 0;
}

.col1.last,
.col2.last,
.col3.last,
.col4.last,
.col5.last,
.col6.last,
.col7.last,
.col8.last,
.col9.last,
.col10.last,
.col11.last,
.col12 {
    margin: 0
}

.col1 {
    width: 5.5%
}

.col2 {
    width: 14%
}

.col3 {
    width: 22.5%
}

.col4 {
    width: 31%
}

.col5 {
    width: 39.5%
}

.col6 {
    width: 48%
}

.col7 {
    width: 56.5%
}

.col8 {
    width: 65%
}

.col9 {
    width: 73.5%
}

.col10 {
    width: 82%
}

.col11 {
    width: 90.5%
}

.col12 {
    width: 100%;
    margin: 0;
}

/*
.col1 img,
.col2 img,
.col3 img,
.col4 img,
.col5 img,
.col6 img,
.col7 img,
.col8 img,
.col9 img,
.col10 img,
.col11 img,
.col12 img {
    width: 100%;
    height: auto;
    display: block;
}

/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
   ================================================== */

@media all and (min-width: 1024px) {
    #main {

    }

    #main .row {
        padding: 0
    }
}

/* *********************************************************************************************************************
 * Small devices
   ================================================== */

@media all and (max-width: 768px) {
    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11 {
        float: none;
        width: 99%;
    }

    section {
      padding: 15%;
    }
}

/* ON MOBILE */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 600px) {
    section {
        padding: 20% 10%;
  }
}
/* ON MOBILE END */