@media only screen and (min-width: 768px) {
	nav{ position:relative; margin: 0px 0 0 0;background:#cccccc;z-index:10;}
	.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
	.sf-menu ul li {width:100%}
	.sf-menu li {float:left;position:relative}

	.sf-menu>li>a{display:block;position:relative; font-size: 12px; line-height: 18px; color:#fff;font-weight:bold;text-transform:uppercase;text-align:center;padding: 27px 0px;position: relative;}
	.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{}

	.sf-menu>li{width:167px;border-left:1px solid #ffffff;}
	.sf-menu>li:first-child{border-left:none;width:170px;}
	.sf-menu a{}

	.sf-menu>li>a span{position: relative;display:inline-block;z-index:10;}
	.sf-menu>li>a strong{display:block;background:#88a7b1;position: absolute;left:50%;top:50%;width:0;height:0;}
	.sf-menu>li>a:hover strong,.sf-menu>li.current>a strong,.sf-menu>li.sfHover>a strong{left:0;top:0;width:100%;height:100%;}

	.sf-menu>li>a:after{display:block;height:0;width:12px;position: absolute;left:14px;background: url('../images/active_after.png') no-repeat;content:"";}
	.sf-menu>li.current>a:after{bottom:-6px;height:6px;}

	/*================================>> 2 Level <<========================================*/
	.sf-menu li ul,.sf-menu li.sfHover>ul{left:0px;top:72px;width: 166px;padding:21px 0 25px; z-index:99; background:#88a7b1;}
	.sf-menu li ul li a{display:block;color:#ffffff;font-size:11px;text-transform:uppercase;padding: 5px 13px;}
	.sf-menu li li a:hover, .sf-menu li.sfHover li.sfHover>a{background:#4c7386;}
	.sf-menu li li:hover, .sf-menu li.sfHover li.sfHover{box-shadow: 0 1px #a2c2cf;}

	/*================================>> 3 Level <<========================================*/
	.sf-menu li li ul{left:166px !important;background:#c7e1eb !important;top:-21px !important;}
	.sf-menu li li li{}
	.sf-menu li li li a{}
	.sf-menu li li li a:hover{background:#aecdd9;}

	.sf-menu li a .menu-arrow{display:inline-block; width:5px;margin-left:5px;height:3px;text-indent:-100%; font-size:0; line-height:0;background: url('../images/menu_arrow.png') no-repeat;vertical-align: middle;}
	.sf-menu a.sf-with-ul{padding-right:0px;}
	.sf-menu a:hover .menu-arrow, .sf-menu li.current>a .menu-arrow, .sf-menu .sfHover>a:hover .menu-arrow{background-position:0;}
	/*==================================RESPONSIVE LAYOUTS===============================================*/
	@media only screen and (max-width: 995px) {
		.sf-menu>li, .sf-menu>li:first-child{width:127px;}
		.sf-menu li li a .menu-arrow{background: url('../images/menu_arrow2.png') no-repeat;}
	}

	@media only screen and (max-width: 767px) {
		nav{
			float:none;
			font:12px/15px Arial, Helvetica, sans-serif;
			text-transform:uppercase;
			color:#fff;
			padding:20px 10px;
		}
		nav:before{
			content:'Menu:';
			display:block;
			margin-bottom:5px;
		}
		.sf-menu{display:block;}
		nav select{
			font:12px/15px Arial, Helvetica, sans-serif;
			color:#fff;
			width:100%;
			outline: none;
			border:2px solid #9e9e9e;
		}

	}
}

@media only screen and (max-width: 767px) {
	nav{
		float:right;
		padding-top:86px;
		padding-right:41px;
	}
	.sf-menu > li {
		position: relative;
		float: left;
		margin-right: 20px;
		text-transform: uppercase;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-style: normal;
		line-height: 14px;
		font-weight: lighter;
		font-variant: normal;
		width:100%;
	}
	.sf-menu > li > a {
		color:#797979;
	}
	.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {
		text-decoration:none;
		color:#88a7b1;
	}
	/***submenu***/
	.sf-menu ul {
		position:absolute;
		top:-999em;
		z-index:99;
		width:175px; 
		display:none;
		padding:0 0 20px;
		background:none;
	}
	.sf-menu li li{
		padding:0 15px 0 20px;
		margin-bottom:11px;
		position:relative;
		font:normal 11px/14px Arial, Helvetica, sans-serif;
		text-transform:uppercase;
	}
	.sf-menu li li a{
		color:#797979;
	}
	.sf-menu li li > a:hover,.sf-menu li li.sfHover > a{
		color:#4c7386;
		text-decoration:none;
	}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {
		left:-21px;
		top:43px;
	}
	ul.sf-menu li:hover li ul,
	ul.sf-menu li.sfHover li ul {
		top:-999em;
	}
	/***subsubmenu***/
	.sf-menu ul ul{padding-top:20px; width:130px;}
	.sf-menu ul ul li{text-transform:none;}
	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul {
		left:176px;
		top:-20px;
	}
	ul.sf-menu li li:hover li ul,
	ul.sf-menu li li.sfHover li ul {
		top:-999em;
	}



	/* Design for a width of 320px */
}
@media only screen and (max-width: 479px){nav{padding:20px 0;}}
/* Design for a width of 768px */
@media only screen and (max-width: 995px){
	nav{padding-right:0px;}
	.sf-menu > li > a .arrow{ display:block; width:100%; height:4px; background:url(../images/menu-arrow.gif) center top no-repeat; position:absolute; left:0; top:20px;}
	.sf-menu > li.sfHover > a .arrow,.sf-menu > li > a:hover .arrow, .sf-menu > li.current > a .arrow{ background-position:center -10px;}
}

/* Design for a width of 480px*/
@media only screen and (max-width: 767px) {
	nav{
		float:none;
		padding:40px 0 0;
	}
	#page1 nav{padding:40px 0 28px;}
	.sf-menu > li {float:none; margin-right:0px; margin-bottom:5px;}
	.sf-menu > li > a {display:block; background:#ccc; color:#fff; padding:15px 20px;}
	.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {
		color:#fff;
		background-color:#88a7b1;
	}
	/***submenu***/
	.sf-menu ul {position:static; width:100%; padding:20px 0;}
	.sf-menu > li > a .arrow{display:inline-block; width:7px; overflow:hidden; background:url(../images/menu-arrow2.gif) center top no-repeat; position:static; margin-left:10px; vertical-align:2px;}
	.sf-menu > li.sfHover > a .arrow,.sf-menu > li > a:hover .arrow, .sf-menu > li.current > a .arrow{background-position:center -15px;}
	/***subsubmenu***/
	.sf-menu ul ul{width:100%;}
	.sf-menu li li > a .arrow{display:inline-block; width:7px; height:4px; overflow:hidden; background:url(../images/menu-arrow.gif) center top no-repeat; margin-left:10px; vertical-align:2px;}
	.sf-menu li li.sfHover > a .arrow,.sf-menu li li > a:hover .arrow, .sf-menu li li.current > a .arrow{ background-position:center -10px;}
}