/*
	THEME:	InBusiness AS
	AUTHOR:	Yngve Wikøren Nilsen @InBusiness
	WHAT:	General styles for navigations
	NOTE: REBUILD TO CSS GRID ->
		-menu id's are prinav and secnav - primary-nav are to be removed when all usecases are replaced
		-nav items get same class as id and also: inbusiness-menu inbusiness-menu-main last explains usecase
*/

/*
	UU SKIP LINKS - in uu.css
*/

/*
	MENU BUTTON
	Mobile Menu button
	If this is visible then menu switches to mobile-menu
*/
button.menu_btn{
	background:#c12f2e;
	box-shadow:none;
	color:white;	
	position:absolute;
	z-index:1000;
	top:0;bottom:0;
	right:40px!important;
	left:auto!important;
	width:60px;
	height:60px;
	margin:auto;
	padding:0;
	border:none;
	border-radius:100%;}
button.menu_btn span {
	position:absolute;
	top:0;left:0;bottom:0;right:0;
	margin:auto;
	width:55%;
	height:3px;
	border-radius:6px;
	display:inline-block;
	background:white;	
	-webkit-transition:transform .45s ease-in-out;
	-moz-transition:transform .45s ease-in-out;
	transition:transform .45s ease-in-out;}
button.menu_btn span:nth-child(2){
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);}
button.menu_btn span:nth-child(3){
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);}
.open button.menu_btn span:nth-child(2){
	-webkit-transform: translateY(0px)!important;
	-moz-transform: translateY(0px)!important;
	transform: translateY(0px)!important;}
.open button.menu_btn span:nth-child(3){
	-webkit-transform: translateY(0px)!important;
	-moz-transform: translateY(0px)!important;
	transform: translateY(0px)!important;}




/*
* NEW MENU LOOKS
*/
.inbusiness-menu-main ul a {
	font-size:1.2rem;
	padding:1rem;
}
.inbusiness-menu-main ul ul a {
	font-size:1rem;
	padding:.5rem 1rem;
}
.desktopview .inbusiness-menu-main ul.sub-menu {
	background:rgba(255,255,255,.8);
}








/*
	MAIN NAVIGATION
*/

/* Aligning the menu container from wp customizer setting:left, right or center */
.desktopview #primary-nav.left{}
.desktopview #primary-nav.center > div {text-align:center;}
.desktopview #primary-nav.center > div > ul{position:static!important;display:inline-table!important;float:none!important;}
.desktopview #primary-nav.right > div > ul {position:static;float:right;}

/* 1st Level */
.desktopview #primary-nav {
	margin:0;
	line-height:1.2em;}
.desktopview #primary-nav ul {
	list-style:none;}
.desktopview #primary-nav ul li{
	position:relative;
	margin-left:0;}
.desktopview #primary-nav ul li a{
	display:block;
	padding:initial .5em;}
.desktopview #primary-nav.right ul li a{
	text-align:right;}

/* 2nd Level */
.desktopview #primary-nav ul ul {
	/*display:none; -NOT WITH ANIMATION */
	position:absolute;
	top:100%;
	left:0;
	padding:0}
.desktopview #primary-nav.right ul ul {left:auto;right:0;}
.desktopview #primary-nav ul ul li {
	float:none;
	width:200px}

/* 3rd Level */
.desktopview #primary-nav ul ul ul {
	top:0;
	left:100%}
.desktopview #primary-nav.right ul ul ul {left:auto;right:100%;}
/**/
.desktopview #primary-nav ul li:hover > ul {
	/*display:block; -NOT WITH ANIMATION */}




/*
* WHEN 'HEADER-LEFT'
*/
.header-left #primary-nav ul.menu{width:90%;margin:auto;}
.header-left #primary-nav ul ul{
	position:inherit;
	top:auto;
	left:auto;
	margin-bottom:1em;
	display:block;
}
.header-left #primary-nav ul ul ul{
	margin-bottom:0;
}
.header-left #primary-nav ul li{
	display:block;
	width:auto;
}
.header-left #primary-nav ul {text-align:left;font-size:1.2em;line-height:1.2em;}
.header-left #primary-nav ul ul{padding-left:1em;}
.header-left #primary-nav.center ul a{text-align:center;}
.header-left #primary-nav.right ul a{text-align:right;}
.header-left #primary-nav.right ul ul{padding-left:0;padding-right:1em;right:auto;}
.header-left #primary-nav.right ul ul ul {left:auto;right:auto;}
.header-left #primary-nav.right > div > ul {position:sticky;float:none;}


.header-left #primary-nav ul.menu > li > a{
	text-transform:uppercase;
}
.header-left #primary-nav ul ul{
	font-size:.875em;
}
.header-left #primary-nav ul ul ul{
	font-size:.875em;
}

/*
* MOBILE VIEW
*/
.mobileview #primary-nav > div {
	will-change:auto;
	visibility:hidden;
	opacity:0;
	transition:visibility 0s linear 0.5s,opacity 0.5s linear;}

/*
* MOBILE VIEW 'open'
*/
.open #primary-nav > div {
	visibility:visible;
	opacity:1;
	transition-delay:0s;}
/*
* MOBILEVIEW (has parent class .mobileview)
*/
.mobileview #primary-nav {}
.mobileview #primary-nav > div {
	position:absolute;
	top:100%;
	right:0;
	transform:translateX(100%);
	background:white;
	max-width:320px;
	width:320px;
	transition:transform .35s ease-in-out;
}
.mobileview #primary-nav > button.open ~ div {
	transform:translateX(0);
	transition:all .35s ease-in-out;
}

/* All levels */
.mobileview #primary-nav > div ul{ display:block;}
.mobileview #primary-nav > div ul li{display:block;margin-left:0;}
.mobileview #primary-nav > div ul li a {
	display:block;
	padding:.5em 1rem;
	border-bottom:1px solid #f4f4f4;
}

/* 1st level */
.mobileview #primary-nav > div > ul{
	display:block;
}
.mobileview #primary-nav > div > ul > li{
	float:none;
	display:block;
}
.mobileview #primary-nav > div > ul > li > a {}
/* 2nd level */
.mobileview #primary-nav > div > ul > li > ul {padding-bottom:1em;}
.mobileview #primary-nav > div > ul > li > ul > li{}
.mobileview #primary-nav > div > ul > li > ul > li > a{font-size:.875em;padding:.25em 1rem;}
/* 3rd level */
.mobileview #primary-nav > div > ul > li > ul > li > ul {padding-bottom:1em;}
.mobileview #primary-nav > div > ul > li > ul > li > ul > li{}
.mobileview #primary-nav > div > ul > li > ul > li > ul > li > a{font-size:.875em;padding:.12em 1rem;font-style:italic;}
.mobileview #primary-nav > div > ul > li > ul > li > ul > li > a:before{
	content:'-';
	margin-right:.5em;
}
/*
	UU MENU
*/

/*
	PAGE NAVIGATION
*/
nav#pagenavigation {
	margin:70px 40px;
	line-height:1.2em;}
nav#pagenavigation h1 {
	font-size:1.4em;}
nav#pagenavigation ul {
	list-style:none;}
nav#pagenavigation ul li{
	margin-left:0;}
nav#pagenavigation ul li a{
	display:block;
	padding:5px 0;
	font-size:1.3em;
	line-height:1.618em;
	color:#c12f2e;
	text-transform:uppercase;}
nav#pagenavigation ul li.current-menu-item a{color:#000;}

/*
	MEDIA QUERIES
*/
@media all and (min-width: 800px){
}
@media all and (max-width: 380px){
	.open button.menu_btn {
		left: calc(100% - 80px);}
}