/* Hamburger Menu - max 840px
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 840px) {
	
	.logo {
		position: absolute;
		right: 23px;
		top: 17px;
		width: 70px;
		height: 70px;
	}
	
	header {
		height: 0;
	}
		
	nav {
		height: 0;
	}
	
	#stickyheader a:hover {
		color: #F33648;
	}
	
	
/* hamburger menu styling from codepen */

	#stickyheader a {
		font-weight: 400;
		font-family: "Oswald", "Arial", sans-serif;
		text-transform: uppercase;	
		text-decoration: none;
		font-size: 1.6rem;
		letter-spacing: .05rem;
		text-decoration: none;
		color: #333;
  		transition: color 0.1s ease;	
	}
	
	#stickyheader a:hover {
		font-weight: 500;
	}

	#menuToggle {
		display: block;
		position: absolute;
		top: 35px;
		left: 35px;
		z-index: 1; 
		-webkit-user-select: none;
		user-select: none;
	}

	#menuToggle input {
  		display: block;
		width: 10rem;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;
  		cursor: pointer;
  		opacity: 0; /* hide this */
  		z-index: 2; /* and place it over the hamburger */
	}

	/* Hamburger Icon */

	#menuToggle span {
  		display: block;
  		width: 33px;
  		height: 4px;
  		margin-bottom: 5px;
  		position: relative;
  
		background: rgb(80,80,80); /* hamburger menu color */
  		border-radius: 3px;
 		z-index: 1;
		transform-origin: 4px 0px;
  
  		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
	}

	#menuToggle span:first-child {
 		 transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2) {
  		transform-origin: 0% 100%;
	}

/* Transform all the slices of hamburger into a crossmark */
	#menuToggle input:checked ~ span {
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
  		background: #333;
	}

/* But let's hide the middle one */
	#menuToggle input:checked ~ span:nth-last-child(3) {
  		opacity: 0;
  		transform: rotate(0deg) scale(0.2, 0.2);
	}

/* Make the last one should go the other direction */
	#menuToggle input:checked ~ span:nth-last-child(2) {
  		opacity: 1;
  		transform: rotate(-45deg) translate(0, -1px);
	}

/* Position Menu */

	#menu {
  		position: absolute;
  		width: 300px;
  		margin: -100px 0 0 -50px;
  		padding: 50px;
  		padding-top: 125px;
  
  		background: #fff;
  		list-style-type: none;
  		-webkit-font-smoothing: antialiased;
  		/* to stop flickering of text in safari */
  
		transform-origin: 0% 0%;
  		transform: translate(-100%, 0);
  
  		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		}

	#menu li {
  		font-size: 3rem;
	}

/* Animate Menu Slide In */

	#menuToggle input:checked ~ ul {
  		transform: scale(1.0, 1.0);
  		opacity: 1;
	}
}



/* Navigation Menu - min 840px
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 840px) {
	
	
	body {
		padding: 0 auto;
	}
	
	#menuToggle input {
		display: none;	
	}
	
	.logo {
   		display: none;
	}	
	
	nav {
		margin: 0 auto;
		width: 840px;	
	}
	
	ul {
		list-style-image: url("../images/smallredheart.svg");	
		height: 10rem;
		margin-top: 0;
	}

	li {
		float:left;
		margin-top: 4.3rem;
		padding-right: .5rem;
	}
	
	li:first-child {
		list-style: none;
		padding-left: 1rem;
	}
	
	li:last-child {
		padding-right: 0;
	}

	#stickyheader a {
		font-weight: 400;
  		font-family: "Oswald", "Arial", sans-serif;
		text-transform: uppercase;
		color: #6a6a6a;
		text-decoration: none;
		font-size: 1.2rem;
		letter-spacing: .05rem;
		padding-right: 2.5rem;
		padding-left: 1rem;
	}

	#stickyheader a:link, a:visited {color: #6a6a6a;}
	#stickyheader a:hover {color: #F33648;}

}