.responsiveBox { float: left; }
#root { max-width: 1200px; margin: 0 auto; }

/*#################### 2 Column Classes ####################*/
#TwoColLeft { width: 25%; }
#TwoColRight { width: 75%; }
/*##########################################################*/

/*#################### 3 Column Classes ####################*/
#HomeFirstColumn { 
    width: 18%;
    align-content: center;
}
#HomeSecondColumn { 
    width: 55%;
    align-content: center;
}
#HomeThirdColumn { 
    width: 27%; 
    align-content: center;
}
/*##########################################################*/

/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#TwoColLeft { width: 25%; }
	#TwoColRight { width: 75%; }
	#HomeFirstColumn { width: 15%; }
	#HomeSecondColumn { width: 55%; }
	#HomeThirdColumn { width: 30%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#TwoColLeft { width: 25%; }
	#TwoColRight { width: 75%; }
    #HomeFirstColumn { width: 30%; }
	#HomeSecondColumn { width: 70%; }
	#HomeThirdColumn { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#TwoColLeft { width: 100%; }
	#TwoColRight { width: 100%; }
    #HomeFirstColumn { width: 100%; }
	#HomeSecondColumn { width: 100%; }
	#HomeThirdColumn { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#TwoColLeft { width: 100%; }
	#TwoColRight { width: 100%; }
    #HomeFirstColumn { width: 100%; }
	#HomeSecondColumn { width: 100%; }
	#HomeThirdColumn { width: 100%; }
}