/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

/*  apply a natural box layout model to all elements  */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 300;
    background-color: #f4f4f4;
    overflow-x: hidden;
}
header {
    display: grid;
    grid-template-columns: auto 48px;
    background-color: #f04b26;
}
header h1 {
    font-weight: 600;
    text-align: center;
    font-size: 1.5rem;
    color: white;
    margin: 0;
    padding: 1rem 2vw;
}
header button {
		width: 48px;
		height: 48px;
		margin: 0;
		align-self: start;
		background: none;
		border: none;
		font-size: 1.5rem;
		text-align: right;
		color: #fff;
	}





#pageWrapper {
    position: relative; 
    overflow-x: hidden; 
}
.content {transition: transform 500ms ease;} 

.moveOver>.content{transform: translateX(-220px);}  
    


/* NAVIGATION STUFF GOES HERE  */
nav {
   background-color: #ffda3a;
    width: 220px;
	position: absolute;
    top: 0;
	bottom: 0;
	right: 0;
	transform: translateX(100%);
}

nav ul {
	margin: 0; 
	padding: 0; 
    list-style-type: none;}

nav ul > li a {
	display: block;
    background-color: #fbaa2a;
    width: 100%;
    margin: 0;
    padding:  .8rem 0;
    text-align: center;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    border-top: 1px solid rgba(0,0,0,.2);
    cursor: pointer;
}
nav ul li ul li {
    text-align: left;
    background-color: #ffda3a;
    padding: .8rem 10px;
	border-bottom: dashed 1px rgba(0,0,0,0.1);
    a{cursor: pointer;}
}
nav ul li ul li:last-child{border-bottom: none; }
nav ul li.menu-item-has-children a:before {
		font-size: .75rem;
		content: "\25BC";
		color: rgba(0,0,0,.5);
		float: right;
        margin-right: 10px;
	}
nav ul li ul {
		display: none;
		background: rgba(0,0,0,.1);
		padding: 0;margin: 0;
	}
 nav ul li:hover ul {display: block;}
	

	













main {
    padding: 0 10px;
}
main h1 {
    margin: 0;
    padding: 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}
main h2 {
    margin: 0;
    padding: 1rem 0 .2rem 0;
    font-size: 1.2rem;
    color: #f04b26
}
main ul {
    margin: 0;
    padding: 0 0 0 30px;
}
main ul#recipeIngredients ::marker {color: #f04b26;}
main ul#ingredients {list-style-type: disc;}

main ul#recipeDirections ::marker {color: green;}
main ul#recipeDirections { list-style-type:decimal; margin-left: .2rem;}

main ul li {
    padding: .5rem 0;
    font-size: 1.2rem;
    color: #333;
}

main figure {
    margin: 0; 
    width: 100%; 
    }
main img {
    width: 100%;
    display: block;
    border-radius: 10px;
}






footer {
    background-color: #333;
    color: white;
    padding: 1rem 2vw;
    text-align: center;
}