/* ================ Media Queries - Headers 1 and 2 - Begins =================================== */

/* Header 1 Media Queries - Do Not Display If Less Than 768px - (Set -1px) */
@media only screen and (max-width: 767px) {
#container-header-1 {
    display: none; 
}
}

/* Header 2 Media Queries - Do Not Display If More Than 767px - (Set +1px) */
@media only screen and (min-width: 768px) {
#container-header-2 {
    display: none; 
}
}

/* ================ Media Queries - Headers 1 and 2 - Ends ===================================== */


/* ================ Media Queries - Navigation - Begins ======================================== */

/* Navigation 1 Media Queries - Do Not Display If Less Than 768px - (Set -1px) */
@media only screen and (max-width: 767px) {
#container-navigation-1 {
    display: none; 
}
}

/* Navigation 2 Media Queries - Do Not Display If More Than 767px - (Set +1px) */
@media only screen and (min-width: 768px) {
#container-navigation-2 {
    display: none; 
}
}

/* ================ Media Queries - Navigation - Ends ========================================== */


/* ================ Media Queries - Content 1, 2 and 3 - Begins ================================ */

/* Home 1 Media Queries - Do Not Display If Less Than 768px - (set -1px) */
@media only screen and (max-width: 767px) {
#container-content-1 {
    display: none; 
}
}

/* Home 2 Media Queries - Do Not Display If More Than 767px - (Set +1px) */
@media only screen and (min-width: 768px) {
#container-content-2 {
    display: none; 
}
}

/* Home 2 Media Queries - Do Not Display If Less Than 481px - (Set -1px) */
@media only screen and (max-width: 480px){
#container-content-2 {
    display: none; 
}
}

/* Home 3 Media Queries - Do Not Display If More Than 480px - (Set +1px) */
@media only screen and (min-width: 481px) {
#container-content-3 {
    display: none; 
}
}

/* ================ Media Queries - Content 1, 2 and 3 - Ends ================================== */


/* ================ Media Queries - Footer 1, 2 and 3 Begins =================================== */

/* Footer 1 Media Queries - Do Not Display If Less Than 768px - (set -1px) */
@media only screen and (max-width: 767px) {
#container-footer-1 {
    display: none; 
}
}

/* Footer 2 Media Queries - Do Not Display If More Than 767px - (Set +1px) */
@media only screen and (min-width: 768px) {
#container-footer-2 {
    display: none; 
}
}

/* Footer 2 Media Queries - Do Not Display If Less Than 481px - (Set -1px) */
@media only screen and (max-width: 480px){
#container-footer-2 {
    display: none; 
}
}

/* Footer 3 Media Queries - Do Not Display If More Than 480px - (Set +1px) */
@media only screen and (min-width: 481px) {
#container-footer-3 {
    display: none; 
}
}

/* ================ Media Queries - Footer 1, 2 and 3 Ends ===================================== */


/* ================ 1 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-1 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-1 {
	display: block;
	float:left;
	margin: 0;
}
.col-1:first-child { margin-left:0; }

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

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

/* ================ 1 Columns CSS Ends ========================================================= */


/* ================ 2 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-2 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-2 {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}
.col-2:first-child { margin-left: 0; }

/*  GROUPING  */
.group-2:before,
.group-2:after { content:""; display:table; }
.group-2:after { clear:both;}
.group-2 { zoom:1; /* For IE 6/7 */ }

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

/* ================ 2 Columns CSS Ends ========================================================= */


/* ================ 3 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-3 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-3 {
	display: block;
	float:left;
	margin: 0 0 0 1.7%;
}
.col-3:first-child { margin-left: 0; }

/*  GROUPING  */
.group-3:before,
.group-3:after { content:""; display:table; }
.group-3:after { clear:both;}
.group-3 { zoom:1; /* For IE 6/7 */ }

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

/* ================ 3 Columns CSS Ends ========================================================= */


/* ================ 4 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-4 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-4 {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}
.col-4:first-child { margin-left: 0; }

/*  GROUPING  */
.group-4:before,
.group-4:after { content:""; display:table; }
.group-4:after { clear:both;}
.group-4 { zoom:1; /* For IE 6/7 */ }

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

/* ================ 4 Columns CSS Ends ========================================================= */


/* ================ 5 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-5 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-5 {
	display: block;
	float:left;
	margin: 0 0 0 1.5%;
}
.col-5:first-child { margin-left: 0; }

/*  GROUPING  */
.group-5:before,
.group-5:after { content:""; display:table; }
.group-5:after { clear:both;}
.group-5 { zoom:1; /* For IE 6/7 */ }

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

/* ================ 5 Columns CSS Ends ========================================================= */


/* ================ 8 Columns CSS Begins ======================================================= */

/*  SECTIONS  */
.section-8 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col-8 {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}
.col-8:first-child { margin-left: 0; }

/*  GROUPING  */
.group-8:before,
.group-8:after { content:""; display:table; }
.group-8:after { clear:both;}
.group-8 { zoom:1; /* For IE 6/7 */ }

/*  GRID OF EIGHT  */
.span-8-of-8 { width: 100%; }
.span-7-of-8 { width: 87.30%; }
.span-6-of-8 { width: 74.60%; }
.span-5-of-8 { width: 61.90%; }
.span-4-of-8 { width: 49.20%; }
.span-3-of-8 { width: 36.50%; }
.span-2-of-8 { width: 23.80%; }
.span-1-of-8 { width: 11.10%; }

/* ================ 8 Columns CSS Ends ========================================================= */