/*Aidan Waugh 301255977
Oscar Ping
IAT 339 D102*/

/*______________________________ TEXT  (includes <a> and effects)___________________*/
body {
	font-family: 'Josefin Sans', sans-serif;
	margin:1em;
	margin-bottom: .5em;
	font-size: 1em;
	line-height: 1.2em;
}

h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 3em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-top: 4em;
	
	line-height: 0;
}

.h1-alternate{
	font-family: 'Merriweather', serif;
	font-size: 2em;
	text-transform: none;
}

.h1-high{
	font-family: 'Merriweather', serif;
	font-size: 2em;
	text-transform: none;
	padding-top: 1.5em;
}

#h1-lazy-sunday{
	font-family: 'Merriweather', serif;
	font-size: 2em;
	text-transform: none;
	padding-top: 0;
	text-align:left;
	margin-bottom: .2em;
}

h2 {
	font-family: 'Merriweather', serif;
	font-size: 2em;

}

.fake-h3{
	font-family: 'Merriweather', serif;
	font-size: 1.4em;
	letter-spacing: 0.025em;
	/*FF start*/
	margin-top: 0;
	padding-top: 1.2em;
	margin-bottom: 0;
	padding-bottom: .3em;
	line-height: 1.1em;
}

h2.underline{
	font-family: 'Merriweather', serif;
	border-bottom: solid 2px #333333;

}

#h2-new-winter-arrivals{
	margin-bottom: 0;
	margin-top: 2em;
}

.h1-follow{
	padding-bottom: 2em;
}


h3{
	font-family: 'Merriweather', serif;
	font-size: 1.3em;
	letter-spacing: 0.025em;
	padding:0;
	margin-top: 1.2em;
	line-height: 1.1em;
}

#reccommended-coffees{
	padding-right: 1em;
	padding-left:1em;
}

/*FF start*/
.listing-title{
	margin-bottom:0;
	margin-top: .5em;    
}




.listing-price{
	font-family: 'Josefin Sans', sans-serif;
	/*FF start*/
	font-size: 1.2em;
	/*FF end*/
	letter-spacing: 0.025em;
	padding:0;
	margin-top: 1.2em;
	line-height: 1.1em;
}



	.text-centered{
		text-align: center;
	}

	.text-left{
		text-align: left;
	}

	h4 {
		font-family: 'Josefin Sans', sans-serif;
		font-size: .9em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		margin-top: 0;
		margin-bottom: 0;
		padding-top:.5em;
		padding-bottom: 1em;
	}

	#order-total{
		font-family: 'Josefin Sans', sans-serif;
		font-size: .9em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		margin-top: 0;
		padding-top: .3em;

	}




	.product-des{
		font-family: 'Josefin Sans', sans-serif;
		font-size: .7em;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-top: 0;
		margin-bottom: 0;
		padding-top:.5em;
	}

	h5 {
		font-family: 'Merriweather', serif;
		font-size: .8em;
		margin-top: .2em;
		margin-bottom: .2em;
		letter-spacing: .05em;
	}

	.fake-h5{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		margin-top: .2em;
		margin-bottom: .2em;
		padding-right: 2em;
		padding-left: 2em;
		letter-spacing: .05em;	
	}

	p {
		font-family: 'Josefin Sans', sans-serif;
		display:inline-block;
		font-size: 1em;
		margin-bottom: .2em;
		text-align: center;
		margin-top: .1em;
	}

	.p-contact{
		font-family: 'Josefin Sans', sans-serif;
		display:block;
		margin-bottom: .2em;
	}

	.p-review{
		display: block;
		margin-top: 0;
		margin-bottom: .2em;
	}

	.breadcrumb{
		margin-bottom: 4em;
	}

	#lazy-description{
		text-align: left;
		padding-right: 2em;
		padding-left: 2em;
		padding-top: 2em;
		padding-bottom:0;
		margin-top: 0;
	}


	#p-lazy-sunday-sub{
		display: block;
		text-align: left;
		margin-top: 0;
		padding-top: .4em;
		margin-bottom: 1.5em

	}

	#div-quality-coffee{


		padding-left: 5em;
		padding-right: 5em;
		text-align: left;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}

	.p-product-detail-quantity{
		float: left;
	}

	.fake-header{
		font-family: 'Josefin Sans', sans-serif;
		font-size: .9em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color:#ab8f50;
		margin-top: 3em;
	}
	.fake-h4{
		font-family: 'Josefin Sans', sans-serif;
		font-size: .9em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		margin-top: 0;
		padding-top: .3em;
	}

	.quote{
		font-family: 'Merriweather', serif;
		font-size: 1.4em;
		letter-spacing: 0.025em;
		padding:0;
		margin-top: 1.2em;
		line-height: 1.1em;
		text-align: center;
		color:#ab8f50;
		max-width:100%;
		margin-bottom: 1.5em;
	}

	ul {
		margin-top: .2em;
		margin-bottom: .2em;

		max-width: 12em;
		text-align: left;


	}


	ol{
		margin-top: .2em;
		margin-bottom: .2em;

		max-width: 30em;
		text-align: left;
	}


	li{
		margin-top: .3em;
		margin-bottom: .3em;
	}


	#french-instructions-1,#french-instructions-2,#french-instructions-3,#img-div-instruction-3,#img-div-instruction-2,#img-div-instruction-1  {  	 
		padding-right: 6em;    	 
		padding-left: 6em;
		text-align: left;


	}


	.french-instructions{
		text-align: left;
	}


	.margin-bottom-0{
		margin-bottom: 0;
	}







	.ul-title{
		font-size: .9em;
		font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
		margin-top: .2em;


	}

	.ul-content{
		color:#ab8f50;
		margin-top: .2em;
	}

	#product-detail-list{
		list-style: none;
		text-align: left;
	}

	a {
		cursor: pointer;
		text-decoration: none;
		color: #ab8f50;
		font-size: 1em
	}

	a.footer-links{
		margin: 0em .5em 0em .5em;
		color:#512C1C;
		margin: 0em .5em 0em .5em;


	}






	a:hover, a:focus {
		color:#512C1C;
	}
	.img-button{
		color:black;
	}

	.img-button:hover{
		color:#ab8f50;
	}

	.fig-listing{
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		margin-top: 1em;
	}

	code, samp {
		display: block;
		font-family: "Courier New", monospace;
		font-size: 0.8em;
		background-color: rgb(235,235,235);
		padding: 0.5em;
		text-align: left;
	}	

	#p-fair{
		max-width: 40em;
	}


	/*___________________________________ IMAGES ______________________________*/

	.product-image{
		padding-top: 1em;
	}


	/*___________________________________ BUTTONS ______________________________*/


	.button-alternate{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: #e8e1d0  ;
	}


	.button-alternate:active, .button-alternate:hover, .button-alternate:focus{
		color:white;
		text-decoration: none;
		background-color: #ab8f50;
	}


	.button-default{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:white;
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}




	.button-default:active, .button-default:hover, .button-default:focus{
		color:white;
		text-decoration: none;
		background-color:#867D77;
		border-color:#867D77;
	}

	#submit-your-order, #checkout-button{
		display: inline-block;
		margin-top: 2em;
		margin-bottom: 2.3em;
	}

	/*------------product detail buttons----------*/
	/*coffee size*/
	.button-coffee-size{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: transparent;
	}

	/*when clicked*/
	.button-coffee-size:focus{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:white; 
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*after clicked*/
	.button-coffee-size:target{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:white; 
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*Coffee grind buttons*/
	.button-coffee-grind{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: transparent;
	}

	/*when clicked*/
	.button-coffee-grind:focus{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:white; 
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*after clicked*/
	.button-coffee-grind:target{
		font-family: 'Merriweather', serif;
		font-size: .8em;
		color:white; 
		text-align: center;
		padding:.6em 2.5em .6em 2.5em;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}
	.button-detail-div{
		margin-top: 1.5em;
	}

	/*___________________________________ NAVIGATION (includes buttons) ______________________________*/
	.nav{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;

	}

	.nav-section{
		/*the bounding box for each section in the navigation, should this be grids? but specific and diffeerent from them*/

		background-color: white; /*temporary, will be white */
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		text-align: center;
		text-transform: uppercase;
		color:black;
		letter-spacing: 0.025em;
		font-size: 0.8em;
		height: 5em;
		line-height: 5em;
	}

	.nav-section-sign-in:active, .nav-section-sign-in:hover, .nav-section-sign-in:focus{
		/*text changes color*/
		color:#ab8f50;




	}

	.nav-section-sign-in{
		background-color: white; /*temporary, will be white */
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		text-align: center;
		text-transform: uppercase;
		color:black;
		letter-spacing: 0.025em;
		font-size: 0.8em;
		height: 5em;
		line-height: 5em;


	}

	.nav-cart-icon{
		float: initial;
	}

	.nav-cart{
		float: left;
		padding-right: 3em;
	}


	#logo{
		/*specific sizing box-div for the logo, as it is larger and an image*/
		width: 32%;

	}

	#img-logo{
		/*the logo image*/
		width:100%;

		height:auto;



	}

	#nav-button-Home{
		display: none;
	}



/*___________________________________ COLORS (text color and backgrounds)/ALIGN ______________________________*/
.text-color-brown{
	/*regular light brown/caramel color*/
	color:#ab8f50;
}

.text-color-darkbrown{
	color:#867D77;
}

.text-color-black{
	color:black;
}

.text-color-white{
	color:white;
}

.align-center{
	text-align:center;
}

.align-left{
	text-align: left;
}

.bg-grey{
	background-color: #f7f7f7;
}

.bg-white{
	background-color: white;
}

/*___________________________________ HEADER stuff, the div not h1 ______________________________*/
.text-header{
	text-align: center;
}


/*___________________________________ FORMS(input, send, ect) ______________________________*/
.form-contact{ 
	width:17em;

}

.form-contact-styleguide{
	width:20%;
}

.form-address{
	width:100%;
}

#form-contact-id, #form-address-id, #form-payment-id, #form-review-id{
	display: inline-block;
}

.label-contact, .address-label{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
}

.form-radio{
	float:left !important;
}



fieldset {
    border: none;
    margin: 0;
    padding:0;
}

legend{
	visibility: hidden;
}

#select-label-1, #select-label-2, #select-label-3{
	visibility: hidden;
	width: 0;
	height:0;
	margin: 0;
	padding: 0;
	float:left;
}


	input[type="text"],input[type="number"]{
		border:1px solid #dedede;
	width: 100%;
	height:42px;
	margin-top: .3em;
	margin-bottom:1.3em;
	padding-left: 1em;
}



input[type="text"]:focus, textarea:focus, input[type="number"]:focus{
	outline:none;
	border-color: #ab8f50;
	padding-left: 1em;
	padding-top:0.5em;
}

textarea {
	border:1px solid #dedede;
	width:100%;
	min-height: 85px;
	margin-top:.5em;
	padding-left: 1em;
	padding-top: .5em;
}


.content{

	margin-top: 70px;
	border-bottom: solid 2px #333333;;
	background-color: white;
}
.form-input-section{
	margin-top: .5em;
	margin-bottom: 1.5em;
}

.form-button-submit{
	font-family: 'Merriweather', serif;
	font-size: .8em;
	text-align: left;
	color:white; 
	text-align: center;
	padding:.6em 2.5em .6em 2.5em;
	border: 2px solid;
	border-color:#ab8f50; /*brown*/
	display:inline-block;
	background-color: #ab8f50;
}

.form-button-sign-in{
	font-family: 'Merriweather', serif;
	font-size: .8em;
	text-align: left;
	color:white; 
	text-align: center;
	padding:.6em 2.5em .6em 2.5em;
	border: 2px solid;
	border-color:#ab8f50; /*brown*/
	display:inline-block;
	background-color: #ab8f50;
}

.form-button-submit:hover,.form-button-submit:active,.form-button-submit:focus{
	background-color: #867D77;
	border-color:#867D77; 
}

#div-review-name{
	margin-bottom: 0;
}


.address-label{
	display: block;
}


#form-address-id span{
	display:inline-block;
}


.form50-right{
	width:50%;
	float:left;
	padding-right: .75em;

}
.form50-left{
	width:50%;
	float:left;
	padding-left: .75em;
}


.form75-right{
	width:65%;
	float:left;
	padding-right: .75em;

}
.form25-left{
	width:35%;
	float:left;
	padding-left: .75em;
}


#div-quantity{
	width:40%;
}


.form-quantity{

}

.float-right{
	float:right;
}

form label#form-quantity-label{
	color:red;
}

form input#form-quantity-label{
	background-color: white;
}

.form-button-add-bag{
	width:100%;
	font-family: 'Merriweather', serif;
	font-size: .8em;
	text-align: left;
	color:red; 
	text-align: center;
	padding-top: .6em;
	padding-bottom: .6em;
	border: 2px solid;
	border-color:#ab8f50; /*brown*/
	display:inline-block;
	background-color: #ab8f50;
}


/*___________________________________ GRIDS(Color, size) ______________________________*/

/*Navigation*/
.nav-button{
	background-color: white;
}

.teal-nav{
	background-color: white;
}

.nav-image{
	background-color: white;
	display: block;
}

/*Main*/
.main-image{
	background-color: #ab8f50;
	
	height: 38em;
}

.about-image{
	
	height: 38em;
}

/*############*/

.gray{
	background-color: #949292;
}

/*Gutters*/
.gutter{
	background-color: white;
}

.bg-grey{
	background-color: #f7f7f7;
}

/*Product*/
.feature-product{

	background-color: white;
	border: 2px solid;
	border-color:white;
}

.button-product-detail{
	font-family: 'Merriweather', serif;
	font-size: .8em;
	color:#867D77; /*dark brown*/
	text-align: center;
	padding:.6em 2.5em .6em 2.5em;
	border: 2px solid;
	border-color:#ab8f50; /*brown*/
	display:inline-block;
	background: transparent;
	display: none;
}


.button-product-detail:active, .button-product-detail:hover, .button-product-detail:focus{
	color:#ab8f50;
	text-decoration: none;
}

.feature-product:hover{
	background-color: white;
	border: 2px solid;
	border-color:#ab8f50;
	position:relative;
	/*border: 5px solid grey;*/
}

.feature-product:hover .button-product-detail{
	display: block;
	position: absolute;
	z-index: 0;
	top: 43%;
	right:25%;
	background-color: #ab8f50;
	opacity: 1;

}

.product{
	background-color: white;

}

.product-list-item{
	border: 1px solid;
	border-color:#f7f7f7;
}


.product-list-item:hover{

	
	/*opacity: .3;*/
	border: 1px solid;
	border-color:#ab8f50;
	position:relative;
	/**/
	/*border: 5px solid grey;*/
}

.product:hover .button-product-detail{
	display: block;
	position: absolute;
	/*z-index: 0;*/
	top: 90%;
	right:80%;
	background-color: #ab8f50;
	visibility: visible;
}


.footer{
	background-color: lightgrey;
}

.footer-content{
	padding: 4.275em;
}

a.footer-links{
	color:#512C1C;
	margin: 0em .5em 0em .5em;


}



/*________________________________________ IMAGES IMG (and center.col_________________________________*/
.logo-img{
	margin: 0px;


}
.center-col{
	position:absolute;
}

.img-line-vert{
	position:relative;
	/*top: 50%;*/
	/*left: 50%;*/
	/*margin-right: -50%;*/
	/* transform: translate(-50%, -50%) }*/
}

.img-product-large{
	/*max-height:50%;*/
	padding-top: 1.5em;
	width:auto;
	height: auto;
}
.lazy-full-large{
	width:100%;
	height: auto;
}

.product-img{
	width: 205.2px;
	/*height: 256px*/

}

.cart-small{
	margin: 0;
	padding: 0;
}

#main-splash-img{
	background-image: url('../img/splash(1).jpg');
	background-size: cover;
	background-position: center;
	width:100%;
	position: relative;
	padding-right: 2em;
	padding-left: 2em;
}

#about-splash-img{
	background-image: url('../img/splash(3).jpg');
	background-size: cover;
	background-position: center;
	padding-right: 2em;
	padding-left: 2em;
	/*opacity: .7;*/
}

#product-list-splash-img{
	background-image: url('../img/splash(2).jpg');
	background-size: cover;
	background-position: center;
	position: relative;
	padding-right: 2em;
	padding-left: 2em;
}


#img-about-quality{
	margin-top: 1em;
	margin-bottom: 1em;
	width:100%;
	height: auto;
}


.cart-icon{
	
	padding-top: 1em;
	padding-right: 6em;  
}




/*_____________________SPAN (order summary)________________________*/
/*the containing div*/
.cart-summary-item{
	display:block;
}

/*span class*/
.value{
	float:right;
	font-family: 'Josefin Sans', sans-serif;
	
	font-size: 1em;
}

/*span class*/
.summary-label{
	text-align: left;
	font-family: 'Josefin Sans', sans-serif;

	font-size: 1em;
}

#review-span, #review-span-2, #review-span-3{
	display: inline-block;
	width:20em;
	text-align: left;
}

#review-span, #review-span-2, #review-span-3{

}


/*_____________________Product Detail Radio________________________*/
/*the containing div*/

.switch-title-p-detail-1 {
	margin-top: .5em;
	margin-bottom: 1em;
	
	width: 77.593px;
	height: 19.200px;
	text-align: left !important;
}

.switch-title-p-detail-2 {
	margin-top: .5em;
	margin-bottom: 1em;
	
	width: 77.593px;
	height: 19.200px;
	text-align: left !important;
}


.switch-title {
	margin-top: .5em;
	margin-bottom: 1em;
	margin-right: 1em;
	margin-left:2em;
	width: 77.593px;
	height: 19.200px;
	text-align: left !important;
}

.switch-field input {
	display: none;
}

/*AIDAN*/
/*product detail quantity*/
#quantity-div, #quantity-div-2{
	display:block;
	width:6em;
	height:2.5em;
	border: 1px solid #ab8f50;
}

.quantity-33{
	width:30%;
	height: 100%;
	display:inline-block;
	background-color: #f7f7f7;
}
.quantity-p{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.1em;
	font-size: 1.8em;
}

.quantity-p-num{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 2.3em;
	font-size: .9em;
}


#detail-min, #detail-plus, #detail-min-2, #detail-plus-2{
	background-color: #f7f7f7;
	color:#ab8f50;
}

#detail-min:hover, #detail-min:focus, #detail-plus:hover, #detail-plus:focus, #detail-min-2:hover, #detail-min-2:focus, #detail-plus-2:hover, #detail-plus-2:focus{
	background-color: white;
	cursor: pointer;
}

#cart-item-description{
	width:10em;
}

#detail-number, #detail-number-2{
	height: 80%
}





/*AIDAN*/
#drip-espresso-button-div{
	margin-top: 1em;
}


/*7&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
.product-detail-price{
	float :left;
	font-family: 'Josefin Sans', sans-serif;
	/*display:inline-block;*/
	/*max-width: 35em;*/
	/*margin-bottom: .2em;*/
	padding: 6px 14px;
	text-align: center;
}
/*7&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/

/*.switch-field label {
  float: left;
  } */
  /*_____________________Product List Filter________________________*/


  .switch-field {
  	width:100%;
  	/*padding-right: 80px;*/
  	padding-bottom: 2em;
  	overflow: hidden;
  }

/*.switch-field label {
float: left;
} */

.switch-field label {
	display: inline-block;
	width: 7.3em;
	/*height: 35px;*/
	/*background-color: white;*/
	font-size: .9em;
	text-align: center;
	padding: .5em .9em;
	border: 1px solid #ab8f50;
	margin-right: 1em;
	margin-bottom: 1em;
}

#switch-field-small-1, #switch-field-small-2{
	width:4em;
	margin-right: .8em;
} 

.switch-field label:hover {
	cursor: pointer;
	color:#ab8f50;
}

.switch-field input:checked + label {
	background-color: #ab8f50;

	color: white;

}


.styled-select {

	/*height: 35px;*/
	overflow: hidden;
	width: 100px;
	border: 1px solid #ab8f50;
	height: 31.25px;
	margin-right: 1em;
	background-color: #f7f7f7;
	margin-bottom: 1em;
}
.styled-select:after {
	content: '';
	width: 0;
	height: 100%;
	position: absolute;
	border: 1px solid black;
	top: 0;
	left: 100px;
}

.styled-select select {
	background: transparent;
	border: 1px solid #ab8f50;
	font-size: 14px;
	width: 100px;
	height: 35px;

}

#detail-summary-id{
	padding-left: 7em;
}


/*___________________________________ Cart form(input, send, ect) ______________________________*/
.cart-title{

	height: auto;
}

.cart-detail{
	float:right !important;

}

#cart-number-input{
	height:50px;
	width:50px;
	text-align: center;
	background-color: #f7f7f7;
}

/*_____________________VERTICAL LINE line vertical________________________*/


.vertical-line{
	border-right: 1px solid #ab8f50;
}

.hr70{
	width:70%;

	border-top: 1px solid #ab8f50;

}

.bottom-line{
	border-bottom: 1px solid #ab8f50;
}


/*_____________________Media Queries- MEDIA ________________________*/


@media (min-width: 10em){

	fieldset {
	    border: none;
	    margin: 0;
	    padding:0;
	}

	legend{
		visibility: hidden;
	}

	#nav-button-Home{
		display: initial;
	}

	#select-label-1, #select-label-2, #select-label-3{
		visibility: hidden;
		width: 0;
		height:0;
		margin: 0;
		padding: 0;
		float:left;
	}
	.vertical-line{
		border-right: 0px solid #f7f7f7;
	}

	#main-splash-img{
		background-image: url('../img/splash(1)x3.jpg');
	}

	#product-list-splash-img{
		background-image: url('../img/splash(2)x3.jpg');
		
	}

	#about-splash-img{
		background-image: url('../img/splash(3)x3.jpg');
	}

	.form-contact{
		width:90%;
	}
	#div-quality-coffee, #p-fair, .quote{
		padding-right:2em;
		padding-left:2em;
	}
	#p-fair{
		margin-bottom: 3em;
	}

	.img-product-large{
		/*max-height:50%;*/
		padding-top: 1.5em;
		width:50%;
		height: auto;
	}

	#img-instruction-1,#img-instruction-2,#img-instruction-3{
		padding-right: 0;
		padding-left: 0;
		width: 100%;
		height: auto;
	}


	#img-instruction-3{
		/*padding-top: 1.5em;*/
	}

	#french-instructions-1,#french-instructions-2,#french-instructions-3,#img-div-instruction-3,#img-div-instruction-2,#img-div-instruction-1  {  	 
		padding-right: 1em;    	 
		padding-left: 1em;


	}

	#review-span, #review-span-2, #review-span-3{
		width:16em;
	
	}



	.nav-section-sign-in{
		/*padding-left: 9.5em;*/

	}

	.cart-icon{
		display: none;	
		
		padding-right: 10em;  
		/*height: 5em;*/
	}	

	.nav-cart{

		/*padding-right: 7em;*/
		
	}

	.nav-cart-2{
		padding: 0;
	}

	.cart-icon-2{
		display: initial;	
			  
		/*height: 5em;*/
	}

	.switch-field label {
		
		padding: 1em 1.6em;
		
	}



	.switch-title {
		margin-top: 1em;
		margin-bottom: 1.9em;
		margin-right: 2em;
		margin-left:2em;
		width: 57.433px;
		height: 19.200px;
		text-align: left !important;
	}

	.switch-title-2 {
		display: none;
	}


	.styled-select {
		display: initial;
		/*height: 35px;*/
		overflow: hidden;
		width: 100px;
		height: 57px;
		border: 1px solid #ab8f50;
		height: 49px;
		margin-right: 1em;
		background-color: #f7f7f7;
		margin-bottom: 1em;
	}

	h1{
		line-height: 1em;
	}


	p {
		font-size: 1.1em;
		margin-bottom: .6em;
	}

	#nav-button-shop {

		font-size: 1.6em
		color: red;
	}

	

}


@media(min-width: 25em){

	fieldset {
	    border: none;
	    margin: 0;
	    padding:0;
	}

	legend{
		visibility: hidden;
	}

	#nav-button-Home{
		display: initial;
	}

	#select-label-1, #select-label-2, #select-label-3{
		visibility: hidden;
		width: 0;
		height:0;
		margin: 0;
		padding: 0;
		float:left;
	}

	.form-contact{
		width:18em;
	}

	.img-product-large{
		/*max-height:50%;*/
		padding-top: 1.5em;
		width:80%;
		height: auto;
	}

	#main-splash-img{
		background-image: url('../img/splash(1)x2.jpg');
	}

	#product-list-splash-img{
		background-image: url('../img/splash(2)x2.jpg');
		
	}

	#about-splash-img{
		background-image: url('../img/splash(3)x2.jpg');
	}


	.cart-icon{
		float:left;
		
		padding-right: 0em;  
		/*height: 5em;*/
	}	

	.nav-setion-sign-in{
		padding-left: 9em;
	}


	.nav-cart{
		padding-right: 7em;
	}

	.cart-icon-2{
		display: initial;	
		
		/*height: 5em;*/
	}

	.switch-field label {
		
		padding: .5em .9em;
		
	}

	.switch-title {
		display: none;
		margin-top: .5em;
		margin-bottom: 1em;
		margin-right: 1em;
		margin-left:2em;
		width: 77.593px;
		height: 19.200px;
		text-align: left !important;
	}

	.switch-title-2 {
		display: initial;
		float: left;
		margin-left: 1em;
	}

	.styled-select {

		/*height: 35px;*/
		overflow: hidden;
		width: 100px;
		border: 1px solid #ab8f50;
		height: 31.25px;
		margin-right: 1em;
		background-color: #f7f7f7;
		margin-bottom: 1em;
	}

	h1{
		line-height: 1em;
	}

	p {
		font-size: 1.3em;
		margin-bottom: .6em;
	}

	.nav-section {

		font-size: 1.4em
		color:red;

	}

	




}


@media (min-width: 48em){

	fieldset {
	    border: none;
	    margin: 0;
	    padding:0;
	}

	legend{
		visibility: hidden;
	}

	#nav-button-Home{
		display: none;
	}

	#select-label-1, #select-label-2, #select-label-3{
		visibility: hidden;
		width: 0;
		height:0;
		margin: 0;
		padding: 0;
		float:left;
	}

	.vertical-line{
		border-right: 1px solid #ab8f50;
	}
	.form-contact{
		width:18em;
	}
	#div-quality-coffee{

		padding-left: 2em;
		padding-right: 2em;
	}

	#main-splash-img{
		background-image: url('../img/splash(1)x2.jpg');
	}

	#product-list-splash-img{
		background-image: url('../img/splash(2)x2.jpg');
		
	}

	#about-splash-img{
		background-image: url('../img/splash(3)x2.jpg');
	}


	#img-div-instruction-2, #french-instructions-2{
		float:right;
	}

	.nav-section-sign-in{
		/*padding-left: 1.5em;*/
	}

	.cart-icon{
		float:left;
		display: initial;
		
		 
		/*height: 5em;*/
	}	

	.cart-icon-2{
		display: none;	
		padding-top: 1.4em;
		padding-right: 10em;  
		/*height: 5em;*/
	}

	.nav-cart{
		padding-right: 3em;
	}

	.img-about-quality{
		padding-right: 2em;
		padding-left: 2em;
	}
	#p-fair{
		margin-bottom: 1em;
	}


	.quote{
		padding-right: 2em;
		padding-left: 2em;
	}

	.img-product-large{
		/*max-height:50%;*/
		padding-top: 1.5em;
		width:90%;
		height: auto;
	}
	#img-about-quality{
		padding-right: 2em;
		padding-left: 2em;
	}



	#img-instruction-1,#img-instruction-2,#img-instruction-3{
  			padding-right: 0;
  			padding-left: 0;
  			width: 100%;
  			height: auto;
  		}


  		#img-instruction-3{
  			/*padding-top: 1.5em;*/
  		}

	#french-instructions-1,#french-instructions-2,#french-instructions-3,#img-div-instruction-3,#img-div-instruction-2,#img-div-instruction-1  {  	 
		padding-right: 4em;    	 
		padding-left: 4em;
		text-align: left;


	}

	.switch-field label {
		
		padding: .5em .9em;
		margin-bottom: 0em;
		margin-right: 0.3em;
	}

	.switch-title {
		display: initial;
		margin-top: .5em;
		margin-bottom: 1em;
		margin-right: 1em;
		margin-left:2em;
		width: 77.593px;
		height: 19.200px;
		text-align: left !important;
	}

	.switch-title-2 {
		display: none;
	}		

	.styled-select {

		/*height: 35px;*/
		overflow: hidden;
		width: 100px;
		border: 1px solid #ab8f50;
		height: 31.25px;
		margin-right: .3em;
		background-color: #f7f7f7;
		margin-bottom: 1em;
	}

	h1{
		line-height: 0em;
	}

	p {
		font-size: 1em;
		margin-bottom: .2em;
	}

	a {

		font-size: 1em

	}


}




@media (min-width: 73em){
	fieldset {
	    border: none;
	    margin: 0;
	    padding:0;
	}

	legend{
		visibility: hidden;
	}

	#nav-button-Home{
		display: none;
	}

	#select-label-1, #select-label-2, #select-label-3{
		visibility: hidden;
		width: 0;
		height:0;
		margin: 0;
		padding: 0;
		float:left;
	}

	.vertical-line{
		padding-left: 10em;
		padding-right: 10em;
		border-right: 1px solid #ab8f50;
	}
	.form-contact{
		width:18em;
	}
	#div-quality-coffee{

		padding-left: 10em;
		padding-right: 10em;
	}

	#main-splash-img{
		background-image: url('../img/splash(1).jpg');
	}

	#product-list-splash-img{
		background-image: url('../img/splash(2).jpg');
		
	}

	#about-splash-img{
		background-image: url('../img/splash(3).jpg');
	}

	.img-product-large{
		/*max-height:50%;*/
		padding-top: 1.5em;
		/*width:57.75%;*/
		height: auto;
	}

	.cart-icon{
		float:left;
		display: initial;	
		/*padding-bottom: 1.4em;*/
		/*padding-right: 5.5em;  */
	}
	.nav-cart{
		/*padding-bottom: 2em;*/
		/*padding-right: 5.5em; */
	}

	.cart-icon-2{
		display: none;	
		padding-top: 1.4em;
		padding-right: 10em;  
		/*height: 5em;*/
	}

	.nav-section-sign-in{
		padding-left: 4em;
	}

	#img-instruction-1,#img-instruction-2,#img-instruction-3{
		padding-right:6em;
		padding-left: 6em;
		width: 100%;
		height: auto;
	}


	#img-instruction-3{
		/*padding-top: 1.5em;*/
	}

	#img-div-instruction-2, #french-instructions-2{
    	float:right;
	}

	.switch-field label {

		padding: .5em .9em;
		margin-right: 1em;
		margin-bottom: 0em;
	}

	.switch-title {
		display: initial;
		margin-top: .5em;
		margin-bottom: 1em;
		margin-right: 1em;
		margin-left:2em;
		width: 77.593px;
		height: 19.200px;
		text-align: left !important;
	}

	.switch-title-2 {
		display: none;
		margin-top: .5em;
		margin-bottom: 1em;
		margin-right: 1em;
		margin-left:2em;
		width: 77.593px;
		height: 19.200px;
		text-align: left !important;
	}

	.styled-select {

		/*height: 35px;*/
		overflow: hidden;
		width: 100px;
		border: 1px solid #ab8f50;
		height: 31.25px;
		margin-right: 1em;
		background-color: #f7f7f7;
		margin-bottom: 1em;
	}

	h1{
		line-height: 0em;
	}

	p {
		font-size: 1em;
		margin-bottom: .5em;
	}

	a {

		font-size: 1em

	}


}


/*############################ end of 73 media query #####################################*/

#lazy-sunday-div{
	padding-left: 2em;
}

#p-lazy-sunday-sub{
padding-top: 1.2em;
}

#h3-product-review{
	margin-top: 0;
	padding-top: 1em;
	text-align: center;
}


.sg-h1{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 3em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-top: 1em;

}

.sg-h2{
	font-family: 'Merriweather', serif;
	font-size: 2em;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1em;
	padding-bottom:.5em;

}

.sg-h3{
	font-family: 'Merriweather', serif;
	font-size: 1.4em;
	letter-spacing: 0.025em;
	padding:0;
	line-height: 1.1em;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1em;
	padding-bottom: .5em;
}

.sg-h4{
	font-family: 'Josefin Sans', sans-serif;
	font-size: .9em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
	padding-top:0;
	padding-bottom: .4em;
}

#sg-h1{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 3em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-top: 0em;
	margin-top: .3em;
	margin-bottom: 0;
}

.sg-div{
	padding-left: 2.5em;
	padding-right: 2.5em;
}

#left1{
	text-align: left;
}


#nav-items a, #nav-items a:visited, #nav-toggle{
	display: inline-block;
	text-decoration: none;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	visibility: visible;

}


#nav-toggle {
	background-color: #ab8f50;

	border: 0;
	/*margin: 1em;*/
	display: inline-block;
	color: #FFFFFF;
	padding: 1em 1.25em;
	text-decoration: none;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	visibility: visible;
	width: 100%;
	text-align: left;
}


#nav-toggle:hover, #nav-toggle:focus {
	background-color: gray;
}


/*
Here we hide use .hidden and .shown to enable classes to show and hide our #nav-toggle
*/
#nav-toggle.hidden, #nav-items.hidden {
	visibility: hidden;
	display: none;
}