/*  SECTIONS ============================================================================= */

.section    {
    clear: both;
    padding: 0px;
    margin: 0em 12%;
}

.section2    {
    clear: both;
    padding: 0px;
    margin: 0em 20%;
}

@media only screen and (max-width: 1700px) {
.section {
    margin: 0 12%;
}
}

@media only screen and (max-width: 1600px) {
.section {
    margin: 0 10%;
}
}

@media only screen and (max-width: 1500px) {
.section {
    margin: 0 9%;
}
}

@media only screen and (max-width: 1400px) {
.section {
    margin: 0 9%;
}
.section2    {
    clear: both;
    padding: 0px;
    margin: 0em 15%;
}
}

@media only screen and (max-width: 1300px) {
.section {
    margin: 0 7%;
}
}

@media only screen and (max-width: 1200px) {
.section {
    margin: 0 5%;
}
}


@media only screen and (max-width: 1024px) {
.section {
    margin: 0 4%;
}
}

@media only screen and (max-width: 768px) {
.section {
    margin: 0 1.5em;
}
.section2    {
    clear: both;
    padding: 0px;
    margin: 0em 10%;
}
}

@media only screen and (max-width: 640px) {
.section {
    margin: 0 1em;
}
}

/*  GROUPING ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP ==================================================================== */

.col {
    display: block;
    float:left;
    margin: 0% 0%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 768 PIXELS */

@media only screen and (max-width: 768px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}