/* CSS Document */

	/* **************************************************
	GENERAL
	*************************************************** */ 
	* {
		outline: none;
	}
	
	.wrap {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
	}
	
	.off-canvas-wrapper {
		background-color: #222;
	}

	/* **************************************************
	NAV - Mobile
	*************************************************** */
	.title-bar {
		background-color: #222;
		height: 60px;
		padding-top: 17px;
	}
	
	
	#mobile-left-menu {
		background-color: #222;
		padding: 10px;
	}

	#mobile-left-menu  li {
		list-style: none;
	}
	
		#mobile-left-menu  a {
		list-style: none;
		color: rgba(255,255,255, 0.6);
		font-weight: bold;
		line-height: 2;
	}
	
		#mobile-left-menu  a:hover {
		color: rgba(255,255,255, 0.8);
	}
	
	
	.js-off-canvas-exit {
		background: rgba(0,0,0, 0.5);
	}
	
	/* **************************************************
	NAV - Desktop
	*************************************************** */
	.nav-desktop {
		background-color: #222;
		height: 80px;
		padding: 0;
	}
	
	.site-logo {
		color: white;
		line-height: 60px;
	}
	
	.nav-desktop .menu-desktop {
		line-height: 80px;
		background-color: transparent;
	}
	
	.nav-desktop a {
		
		
	}
	
	.menu > li > a {
		
		display: inline-block;
		line-height: 80px;
		padding-top: 0;
		padding-bottom: 0;
		color: white;
		
	}
	
	/*   Psuedo-class for hover over menu  - for change styles  */
	
	.menu > li > a:hover {
		 background-color: rgba(255,255,255, 0.1);   
		
	}
	
	
	/* **************************************************
	HERO 
	*************************************************** */
	.hero {
		background-color: #999;
		padding: 40px 0px;
		height: 577px;
		background-image: url("../img/dark_embroidery.png");
	}
	
	.hero h1 {
		color: rgba(232,44,12, 0.8); 
		width: 70%;
	}
	
	.hero p	{
		color: rgba(255,255,255, 0.8); 
		width: 70%;
		padding-left: 5px;
		font-size: 110%;
	}

	
	
	
	/* **************************************************
	MAIN SECTION
	*************************************************** */
	
	.main {
		padding: 50px 0px;
		background-image: url("../img/dark_embroidery.png");	
	}
	/*
	b {
		color: white;
		font-size: 130%;
	}
	
	i {
		color: red;
		font-size: 2em;
	}
	*/
	.main p {
		padding-left: 3em;
		padding-bottom: 10px;
	}
	/*
	#robert {
		margin: 0 0 0 1em;
	}
	 #smith {
		 margin-left: 6em;
	 }
	
	      not sure how to use this yet
	form div.required label.control-label:after {
		content:" * ";
		color: red;
	}
	*/
	
	/* **************************************************
	FOOTER
	*************************************************** */
	
	footer {
		
		padding: 88px 0px;
		background-color: #222;
	}
	
	footer h4 {
		color: rgba(255,255,255, 0.8);
		font-size: 1.3em;
	}
	
	footer hr {
		border-color: rgba(255,255,255, 0.1);
		margin: 10px 0;
	}
	
	footer a  {
		display: block;
		color: rgba(255,255,255, 0.6);
		font-size: 0.8em;
	}
	
	footer a span {
		font-weight: bold;
		color: rgba(255,255,255, 0.3);
	}
	
	
	footer a:hover  {
		color: rgba(255,255,255, 0.8);
	}
	
	/* **************************************************
	Media Querie  - see Mozilla link
	*************************************************** */
	 
	@media (max-width: 855px) {
		.nav-desktop {
			display: none;  
			}
		
	}
	
	@media (max-width: 1165px) {
		.hero h1,
		.hero p {
			width: 100%;
		}
		
	}