File: CMF/Web/styles/sass/_header.scss

.header
{
	display: block;
	line-height: 0;
	margin:0 auto 10px auto;
	border-bottom: 1px solid #398DBA;
	background:linear-gradient(to left,rgba(255,255,255,1), rgba(255,255,255,.3), rgba(255,255,255,1));
	white-space: nowrap;
	position: relative;
}

.header .logo
{
	display:inline-block;
	width:100%;
	height:100%;
}

.header .logo a
{
	display: inline-block;
	margin:0;
}

body.ltr .header .logo a.logo-img,body.rtl .header .logo a.logo-text
{
	float:right
}

body.ltr .header .logo a.logo-text,body.rtl .header .logo a.logo-img
{
	float:left;
}

.header .logo img
{
	max-width: 100%;
	margin: auto 0;
}

body.admin-env .header .logo img
{
	max-height: 130px;
}

body.customer-env .header .logo img
{
	max-height: 180px;
}

.top-menu
{
	display: inline-block;
	position: absolute;
	bottom:0;
	left:calc( 50% - 29px);

	margin:0 auto;
	white-space: normal;
	text-align: center;
	font-size: 20px;
}

.top-menu > ul
{
  	list-style: inside none;
}

.top-menu  ul  a:before
{
	display: inline-block;
	content: "";
	height: 100%;
	vertical-align: middle;
}

.top-menu  ul  li
{
  display: inline-block;
  width:130px;
  background-color: #eee;
  height:40px;
  margin-top:2px;
  padding:2px 5px;
  border-radius: 0px;
  //text-align:left;
  transition: background-color .3s;
}

.top-menu  ul  li:hover
{
	background-color: #aaa;
	transition: background-color .3s;
}

body.rtl .top-menu  ul  li
{
  //text-align:right;
}


body.ltr .top-menu > ul > li, body.rtl .top-menu > ul > li
{
	text-align:center;
}

.top-menu li.has-sub
{
	position: relative;
	cursor: pointer;
}

.top-menu li.has-sub ul
{
	display: none;
}

.top-menu li.has-sub:hover ul
{
	display: block;
	position: absolute;
  	top:60px;
  	z-index:100;
}

.top-menu ul li.lang-li
{
	background-color: transparent;
	height:60px;
	width:58px;
}

.top-menu .lang
{
	background-image: url(../images/lang-s.png);
	background-size: cover;
	display: inline-block;
	width:58px;
	height:58px;
	box-shadow:2px 2px 5px #555;
	border-radius: 5px;
}


.top-menu .lang-li a.selected::before
{
	width:30px;	
	background-size:cover;
	background-image: url(../images/tick.png);
}

.top-menu a
{
	display: inline-block;
	//border:1px solid red;
	width:100%;
	height:100%;
	color:black;
}

@media (max-width: 1000px)
{
	body.customer-env .header .logo img
	{
		height: 130px;
	}
}

@media (max-width: 600px)
{
	.header
	{
		text-align: center;
		background:linear-gradient(to left,rgba(255,255,255,.3), rgba(255,255,255,1), rgba(255,255,255,.3));
	}

	.header .logo a
	{
		width:100%;
		float:none;
		margin:0 auto 0 auto;
		max-height: 180px;
	}

	.header .logo img
	{
		max-height: 180px;
	}

	.header .logo .logo-text
	{
		display:none;
	}

	.header .top-menu
	{
		margin-top: 10px;
		display: block;
		position: static;
		font-size: 15px;
	}

	.top-menu  ul  li
	{
	  width:100px;
	}

	.top-menu li.has-sub:hover ul
	{
	  	top:40px;
	}

	.top-menu ul li.lang-li
	{
		height:42px;
	}

	.top-menu .lang
	{
		width:40px;
		height:40px;
	}
}