@charset "utf-8";

/* SETUP============================================================================= */
.float-left {
float:left;
}
.float-right {
float:right;
}
.content-clear {
clear:both;
}

/* SECTIONS============================================================================= */
.section {
clear:both;
padding:0px;
margin:0px;
}
.padding1 {
padding:1%;
}
.padding2 {
padding:2%;
}
.padding1h {
padding-left:1%;
padding-right:1%;
}
.padding2h {
padding-left:2%;
padding-right:2%;
}
.padding1v {
padding-top:1%;
padding-bottom:1%;
}
.padding2v {
padding-top:2%;
padding-bottom:2%;
}
.divide-l {
border-left: 1px solid #C2C2C2;
padding-left: 1.6%;
}
.divide-r {
border-right: 1px solid #C2C2C2;
padding-right: 1.6%;
}

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

/* GRID COLUMN SETUP ==================================================================== */
.column {
display:block;
float:left;
margin:1% 0px 1% 1.6%;
}
.column:first-child {
margin-left:0px;
} /*  all browsers except IE6 and lower */
.trim {
margin:0px 0px 0px 1.6%;
}

/* GRID OF TWO ============================================================================= */
.span-2-of-2 {
width:100%;
}
.span-1-of-2 {
width:49.2%;
}
.span-1-of-2:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width:100%; 
}
.span-2-of-3 {
width:66.1%; 
}
.span-1-of-3 {
width:32.2%; 
}
.span-1-of-3:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FOUR ============================================================================= */
.span-4-of-4 {
width:100%; 
}
.span-3-of-4 {
width:74.6%; 
}
.span-2-of-4 {
width:49.2%; 
}
.span-1-of-4 {
width:23.8%; 
}
.span-1-of-4:nth-child(4n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FIVE ============================================================================= */
.span-5-of-5 {
width:100%;
}
.span-4-of-5 {
width:79.68%; 
}
.span-3-of-5 {
width:59.36%; 
}
.span-2-of-5 {
width:39.04%;
}
.span-1-of-5 {
width:18.72%;
}
.span-1-of-5:nth-child(5n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX ============================================================================= */
.span-6-of-6 {
width:100%;
}
.span-5-of-6 {
width:83.06%;
}
.span-4-of-6 {
width:66.13%;
}
.span-3-of-6 {
width:49.2%;
}
.span-2-of-6 {
width:32.26%;
}
.span-1-of-6 {
width:15.33%;
}
.span-1-of-6:nth-child(6n+1) { 
clear:both;
margin-left:0px;
}

/* REVERSE ORIGINAL GRID OF TWO ============================================================================= */
.reverse .span-1-of-2 {
width:100%;
margin:0px 0px 1% 0px;
}

/* SWITCH ORIGINAL GRID OF TWO ============================================================================= */
.switch .span-1-of-2 {
width:100%;
margin:0px 0px 1% 0px;
}

@media only screen and (max-width:768px) {
/*   MAKE LAYOUT RESPONSIVE at 768px FOR IPAD LANDSCAPE ================================================================ */

/* GRID OF SIX TURNS INTO A GRID OF THREE */
.split .span-1-of-6 {
width:32.2%;
}
.split .span-1-of-6:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF THREE */
.split-odd .span-1-of-6 {
width:32.2%;
}
.split-odd .span-1-of-6:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF FOUR */
.split-even .span-1-of-6 {
width:23.8%; 
}
.split-even .span-1-of-6:nth-child(4n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF TWO TURNS INTO A GRID OF ONE */
.divide .span-1-of-2 {
width:100%;
}
.divide .span-1-of-2:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF THREE TURNS INTO A GRID OF ONE */
.divide .span-1-of-2 {
width:100%;
}
.divide .span-1-of-2:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FOUR TURNS INTO A GRID OF TWO */
.divide .span-1-of-4 {
width:49.2%;
}
.divide .span-1-of-4:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FIVE TURNS INTO A GRID OF TWO */
.divide .span-1-of-5 {
width:49.2%;
}
.divide .span-1-of-5:nth-child(5n+1) { 
clear:none;
margin-left:1.6%;
}
.divide .span-1-of-5:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF THREE */
.divide .span-1-of-6 {
width:32.2%;
}
.divide .span-1-of-6:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF THREE TURNS INTO A GRID OF TWO */
.divide-up .span-1-of-3 {
width:49.2%;
}
.divide-up .span-1-of-3:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.divide-up .span-1-of-3:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF FOUR */
.divide-up .span-1-of-6 {
width:23.8%; 
}
.divide-up .span-1-of-6:nth-child(6n+1) { 
clear:none;
margin-left:1.6%;
}
.divide-up .span-1-of-6:nth-child(4n+1) { 
clear:both;
margin-left:0px;
}

/* SWITCH ORIGINAL GRID OF TWO ============================================================================= */
.switch .span-1-of-2 {
width:49.2%;
margin:0.4%;
}
.switch .span-1-of-2:nth-child(2n+1) { 
clear:both;
}

}

@media only screen and (max-width:480px) {
/* MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */

/* GRID COLUMN SETUP   ==================================================================== */
.column { 
margin:1% 0px 1% 0px;
}
.split .column { 
margin:1% 0px 1% 1.6%;
}
.split-even .column { 
margin:1% 0px 1% 1.6%;
}
.split-odd .column { 
margin:1% 0px 1% 1.6%;
}
.divide .column { 
margin:1% 0px 1% 1.6%;
}
.divide-up .column { 
margin:1% 0px 1% 0px;
}
.maintain .column { 
margin:1% 0px 1% 1.6%;
}
.trim {
margin:0px;
}

/* GRID OF TWO   ============================================================================= */
.span-2-of-2 {
width:100%; 
}
.span-1-of-2 {
width:100%; 
}

/* GRID OF THREE   ============================================================================= */
.span-3-of-3 {
width:100%; 
}
.span-2-of-3 {
width:100%; 
}
.span-1-of-3 {
width:100%;
}

/* GRID OF FOUR   ============================================================================= */
.span-4-of-4 {
width:100%; 
}
.span-3-of-4 {
width:100%; 
}
.span-2-of-4 {
width:100%; 
}
.span-1-of-4 {
width:100%; 
}

/* GRID OF FIVE   ============================================================================= */
.span-5-of-5 {
width:100%; 
}
.span-4-of-5 {
width:100%; 
}
.span-3-of-5 {
width:100%; 
}
.span-2-of-5 {
width:100%; 
}
.span-1-of-5 {
width:100%; 
}

/* GRID OF SIX   ============================================================================= */
.span-6-of-6 {
width:100%; 
}
.span-5-of-6 {
width:100%; 
}
.span-4-of-6 {
width:100%; 
}
.span-3-of-6 {
width:100%; 
}
.span-2-of-6 {
width:100%; 
}
.span-1-of-6 {
width:100%; 
}

/* GRID OF THREE TURNS INTO A GRID OF ONE */
.split .span-1-of-3 {
width:100%;
}
.split .span-1-of-3:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FOUR TURNS INTO A GRID OF TWO */
.split .span-1-of-4 {
width:49.2%;
}
.split .span-1-of-4:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF THREE */
.split .span-1-of-6 {
width:32.2%; 
}
.split .span-1-of-6:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF TWO */
.split-odd .span-1-of-6 {
width:49.2%;
}
.split-odd .span-1-of-6:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.split-odd .span-1-of-6:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF TWO */
.split-even .span-1-of-6 {
width:49.2%;
}
.split-even .span-1-of-6:nth-child(4n+1) { 
clear:none;
margin-left:1.6%;
}
.split-even .span-1-of-6:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FOUR TURNS INTO A GRID OF ONE */
.divide .span-1-of-4 {
width:100%;
}
.divide .span-1-of-4:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF FIVE TURNS INTO A GRID OF ONE */
.divide .span-1-of-5 {
width:100%;
}
.divide .span-1-of-5:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF ONE */
.divide .span-1-of-6 {
width:100%;
}
.divide .span-1-of-6:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF THREE TURNS INTO A GRID OF ONE */
.divide-up .span-1-of-3 {
width:100%;
}
.divide-up .span-1-of-3:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* GRID OF SIX TURNS INTO A GRID OF ONE */
.divide-up .span-1-of-6 {
width:100%;
}
.divide-up .span-1-of-6:nth-child(1n+1) { 
clear:both;
margin-left:0px;
}

/* MAINTAIN ORIGINAL GRID OF TWO ============================================================================= */
.maintain .span-2-of-2 {
width:100%;
}
.maintain .span-1-of-2 {
width:49.2%;
}
.maintain .span-1-of-2:nth-child(2n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-1-of-2:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}

/* MAINTAIN ORIGINAL GRID OF THREE ============================================================================= */
.maintain .span-3-of-3 {
width:100%; 
}
.maintain .span-2-of-3 {
width:66.1%; 
}
.maintain .span-1-of-3 {
width:32.2%; 
}
.maintain .span-1-of-3:nth-child(3n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-1-of-3:nth-child(2n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-3:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}

/* MAINTAIN ORIGINAL GRID OF FOUR ============================================================================= */
.maintain .span-4-of-4 {
width:100%; 
}
.maintain .span-3-of-4 {
width:74.6%; 
}
.maintain .span-2-of-4 {
width:49.2%; 
}
.maintain .span-1-of-4 {
width:23.8%; 
}
.maintain .span-1-of-4:nth-child(4n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-1-of-4:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-4:nth-child(2n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-4:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}

/* MAINTAIN ORIGINAL GRID OF FIVE ============================================================================= */
.maintain .span-5-of-5 {
width:100%;
}
.maintain .span-4-of-5 {
width:79.68%; 
}
.maintain .span-3-of-5 {
width:59.36%; 
}
.maintain .span-2-of-5 {
width:39.04%;
}
.maintain .span-1-of-5 {
width:18.72%;
}
.maintain .span-1-of-5:nth-child(5n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-1-of-5:nth-child(4n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-5:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-5:nth-child(2n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-5:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}

/* MAINTAIN ORIGINAL GRID OF SIX ============================================================================= */
.maintain .span-6-of-6 {
width:100%;
}
.maintain .span-5-of-6 {
width:83.06%;
}
.maintain .span-4-of-6 {
width:66.13%;
}
.maintain .span-3-of-6 {
width:49.2%;
}
.maintain .span-2-of-6 {
width:32.26%;
}
.maintain .span-1-of-6 {
width:15.33%;
}
.maintain .span-2-of-6:nth-child(6n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-2-of-6:nth-child(5n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-2-of-6:nth-child(4n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-2-of-6:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-2-of-6:nth-child(2n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-2-of-6:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}
.maintain .span-1-of-6:nth-child(6n+1) { 
clear:both;
margin-left:0px;
}
.maintain .span-1-of-6:nth-child(5n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-6:nth-child(4n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-6:nth-child(3n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-6:nth-child(2n+1) { 
clear:none;
margin-left:1.6%;
}
.maintain .span-1-of-6:nth-child(1n+1) { 
clear:none;
margin-left:0px;
}

.stretch {
width:100%; 
margin:1% 0px 1% 0px;
clear:both;
margin-left:0px;
}

/* REVERSE ORIGINAL GRID OF TWO ============================================================================= */
.reverse .span-1-of-2 {
width:49.2%;
margin:0.4%;
}
.reverse .span-1-of-2:nth-child(2n+1) { 
clear:both;
}

/* SWITCH ORIGINAL GRID OF TWO ============================================================================= */
.switch .span-1-of-2 {
width:100%;
margin:0%;
}
.switch .span-1-of-2:nth-child(1n+1) { 
clear:both;
}

}