/* 
	24 COLUMN - RESPONSIVE GRID SYSTEM
	DEVELOPED BY DENIS LEBLANC
	URL - http://responsive.gs
	VERSION - 2.0
	LICENSED UNDER GPL & MIT
*/


/* 	SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
	If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(../js/boxsizing.htc);
}


/* MAIN CONTAINER */
.container {
    max-width: 95%;
    margin: 0 auto;
}


/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after, .clr:after, .group:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* DEFAULT ROW STYLES */
.row {
    margin-bottom: .8em;
}
/* set according to preference*/


/* DEFAULT COLUMN STYLES */
.col {
    display: block;
    float: left;
    width: 100%;
}

@media ( min-width : 768px ) {
    .col {
        margin-left: 2%;
    }
}


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

.span_1 {
    width: 2.25%;
}

.span_2 {
    width: 6.5%;
}

.span_3 {
    width: 10.75%;
}

.span_4 {
    width: 15.0%;
}

.span_5 {
    width: 19.25%;
}

.span_6 {
    width: 23.5%;
}

.span_7 {
    width: 27.75%;
}

.span_8 {
    width: 32.0%;
}

.span_9 {
    width: 36.25%;
}

.span_10 {
    width: 40.5%;
}

.span_11 {
    width: 44.75%;
}

.span_12 {
    width: 49.0%;
}

.span_13 {
    width: 53.25%;
}

.span_14 {
    width: 57.5%;
}

.span_15 {
    width: 61.75%;
}

.span_16 {
    width: 66.0%;
}

.span_17 {
    width: 70.25%;
}

.span_18 {
    width: 74.5%;
}

.span_19 {
    width: 78.75%;
}

.span_20 {
    width: 83.0%;
}

.span_21 {
    width: 87.25%;
}

.span_22 {
    width: 91.5%;
}

.span_23 {
    width: 95.75%;
}

.span_24 {
    width: 100%;
}


/* COLUMN WIDTH ON DISPLAYS +768px */
@media ( min-width : 768px ) {
    .span_1 {
        width: 2.25%;
    }

    .span_2 {
        width: 6.5%;
    }

    .span_3 {
        width: 10.75%;
    }

    .span_4 {
        width: 15.0%;
    }

    .span_5 {
        width: 19.25%;
    }

    .span_6 {
        width: 23.5%;
    }

    .span_7 {
        width: 27.75%;
    }

    .span_8 {
        width: 32.0%;
    }

    .span_9 {
        width: 36.25%;
    }

    .span_10 {
        width: 40.5%;
    }

    .span_11 {
        width: 44.75%;
    }

    .span_12 {
        width: 49.0%;
    }

    .span_13 {
        width: 53.25%;
    }

    .span_14 {
        width: 57.5%;
    }

    .span_15 {
        width: 61.75%;
    }

    .span_16 {
        width: 66.0%;
    }

    .span_17 {
        width: 70.25%;
    }

    .span_18 {
        width: 74.5%;
    }

    .span_19 {
        width: 78.75%;
    }

    .span_20 {
        width: 83.0%;
    }

    .span_21 {
        width: 87.25%;
    }

    .span_22 {
        width: 91.5%;
    }

    .span_23 {
        width: 95.75%;
    }

    .span_24 {
        width: 100%;
    }
}

@media ( min-width : 320px ) {
    .span_1 {
        width: 2.25%;
    }

    .span_2 {
        width: 6.5%;
    }

    .span_3 {
        width: 10.75%;
    }

    .span_4 {
        width: 15.0%;
    }

    .span_5 {
        width: 19.25%;
    }

    .span_6 {
        width: 23.5%;
    }

    .span_7 {
        width: 27.75%;
    }

    .span_8 {
        width: 32.0%;
    }

    .span_9 {
        width: 36.25%;
    }

    .span_10 {
        width: 40.5%;
    }

    .span_11 {
        width: 44.75%;
    }

    .span_12 {
        width: 49.0%;
    }

    .span_13 {
        width: 53.25%;
    }

    .span_14 {
        width: 57.5%;
    }

    .span_15 {
        width: 61.75%;
    }

    .span_16 {
        width: 66.0%;
    }

    .span_17 {
        width: 70.25%;
    }

    .span_18 {
        width: 74.5%;
    }

    .span_19 {
        width: 78.75%;
    }

    .span_20 {
        width: 83.0%;
    }

    .span_21 {
        width: 87.25%;
    }

    .span_22 {
        width: 91.5%;
    }

    .span_23 {
        width: 95.75%;
    }

    .span_24 {
        width: 100%;
    }
}


@media (max-width: 426px) {
    .span_m_24 {
        width: 100%;
        padding-bottom: 5px;
    }

    .span_m_10 {
        width: 40.5%;
    }

    .span_m_9 {
        width: 36.25%;
    }

    .span_m_12 {
        width: 49.0%;
    }

    .span_m_18 {
        width: 74.5%;
    }

    .span_m_20 {
        width: 83.0%;
    }

    .span_m_24 {
        width: 100%;
    }
}

@media (max-width: 320px) and (min-width: 320px) {
    .span_sm_14 {
        width: 57.5%;
    }

    .span_sm_24 {
        width: 100%;
    }
}

@media ( min-width : 426px ) and (max-width: 768px) {
    .span_ipad_12 {
        width: 49.0% !important;
    }

    .span_ipad_10 {
        width: 40.5%;
    }

    .span_ipad_11 {
        width: 44.75%;
    }

    .span_ipad_14 {
        width: 57.5%;
    }

    .span_ipad_15 {
        width: 61.75%;
    }

    .span_ipad_16 {
        width: 66.0%;
    }


    .span_ipad_24 {
        width: 100%;
        padding-bottom: 5px;
    }
}

@media ( min-width : 1024px ) and (max-width: 1366px) {
    .span_ipadpro_14 {
        width: 57.5%;
    }

    .span_ipadpro_24 {
        width: 100%;
    }
}

@media ( min-width : 768px ) and (max-width: 1024px) {
    .span_lp_24 {
        width: 100%;
    }
}



@media ( min-width : 320px ) and (max-width: 425px) {
    .span_m_24_margin_bottom {
        margin-bottom: 20px;
    }
}