/*<-#-#-#-#-#HOME STYLES#-#-#-#-#->*/

/*INFO*/
/*This style sheet includes styles used by the homepage*/

/*<----------General Content for Both Containers (re-usable declerations)---------->*/

div.topContentBox {
	width: 100%;
	padding: 0px;
	margin: 0px;
	float: left;
}

div.contentBox {
	width: 100%;
	padding: 0px;
	margin: 0px;
	margin-top: 20px;
	float: left;
}

#redContent {
	background-color: rgba(154, 0, 0, 0.5);
}

#grayContent {
	background-color: rgba(141, 141, 141, 0.5);
}

#whiteContent {
	background-color: rgba(255, 255, 255, 0.5);
}	

h1.contentBox {
	margin: 0px;
	padding: 5px 2% 0px 2%;
	font-size: 1.5rem;
}

h2.contentBox {
	margin: 0px;
	padding: 5px 2% 0px 2%;
	font-size: 1rem;
}

p.contentBox {
	margin: 0px;
	padding: 5px 2% 5px 2%;
}

/*<----------Left Container---------->*/

div.leftContent {
	float: left;
	width: 65%;
	padding: 0px;
	margin: 0px;
}

/*<--Top Drink-->*/

div.topDrinkInfo {
	margin: 0px;
	padding: 0px;
	float: left;
	width: calc(100% - 250px);
}

h1.topDrink {
	margin: 0px;
	padding: 5px 2% 0px 2%;
	font-size: 1.5rem;
}

p.topDrink {
	margin: 0px;
	padding: 5px 2% 5px 2%;
	display: inline-block;
	min-width: 96%;
}

div.topDrinkCard {
	margin: 0px;
	padding: 0px;
	float: right;
}

/*<----------Right Container---------->*/

div.rightContent {
	float: right;
	width: 30%;
	padding: 0px;
	margin: 0px;
}

/*<----------Media Queries PC Version---------->*/

/*<--Top Drink-->*/

@media only screen and (max-width:675px){
	div.topDrinkInfo {
		float: left;
		width: 99%;
		margin-bottom: 20px;
	}
		
	div.topDrinkCard {
		float: left;
		margin-top: -20px;
	}	
}

@media only screen and (max-width:600px){
	div.leftContent {
		float: left;
		width: 99%;
	}
		   
	div.rightContent {
		float: left;
		width: 99%;
		margin-bottom: 20px;
	}	
}	

/*<----------Media Queries for MOBILE (phone and tablet) Version---------->*/

/* <--Device Pixel Ratio Query for All High DPI Screens-->*/

@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
		   
/*<----------First Shrinking On Mobile Mode---------->*/		
	
/*<--Top Drink-->*/
	
	@media only screen and (max-width:675px){
		div.topDrinkInfo {
			float: left;
			width: 99%;
		}
	}

/*<----------Second Shrinking On Mobile Mode---------->*/
		
/*<--Largest Containers-->*/

	@media only screen and (max-width:500px){
		div.leftContent {
			float: left;
			width: 99%;
		}
		   
		div.rightContent {
			float: left;
			width: 99%;
			margin-bottom: 20px;
		}
	}	
}