#phone {
	vertical-align:middle; 
	font-size:20px;
	text-align:right; 
	padding-right:10px; 
	color:#000000;
}

#logodiv-mobile {
		margin-top:-40px;
		display: none;
	}
	
#logodiv-desktop {
		display: block;
		position:fixed;
		background-color:#663366;
		margin-top:46px;
		width:100%;
		z-index:999999;
	}
	
#desktop-home {
		margin-top:98px;
	}


#hidden-desktop {
		display: none;
	}
	
#hidden-mobile {
		display: block;
	}
	

* {
	margin: 0;
	padding: 0;
}



/* Also relates to the pseudo class & sibling bug */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

.outer {
	overflow: hidden;
	background-color:#663366;
}

.slide {
	background: #ffffff;
	padding: 0px;
}

.content-mobile-nav {
	margin-top: 0px;
}


h1,h2,h3,p {
	margin-bottom: 18px;
}

h1 {
	line-height: 26px;
}

/* @group .nav */
.nav {
	width: 100%;
	margin: 0;
	padding: 5px 0;
	overflow: hidden;
}

.nav li {
	list-style: none;
	margin: 0;
	padding:  0px 10px 0px 15px;
	float: left;
}

.nav li a {
	display: block;
	margin: 0;
	padding: 5px 5px;
	text-decoration: none;
	color: #ffffff;
}

.nav li a:hover {
	background: #663366;
	margin: 0;
	color: #ff9966;
}

/* @end nav */

/* This is the clickable label */
.slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 15px 15px 0 0;
}

/* Kill the nasty outlines everywhere */
.slide-toggle,
.slide-toggle:active,
.slide-toggle:focus {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* The :after pseudo element has an icon that covers the checkbox */
.slide-toggle:after {
	content: "!";
	color: #ffffff;
	background: #77256d;
	display: block;
	height: 30px;
	width: 38px;
	border-radius: 3px;
	font: 24px/30px 'responav';
	text-align: center;
	margin-left: -19px;
}

/* This is the checkbox */
.slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* When it's checked replace the menu icon with a close icon */
.slide-checkbox:checked ~ .slide-toggle:after {
	content: '"';
}

/*
 * I set the width pretty high because I wanted to test on an Ipad in portrait mode,
 * depending on your website you can probably make this narrower
 */
@media handheld, only screen and (max-width: 800px) {
	
	#hidden-mobile {
		display: none;
	}
	
	#hidden-desktop {
		display: block;
	}
	
	#phone {
	display: none;
	}

	#logodiv-mobile {
		margin-top:-40px;
		display: block;
	}
	
	#logodiv-desktop {
		display: none;
	}
	
	#desktop-home {
		margin-top:0px;
	}
	
	.content-mobile-nav {
		margin-top:16px;
	}

	/* Only show the menu link on smaller screens */
	.slide-toggle {
		display: block;
	}

	/*
	 * The transition value determines the speed
	 * at which the content will slide over
	 */
	.slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	/*
	 * Enable hardware acceleration and stop flickering
	 * More details: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
	 * Add more browser prefixes as required for your environment
	 */
	.slide,
	.nav {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}

	/*
	 * When the checkbox is checked slide the content
	 * over and the checkbox with it
	 */
	.slide-checkbox:checked ~ .slide {
		-webkit-transform: translateX(70%) scale(1);
		-moz-transform: translateX(70%) scale(1);
		-ms-transform: translateX(70%) scale(1);
		-o-transform: translateX(70%) scale(1);
		transform: translateX(70%) scale(1);

	}

	.nav {
		height: 100%;
		background: #663366;
		border-radius: 0;
		margin: 0;
		padding-top: 20px;

		/*
		 * The width determines how much of the page you want to
		 * remain visible once the menu slides over
		 */
		width: 70%;

		/*
		 * Must be absolutely positioned otherwise it won't sit
		 * side by side with the content but instead above it
		 * */
		position: absolute;
		left: 0;
		top: 0;

		/* Keeps the menu hidden off-canvas to the left */
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.nav li {
		float: none;
		padding:  0px 0px 0px 0px;
		border-bottom:none;
		margin: 0;
	}

	.nav li a {
		padding: 8px 12px;
		border-bottom:none;
		margin: 0;
	}
	
	.nav li a:hover {
	color:#ff9966;
	padding: 8px 12px;
	border-bottom:none;
	margin: 0;
	
	}

	.nav li:first-child a {
		border-top: none;
	}

	.nav li:last-child a {
		border-bottom: none;
	}

}

@font-face {
	font-family: 'responav';
	src:url('../fonts/responav.eot');
	src:url('../fonts/responav.eot?#iefix') format('embedded-opentype'),
		url('../fonts/responav.woff') format('woff'),
		url('../fonts/responav.ttf') format('truetype'),
		url('../fonts/responav.svg#responav') format('svg');
	font-weight: normal;
	font-style: normal;
}