/* General Settings */

html { line-height: 1em; }

body {background-color:#867B65;	font-family: "Arial", Helvetica, sans-serif;
    font-size: 16px; margin: 0; color: #000; }

p1 {color:black; font-size:16px;}
p2 {color:#ABABAB; font-size:16px;}

header { position: relative; display: block; margin: 5px 0 10px 5px; width: 99vw;  height: 140px; text-align: center;}

.row-1 {width:99%; max-width: 1100px; display: inline-block; margin: 5px 5px 5px 5px; padding: 0; position: relative; text-align:center;background: #524116  ;}


.H01 { grid-area: H01; }
.H02 { grid-area: H02; }
.H03 { grid-area: H03; }
.H04 { grid-area: H04; }

  .HeaderContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 29% 30% 36%;
    grid-template-areas: "H01 H03 H04"
		"H02 H02 H04"	;  }

.hbx1 { margin: 0 ; padding: 3px 0 0 10px ;   }
.hbx2 { margin: 0 ; padding: 10px 0 0 0 ; text-align:center;}
.hbx3 { margin: 0 ; padding: 10px 0 0 0 ; }
.hbx4 { margin: 0 ; padding: 8px 0 0 15px ; text-align:left; max-width: 260px }


#Logo { position: relative; padding: 3px 0 0 0;
			width: 60%; height:auto;	display: inline-block }

#Social { position: relative; padding:6px 0 0 0;
			width: 85%; height:auto;	display: inline-block }

/*-- HEADER NAVIGATION --*/
.nv ul {display: block !important; margin: 0; float:right; font-size:12px;
	width: 99%;	padding: 0 0 0 0; position: relative; line-height: 1.8em; }

.nv ul li { text-transform: uppercase;	color: #fff; display: inline-block; 
	position: relative; padding: 0 0 0 8px; }

.nv a { display: inline-block; 	 text-decoration: none;
	letter-spacing: .1em; color: #fff; }

.nv a:hover { display: inline-block;	outline: none; color: #BB44E1 ; 
		 padding: 0; border-bottom: 2px solid #BB44E1; }

/*-- Coffee Content --*/
.row-10 {width:99vw; display:block; margin: 10px 0 0 5px; padding: 10px 0 0 0;
	position: relative; text-align: center; }
.row-11 {width:98%; display: inline-block; position: relative; 
	margin: 5px 5px 5px 5px;  max-width: 1100px; background-color:#C6EFEB; text-align: center;}

.Cf1 { grid-area: Cf1; }
.Cf2 { grid-area: Cf2; }
.Cf3 { grid-area: Cf3; }
.Cf4 { grid-area: Cf4; }


  .CoffeeContainer { display: grid; grid-gap: 5px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Cf1  Cf2"
		"Cf3 Cf4"	;  }

.cbx1 {  margin: 0;   }
.cbx2 { margin: 0;  text-align:center; }
.cbx3 {  margin: 0;   }
.cbx4 { margin: 0;  text-align:center; }


.row-12 {width:99%; height:50px;display: inline-block; margin: 10px 0 0 5px; padding: 0 0 0 20px; position: relative; text-align: left; background-color:#C6EFEB; font-size:18px;}

.row-13 {width:99%; height:150px;display: inline-block; margin: 10px 0 0 5px; padding: 0 0 0 20px; position: relative; text-align: left; background-color:#C6EFEB; font-size:18px;}

#Pic { position: relative; padding: 5px 0 0 0;
			width: 95%; height:auto;	display: inline-block }
#Mrch { position: relative; padding: 5px 0 0 0;
			width: 95%; height:auto;	display: inline-block }
#Bag { position: relative; padding: 5px 0 0 0;
			width: 45%; height:auto;	display: inline-block }

#Shop { position: relative; padding: 5px 0 0 0; 
			width: 95%; height:auto;	display: inline-block }
#Shop:hover {  opacity: .5;  }


.lnv a { display: inline-block;  text-decoration: none; font-size:14px;
	letter-spacing: .1em; color: black; }

.lnv a:hover { display: inline-block;	outline: none; color: red ;  }

		/* Horizontal Cell View */
@media (min-width: 600px){


	


}

/* Vertical Tablet View */
@media (min-width: 700px){



 } 

/* Horizontal Tablet View */
@media (min-width: 830px){

#Logo { position: relative; padding: 3px 0 0 0;
			width: 40%; height:auto;	display: inline-block }	
#Social { position: relative; padding:6px 0 0 0;
			width: 65%; height:auto;	display: inline-block }
	
.nv ul { font-size:14px; width: 99%; line-height: 1.8em; }
	
}

	
/*  Desktop View  --*/
@media (min-width: 1240px){
	


	
}