/* BASIC PAGE SETUP ============================================================================= */
 body {
    background-color:#111;
    font:normal 100%/1.4'Arial', sans-serif;
    color: #fff;
    text-align: center;
}
/* IMAGES Component ============================================================================= */
 img {
    max-width: 100%;
}
/*  MAIN LAYOUT	============================================================================= */
 #wrapper {
    position: relative;
   /* margin-bottom: 75px; */
}
#main-content {
    position: relative;
}
p, ul, ol, h1, h2, h3, h4, h5, h6 {
    padding:0px;
    margin:0px;
    font-weight:normal;
}
/*  GRID COLUMN SETUP   ==================================================================== */
 .col {
    float:left;
}
.col:first-child {
    margin-left: 0;
}
/* all browsers except IE6 and lower */

/*  GRID OF THREE   ============================================================================= */
 .span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
.span_half_of_3 {
    width: 49.2%;
}
/*****************************************************Media queries**********************************************/

/* Mobile Devices (portrait and landscape) */
 @media only screen and (min-width: 1px) and (max-width: 699px) {
    .col {
        margin: 2% 0;
    }
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 100%;
    }
    .span_1_of_3 {
        width: 100%;
    }
}