/******* ******** ********/
	/****** Small-screen Navigation Setup 1 *******/
	/******* ******** ********/

		#small-navigation-container-1 {
			background-image: url(../images/speckled-pattern.jpg);
			background-repeat: repeat;
			box-shadow: 0 0 4px 1px rgba(0,0,0,0.33);
			position: relative; /* Box shadow doesn't show without a z-index */
			z-index: 20;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop{
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,0.33);
			z-index:10;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop{
			overflow:hidden; /* So there are no scroll bars when animating the child div into view */
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div{
			overflow:auto;
			z-index:11;
			box-shadow: 0 0 4px 1px rgba(0,0,0,0.33);
			background-image: url(../images/speckled-pattern.jpg);
			background-repeat: repeat;
			width:50%;
			max-width:240px;
			transition:margin-right 150ms; /* If you change this timeframe, go to the JS file that handles the menu and also change the setTimeout interval for when it closes. */
			margin-right:-250px; /* We will animate this to 0 when they open the menu */
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .menu-heading{
			font-size: 2rem;
			font-weight: normal;
			text-align: center;
			padding:0.5rem;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-family: $font-prime;
			color: $color-quad;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links > div > a{
			display:block;
			font-family: $font-second;
			text-transform: uppercase;
			color: $color-second;
			font-size: 0.88rem;
			font-weight:normal;
			padding: 0.5rem;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links > div a:hover{
			background-color: $color-third;
			color:white;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links > div > div a{
			display:block;
			font-size:0.88rem;
			font-weight:normal;
			font-family: $font-second;
			text-transform: uppercase;
			padding: 0.5rem;
			color: $color-second;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links div:not(:last-child) > a{
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links .tap-dropdown{
			display:none;
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links .tap-dropdown > div > a{
			padding-left: 1.85em; /* Indent sub-menus */
		}
		#small-navigation-container-1 > .pullout-menu-backdrop > div > .navigation-links .tap-dropdown > div > div a{
			padding-left: 2.85em; /* Indent deeper sub-menus */
		}