 @font-face {
  font-family: 'FontAwesome';
  src: url("fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url(".fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*** ESSENTIAL STYLES ***/
	#navigation .nav.menu, #navigation .nav.menu * {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#navigation .nav.menu li {
		position: relative; 
	}
	#navigation .nav.menu > li {
		position: relative;
		-webkit-flex: 1 auto;
		flex: 1 auto;
		float: left;
		margin: 0 2px;
	}
	
 

	 #navigation .sf-menu > li::before {
		content: '';
		display: inline-block;
		position: absolute;
		left: 2%;
		right: 2%;
		top: -0.6px;
		height: 4px;
		width: 0;
		transition: width 0s ease, background .2s ease;
	}
	#navigation .sf-menu > li:hover::before, #navigation .sf-menu > li.sfHover::before,
	#navigation .sf-menu > li.selected::before, #navigation .sf-menu > li.active::before {
		width: 100%; 
		transition: width .5s ease;
	}
	
	#navigation .nav.menu ul {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		z-index: 1000;
		min-width: 210px;
	}
 
 
	#navigation .nav.menu li:hover > ul,
	#navigation .nav.menu li.sfHover > ul {
		display: block;
	}
	
	#navigation .nav.menu a {
		font-family: 'Proxima Nova';
		display: block;
		position: relative;
		text-decoration:none;
	}
	#navigation .nav.menu > li {
		margin-left: 3px;
	}
	#navigation .nav.menu > li > a {
		text-align: center;
		color: #fff;
		font-size: 18px;
		text-transform: uppercase;
		padding: 10px 15px;
	}
	#navigation .nav.menu ul ul {
		top: 0;
		left: 100%;
	} 
	/*** DEMO SKIN ***/

 
	 
	#navigation .nav.menu > li:hover, #navigation .nav.menu > li.selected {
		color: #fff ;
	}
	 
	 
	#navigation .nav.menu > li > a::before {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 4px;
		width: 0;
		transition: width 0s ease, background .2s ease;
		margin: 0 auto;
		z-index: -1;
	}
	#navigation .nav.menu > li > a:hover::before, #navigation .nav.menu > li.sfHover > a::before,
	#navigation .nav.menu > li.selected > a::before, #navigation .nav.menu > li.active > a::before {
		width: 100%;
		background: rgb(112, 213, 230);
		transition: width .5s ease;
	}
	 
	#navigation .nav.menu > li > a:hover::after, #navigation .nav.menu > li.sfHover > a::after,
	#navigation .nav.menu > li.selected > a::after, #navigation .nav.menu > li.active > a::after {
	  
		background: transparent;
		transition: all 0s ease;
	}
	#navigation .nav.menu li a:hover, #navigation .nav.menu li.sfHover > a, #navigation .nav.menu li.selected > a, #navigation .nav.menu li.active > a, #navigation .nav.menu li > a:hover {
		 
color: rgb(112, 213, 230);
		 
transition: width .5s ease;
	}  
			
	
	/* styling for right-facing arrows */
	.sf-arrows .sf-with-ul:after {
 
		content: "\f078";
		position: absolute;
		top: 72%;
		right: 45%;
		font-family: "FontAwesome";
		font-size: 11px;/*--------------------------------------------------------------------------------------------*/
	}
	.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {
		content: "\f078";
		font-family: "FontAwesome";
	}
	/* styling for right-facing arrows */
	.sf-arrows ul .sf-with-ul:after {
		content: "\f078";
		font-family: "FontAwesome";
	}
	.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after {
		content: "\f078";
		font-family: "FontAwesome";
	}       
	
	#navigation .nav.menu ul {
		transition: width .5s ease;
		background: rgba(210, 36, 45, 0.72);
		padding: 5px 10px;
	}
	#navigation .nav.menu ul li {
		float: initial;
		display: block;
		clear: both;
		border-bottom: 1px solid rgba(255, 255, 255, 0.24);
	}
	#navigation .nav.menu ul li:last-child {
		border-bottom: 0;
	}
	#navigation .nav.menu ul a {
		padding: 10px;
		display: block;
		color: #fff;
		font-size: 13px;
		text-transform: uppercase;
	}
	#navigation .nav.menu ul a:hover {		
		border-bottom: none;
	}
	#navigation .nav.menu ul a::after {
		content: none;
	}
	#navigation .nav.menu ul li a:hover, #navigation .nav.menu ul li.sfHover > a,
	#navigation .nav.menu ul li.active > a, #navigation .nav.menu ul li.selected > a {
		background: rgba(0,0,0,.15);
		transition: width .5s ease;
		color: #fff;
	}

	nav#MobileNavigation {
		display: none;
	} 
	nav.mobile-nav {
		position: relative;
		float: right;
		display: none;
		background: rgb(112, 213, 230);
		text-align: center;
		width: 100%;
	}
	 nav.mobile-nav a {
		color:#fff;
			text-decoration: none;
		font-size: 18px;
		padding: 5px;
		display: block;
	}   
	.fa {
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
		content: "\f0c9";
	} 


	/*********************/
