/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	 
	
	/* end reset*/













 
/* default css for mobile*/ 
body {
	font-family: 'Roboto', sans-serif;
	font-size: 0.7em;
	background-image: url("img/wood.png");
	background-repeat: repeat;
	background-size: contain;
	line-height: 1.1;
}

#grid-container {
	display: grid;
	grid-template-columns: 1fr ; 
	grid-template-rows: 2fr 1fr;
	grid-gap: 3px;
}

#wrapper{
	padding:8% 10% 10% 10%;
	background-image: url("img/paper.png");
	background-size:100%;
	background-repeat: no-repeat;
	

	
}

header {
	font-family: 'Handlee', cursive;
	margin-bottom: 2%;
}

h1{
	font-size: 1.8em;
	text-align: center;
	 font-weight: 700;
}


#spoons, #wisk {
}

#spoons img {
	 width: 60%;	
 }

#wisk img {
	margin-top: 10%;
	width: 100%;
 }

#data{
	font-family: 'Roboto', 'Roboto',sans-serif;
	margin-bottom: 2%;
	text-align:center;
	clear:both;
	font-size: 1.0em;
	margin-bottom: 4%;

	
}

#data li{
	display: block;
	text-align: left;
	margin: 1% 1%;
	font-weight: 500;

}

#ingredients{
	font-family: 'Roboto-Medium', 'Roboto',sans-serif;
	margin-bottom: 2%;
	text-align:center;
	clear:both;
	font-size: 1.0em;
}

#ingredients li{
	display: block;
	text-align: left;
	margin: 1% 1%;
	 font-weight: bold;

}

#steps{
	font-family: 'Roboto', 'Roboto',sans-serif;
	margin-bottom: 2%;
	text-align:center;
	clear:both;
	font-size: 1.0em;
}
#steps li{
	display: block;
	text-align: left;
	margin: 1% 1%;
	min-width: 300px;
	font-weight: 500;
	margin-bottom:5%;
}

footer{
	text-align: center;
	 font-style: italic;
	 font-family: 'Handlee', cursive;
}

a:link, a:visited {
	color: #262425;
	text-decoration: none;
}

a:hover, a:active {
	color: #595657;
	text-decoration: none;
}


}
/*end mobile*/


/*small tablet*/
@media only screen and (min-width: 400px) and (max-width: 600px) {

	body {
		font-family: 'Roboto', sans-serif;
		font-size: 0.8em;
		background-image: url("img/wood.png");
		background-repeat: repeat;
		background-size: contain;
		line-height: 1.2;
	}

	#grid-container {
		display: grid;
		grid-template-columns: 1fr ;
		grid-gap: 3px;
	}

	#wrapper{
		padding:8% 10% 26% 18%;
		background-image: url("img/paper.png");
		background-size:100%;
		background-size: cover;
		background-repeat: no-repeat;
		

		
	}

	header {
		font-family: 'Handlee', cursive;
		margin-bottom: 2%;
	}

	h1{
		font-size: 1.8em;
		text-align: center;
		font-weight: 700;
	}


	#spoons, #wisk {
	}

	#spoons img {
	 	width: 40%;	
	 }

	#wisk img {
		margin-top: 10%;
	 	width:  80%;
	 }

	#data{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		margin-bottom: 4%;
	}

	#data li{
		display: block;
		text-align: left;
		margin:1% 1%;
		font-weight: 500;
	}

	#ingredients{
		font-family: 'Roboto-Medium', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}

	#ingredients li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		 font-weight: bold;


	}

	#steps{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}
	#steps li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		min-width: 300px;
		font-weight: 500;
		margin-bottom:5%;
	}

	footer{
		text-align: center;
		 font-style: italic;
		 font-family: 'Handlee', cursive;
	}

	 a:link, a:visited {
	color: #595657;
	text-decoration: none;
	}

	a:hover, a:active {
		color:#8C888A;
		text-decoration: none;
	}


}



/*tablet styles*/
 @media only screen and (min-width: 601px) and (max-width:800px) {

	body {
		font-family: 'Roboto', sans-serif;
		font-size: 1.0em;
		background-image: url("img/wood.png");
		background-repeat: repeat;
		background-size: contain;
		line-height: 1.1;
	}

	#grid-container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1.5fr 1fr;
		grid-gap: 3px;
	}

	#wrapper{
		padding:8% 8% 6% 18%;
		background-image: url("img/paper.png");
		background-size:100%;
		background-repeat: no-repeat;
	
	}

	header {
		font-family: 'Handlee', cursive;
		margin-bottom: 2%;
	}

	h1{
		
		font-size: 1.8em;
		text-align: center;
		font-weight: 700;
	}

	

	#spoons, #wisk {
		
	}

	#spoons img {
		width: 60%;	
	}

	#wisk img {
		margin-top: 10%;
	 	width: 100%;
	}

	#data{
		
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		margin-bottom: 4%;
	}

	#data li{
		
		display: block;
		text-align: left;
		margin: 1% 1%;
		font-weight: 500;
	}

	#ingredients{
		
		
		font-family: 'Roboto-Medium', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}

	#ingredients li{
		
		display: block;
		text-align: left;
		margin: 1% 1%;
		font-weight: 600;

	}

	#steps{
		
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}
	#steps li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		min-width: 300px;
		margin-bottom:5%;

	}

	footer{
		text-align: center;
		 font-style: italic;
		 font-family: 'Handlee', cursive;
	}

	 a:link, a:visited {
	color: #595657;
	text-decoration: none;
	}

	a:hover, a:active {
		color:#8C888A;
		text-decoration: none;
	}

} /*this closes tablet media query*/



/*small desktop*/

@media only screen and (min-width: 801px) and (max-width: 1000px) {

	body {
		font-family: 'Roboto', sans-serif;
		font-size: 0.8em;
		background-image: url("img/wood.png");
		background-repeat: repeat;
		background-size: contain;
		line-height: 1.0;
	}

	#grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3px;
	}

	#wrapper{
		padding:8% 10% 10% 10%;
		background-image: url("img/paper.png");
		background-size:100%;
		background-repeat: no-repeat;
	}

	header {
		font-family: 'Handlee', cursive;
		margin-bottom: 2%;
	}

	h1{
		font-size: 1.8em;
		text-align: center;
		font-weight: 700;
	}


	#spoons, #wisk {
	}

	#spoons img {
	 	width: 60%;	
	 }

	#wisk img {
		margin-top: 10%;
	 	width: 100%;
	 }

	#data {
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		font-weight: 500;
		margin-bottom: 4%;
	}

	#data li{
		display: block;
		text-align: left;
		margin: 1% 1%;
	}

	#ingredients{
		font-family: 'Roboto-Medium', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}

	#ingredients li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		 font-weight: 600;

	}

	#steps{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}
	#steps li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		min-width: 300px;
		margin-bottom:5%;

	}

	footer{
		text-align: center;
		 font-style: italic;
		 font-family: 'Handlee', cursive;
	}

 	 a:link, a:visited {
	color: #595657;
	text-decoration: none;
	}

	a:hover, a:active {
		color:#8C888A;
		text-decoration: none;
	}



} /*this closes small desktop*/









/*large desktop styles*/
 @media only screen and (min-width: 1001px) and (max-width: 2560px) {

	 body {
		font-family: 'Roboto', sans-serif;
		font-size: 1.0em;
		background-image: url("img/wood.png");
		background-repeat: repeat;
		background-size: contain;
		line-height: 1.0;
	}

	#grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3px;
	}

	#wrapper{
		padding:8% 10% 10% 10%;
		background-image: url("img/paper.png");
		background-size:100%;
		background-repeat: no-repeat;
	}

	header {
		font-family: 'Handlee', cursive;
		margin-bottom: 2%;
	}

	h1{
		font-size: 1.8em;
		text-align: center;
		font-weight: 700;
	}


	#spoons, #wisk {
	}

	#spoons img {
	 	width: 60%;	
	 }

	#wisk img {
		margin-top: 10%;
	 	width: 100%;
	 }

	#data{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		font-weight: 500;
		margin-bottom: 4%;
	}

	#data li{
		display: block;
		text-align: left;
		margin: 1% 1%;
	}

	#ingredients{
		font-family: 'Roboto-Medium', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}

	#ingredients li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		font-weight: 600;

	}

	#steps{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}
	#steps li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		min-width: 300px;
		margin-bottom:5%;

	}

	footer{
		text-align: center;
		 font-style: italic;
		 font-family: 'Handlee', cursive;
	}

	  a:link, a:visited {
	color: #595657;
	text-decoration: none;
	}

	a:hover, a:active {
		color:#8C888A;
		text-decoration: none;
	}

} /*closes large desktop */


/*XL desktop styles*/
 @media only screen and (min-width: 1601px) and (max-width: 2500px) {

	 body {
		font-family: 'Roboto', sans-serif;
		font-size: 1.3em;
		background-image: url("img/wood.png");
		background-repeat: repeat;
		background-size: contain;
		line-height: 1.0;
	}

	#grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3px;
	}

	#wrapper{
		padding:8% 10% 10% 10%;
		background-image: url("img/paper.png");
		background-size:100%;
		background-repeat: no-repeat;
	}

	header {
		font-family: 'Handlee', cursive;
		margin-bottom: 2%;
	}

	h1{
		font-size: 1.8em;
		text-align: center;
		font-weight: 700;
	}


	#spoons, #wisk {
	}

	#spoons img {
	 	width: 60%;	
	 }

	#wisk img {
		margin-top: 10%;
	 	width: 100%;
	 }

	#data{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		font-weight: 500;
		margin-bottom: 4%;
	}

	#data li{
		display: block;
		text-align: left;
		margin: 1% 1%;
	}

	#ingredients{
		font-family: 'Roboto-Medium', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
		font-weight: bold;
	}

	#ingredients li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		font-weight: bold;

	}

	#steps{
		font-family: 'Roboto', 'Roboto',sans-serif;
		margin-bottom: 2%;
		text-align:center;
		clear:both;
		font-size: 1.0em;
	}
	#steps li{
		display: block;
		text-align: left;
		margin: 1% 1%;
		min-width: 300px;
		margin-bottom:5%;

	}

	footer{
		text-align: center;
		 font-style: italic;
		 font-family: 'Handlee', cursive;
	}

	  a:link, a:visited {
	color: #595657;
	text-decoration: none;
	}

	a:hover, a:active {
		color:#8C888A;
		text-decoration: none;
	}

} /*closes XL desktop */

/* colors pallet:
cool greys black and white
#595657 dark grey
#8C888A lighter grey