/*---------- MENY -------------*/
.menu-main-container {display: flex; width: 100%; }
.menu {display: flex; flex-wrap: wrap; padding: 0;}
.menu li, .far-right {align-items: center; box-sizing: border-box; display: flex; list-style-type: none; padding: 0 10px;}
.menu li a {white-space: nowrap; width: 100%;}



/*---------- MENY - pil vid submeny -------------*/
.menu-item-has-children {flex-direction: row; position: relative;}
.menu-item-has-children > a:after {content: '▸'; padding-left: 4px; display: inline-block; width: 8px;}
.menu-item-has-children:hover > a:after {content: '▾'; }


/*---------- SUBMENY -------------*/
.menu-item-has-children .sub-menu {align-items: flex-start; display: flex; flex-direction: column; overflow:hidden; padding: 0; position: absolute; visibility: hidden;}

.menu-item-has-children .sub-menu li {width: 100%;}




/*---------- MENY - Submenu Utfallande åt höger eller vänster -------------*/
.RIGHT .sub-menu {right: 0;}
.LEFT .sub-menu {left: 0;}

/*---------- SUBMENY - snabb återställning av animation -------------*/
.menu-item-has-children:not(:hover) > .sub-menu, .menu-item-has-children .menu-item-has-children:not(:hover) > .sub-menu {transition: all 200ms; }

/*---------- RIGHT-ikon -----------*/
.far-right {z-index: 10; }


/*---------- MOBIL MENU hamburger-streck -----------*/
.checkbox, .hamburger-lines {position: absolute; top: 50%; transform: translateY(-50%);}
.checkbox {display: block; height: 36px; width: 36px; right: 6px; z-index: 5; opacity: 0; cursor: pointer;}

.hamburger-lines {display: none; height: 26px; width: 32px; right: 10px; z-index: 2; flex-direction: column; justify-content: space-between;}

.hamburger-lines .line {display: block; height: 4px; width: 100%; border-radius: 10px;}
.hamburger-lines .line1 {transform-origin: 0% 0%; transition: transform 0.4s ease-in-out;}
.hamburger-lines .line2 {transition: transform 0.2s ease-in-out;}
.hamburger-lines .line3 {transform-origin: 0% 100%; transition: transform 0.4s ease-in-out;}

input[type='checkbox']:checked ~ .menu-main-container {pointer-events: auto; position: absolute; right: 0; opacity: 1; transition: right 0.5s ease-in, opacity 0.5s ease-in;}
input[type='checkbox']:checked ~ .hamburger-lines .line1 {transform: rotate(45deg);}
input[type='checkbox']:checked ~ .hamburger-lines .line2 {transform: scaleY(0);}
input[type='checkbox']:checked ~ .hamburger-lines .line3 {transform: rotate(-45deg);}

.menyn {height: 110px!important; }
.menu-main-container > ul > li > .sub-menu .sub-menu { top: 44px; }
.sub-menu li a { line-height: 44px; }
.margmenu-plus, .blogger-cover { margin: 130px auto 4px !important;}
.sorting-buttons { top: 110px; }
.menu > li > a { line-height: 110px; }
.menu > li > .sub-menu { top: 110px; }
.logga-namn, .far-right, .main-item { height: 110px; }
.menu-main-container {justify-content: center; }
@media screen and (max-width: 1000px) {
header, .menyn, .logga-namn, .styrelse-menu, .styrelse-menu .main-item, .far-right {height: 65px!important;}
.margmenu-plus, .blogger-cover {margin: 74px auto 4px !important;}
.menu-main-container {pointer-events: none;}
.LEFT .sub-menu {left: unset!important;}
.menu-main-container ul li a {line-height: 40px!important;}
.menu-main-container {top: 65px!important;}
.far-right {position: absolute; right: 50px;}
.hamburger-lines {display: flex!important;}
.menu-main-container {background: inherit; left: unset; right: -120px; opacity: 0; top: 110px; width: unset!important;}
.menu {align-items: flex-start; flex-direction: column; margin: 20px;}
.menu li {align-items: flex-start; width: 100%;}
.menu-item-has-children > a:after {position: unset!important; padding-left: 6px; width: 10px;}
.menu-item-has-children {flex-direction: column;}
.menu .sub-menu {right: 100% !important; top: 20px!important;}
.sorting-buttons {top: 66px;}

}



/*---------- SUBMENY ANIMATION fade-in-up -------------*/
.menu-item-has-children .sub-menu {margin-top: 60px; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.5s ease;}
.menu-item-has-children:hover > .sub-menu, .menu-item-has-children .menu-item-has-children:hover > .sub-menu {margin-top: 0; opacity: 1; overflow: visible; visibility: visible; pointer-events: auto;}