@charset "UTF-8";

html, body{
 height: 100%; margin: 0
}

@media ( max-width: 1199px ){
	
 html.sidebar-open body{
  overflow: hidden;
 }
 
}

@supports ( display: grid ){

 .ui-frame-root-header{
  grid-area: root-header
 }
 .ui-frame-app-window{
  grid-area: app-window
 }
 .ui-frame-footer{
  grid-area: footer
 }
 
 .ui-frame-header{
  grid-area: header
 }
 .ui-frame-header-side-first{
  grid-area: header-side-first
 }
 .ui-frame-header-side-last{
  grid-area: header-side-last
 }
 .ui-frame-mainmenu{
  grid-area: mainmenu
 }

 /*
  Header logo left, all menus right middle
  */
 
 .ui-frame-container{
  min-height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 80px 1fr auto;
  grid-template-areas: 
    "root-header"
    "app-window"
    "footer";
 }
 
 .ui-frame-container .ui-frame-root-header .ui-frame-fixed-header{
  position: relative;
  display: grid;
  height: 80px;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header-side-first header-side-last";
 }
 
 .ui-frame-container .ui-frame-header{
  padding-left: 20px
 }
 
 .ui-frame-container .ui-frame-header-side-last{
  padding-right: 20px
 }
 
 @media ( min-width: 576px ){

  .ui-frame-container .ui-frame-header-side-last{
   padding-left: 20px
  }
  
 }

 @media ( min-width: 1200px ){

  .ui-frame-container{
   grid-template-columns: 100%;
   grid-template-areas: 
     "root-header"
     "app-window"
	 "footer";
  }
  
  body.montage-page-type .ui-frame-container{
   grid-template-rows: 0 1fr auto;
  }	
  
  body.default-page-type .ui-frame-container{
   grid-template-rows: 80px 1fr auto;	
  }	
  
  .ui-frame-container .ui-frame-root-header .ui-frame-fixed-header{
   position: fixed;
   width: 100%;
   height: 80px;
   grid-template-columns: 270px 1fr auto;
   grid-template-rows: auto;
   grid-template-areas: 
     "header header-side-first header-side-last";
  }
  .ui-frame-container .ui-frame-root-header .ui-frame-fixed-header .ui-group-header.ui-frame-header-side-first .wrapper,
  .ui-frame-container .ui-frame-root-header .ui-frame-fixed-header .ui-group-header.ui-frame-header-side-last .wrapper{
	justify-content: flex-end
  }
  
  .ui-frame-container .ui-frame-header{
   padding-left: 45px
  }
  
  .ui-frame-container .ui-frame-header-side-last{
   padding-left: 20px;
   padding-right: 30px
  }

 }


}

.ui-frame-header, .ui-frame-header-side-first, .ui-frame-header-side-last, .ui-frame-header-line, .ui-frame-app-window, .ui-frame-footer{
 z-index: 1
}
.ui-frame-fixed-header{
 z-index: 2
}
.ui-frame-mainmenu{
 z-index: 3
}


/*
 mainmenu toogle
 */

 .ui-group-header.ui-frame-header-side-first .wrapper a.mainmenu-toggle.hamburger,
 .ui-frame-mainmenu a.mainmenu-toggle.cross{
  display: block
 }

@media ( min-width: 576px ){
	
 .ui-group-header.ui-frame-header-side-first .wrapper a.mainmenu-toggle.hamburger{
  margin-right: 20px 
 }
 
}


/*
 mainmenu
 */

.ui-frame-mainmenu ul.primary-menu a{
 display: block;
 text-decoration: none;
 white-space: nowrap
}
.ui-frame-mainmenu ul.primary-menu a.hash-link{
 pointer-events: none
}
.ui-frame-mainmenu{
 position: fixed; 
 top: 0;
 left: 0;
 min-width: 100%;
 height: 100vh
}

@media ( max-width: 1199px ){
 
 html .ui-frame-mainmenu{
  transform: translateX( -100% )
 }
 html.allow-menu-transitions  .ui-frame-mainmenu{
  transition: ease transform 500ms 
 }
 html.sidebar-open .ui-frame-mainmenu{
  transform: translateX( 0 ) 
 }
 
}

@media ( min-width: 1200px ){
 
 html .ui-frame-mainmenu{
  opacity: 0;
  transform: translateY( -100% )
 }
 html.allow-menu-transitions  .ui-frame-mainmenu{
  transition: ease opacity 500ms, ease transform 500ms  
 }
 html.sidebar-open .ui-frame-mainmenu{
  opacity: 1;
  transform: translateY( 0 ) 
 }
 
}



 
.ui-frame-mainmenu a.mainmenu-toggle.cross{
 top: 18px;
 right: 21px  
}
 
.ui-frame-mainmenu .mainmenu{
 padding: 80px 0 2px 0;	
 height: 100%
}
.ui-frame-mainmenu .mainmenu__outer{
 height: 100%;
 width: 100%;
 overflow: hidden;
 overflow-y: scroll
}
.ui-frame-mainmenu .mainmenu__inner{
 padding: 0 15px 80px 0
}
.ui-frame-mainmenu ul.primary-menu{
 display: block
}
.ui-frame-mainmenu ul.primary-menu li{
 display: block;
 position: relative
}
.ui-frame-mainmenu ul.primary-menu>li+li{
 margin-top: 10px
}
.ui-frame-mainmenu ul.primary-menu li li+li{
 margin-top: 10px
}
.ui-frame-mainmenu ul.primary-menu a{
 padding: 7px
}
.ui-frame-mainmenu ul.primary-menu a.hash-link.hash-off{
 pointer-events: auto
}
.ui-frame-mainmenu ul.primary-menu>li>a{
 min-height: 38px;
}
.ui-frame-mainmenu ul.primary-menu div.submenu-wrap{
 max-height: 0px;
 overflow: hidden
}
.ui-frame-mainmenu ul.primary-menu li.menu-item-has-children.submenu-open>div.submenu-wrap{
 max-height: none
}
.ui-frame-mainmenu div.submenu-wrap ul{
 padding: 14px 0
}
.ui-frame-mainmenu ul.primary-menu div.submenu-wrap div.submenu-wrap>ul{
 padding: 6px 0
}
.ui-frame-mainmenu div.submenu-wrap a{
 margin-left: 40px	
}
.ui-frame-mainmenu div.submenu-wrap div.submenu-wrap a{
 margin-left: 60px	
}
 
/*
 Submenu indicator
 */
 
.ui-frame-mainmenu ul.primary-menu li.menu-item-has-children a>span{
 display: block; 
 position: absolute; 
 top: 0; 
 width: 36px; 
 height: 38px
}
.ui-frame-mainmenu ul.primary-menu li.trigger-toggle-submenu>a>span{
 pointer-events: none
}
.ui-frame-mainmenu ul.primary-menu li>a>span.trigger-toggle-submenu{
 cursor: pointer
}
 
 /*
  Submenu indicator left
  */
  
 .ui-frame-mainmenu.submenu-indicator-left ul.primary-menu li.menu-item-has-children>a{
  position: relative;
  padding-left: 45px
 }
 .ui-frame-mainmenu.submenu-indicator-left ul.primary-menu li.menu-item-has-children a>span{
  left: 0; 
 }
 
 /*
  Submenu indicator right
  */
  
 .ui-frame-mainmenu.submenu-indicator-right ul.primary-menu li.menu-item-has-children>a{
  position: relative;
  padding-right: 38px
 }
 .ui-frame-mainmenu.submenu-indicator-right ul.primary-menu li.menu-item-has-children a>span{
  right: 0; 
 }
 
 /*
  Submenu indicator cross
  */
  
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span:before,
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span:after{
  content: '';
  display: block;
  position: absolute;
  background-color: #FFF;
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span:before{
  top: 19px;
  left: 12px;
  width: 12px;
  height: 2px;  
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children>a>span:after{
  top: 14px;
  left: 17px;
  width: 2px;
  height: 12px
 }
 .ui-frame-mainmenu.submenu-indicator-cross ul.primary-menu li.menu-item-has-children.submenu-open>a>span:after{
  top: 19px;
  height: 2px
 }
 
 /*
  Submenu indicator arrows
  */
 .ui-frame-mainmenu.submenu-indicator-arrows ul.primary-menu li.menu-item-has-children>a>span:before{
  content: '';
  display: block;
  position: absolute;
  top: 14px;
  left: 14px;
  width: 7px;
  height: 7px;  
  border: solid #d9dadc 0; 
  border-right-width: 2px;
  border-bottom-width: 2px;
  transform: rotate( 0 );
  transition: linear transform 50ms
 }
 .ui-frame-mainmenu.submenu-indicator-arrows ul.primary-menu li.menu-item-has-children.submenu-open>a>span:before{
  top: 16px; 
  transform: rotate( -135deg )
 }
 
 /*
  Sidebar scrollbar
  */
  
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer{ /* Firefox */
  scrollbar-width: thin;
  scrollbar-gutter: auto;
  scrollbar-color: #f8f2ec transparent
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar{ /* Chrome, Edge, and Safari */
  width: 8px;
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar-track{
  background-color: transparent
 }
 .ui-frame-container.fixed-sidebar .ui-frame-mainmenu .mainmenu__outer::-webkit-scrollbar-thumb{
  background-color: #f8f2ec;
  border-radius: 6px
 }



/*
 Container widths
 */


.ui-frame-app-window .ui-frame-main .container, 
.ui-frame-app-window .ui-frame-main .container-width,
.ui-frame-app-window .ui-frame-footer .container, 
.ui-frame-app-window .ui-frame-footer .container-width{
  max-width: 1400px
}

@media ( min-width: 1420px ){
 
 .ui-frame-app-window .ui-frame-main .container.wider,
 .ui-frame-app-window .ui-frame-footer .container.wider{
  max-width: 1400px;
 }
	
}

@media ( min-width: 1620px ){
 
 .ui-frame-app-window .ui-frame-main .container.wider,
 .ui-frame-app-window .ui-frame-footer .container.wider{
  max-width: 1600px;
 }
	
}

.ui-frame-app-window .ui-frame-main .container-full-width,
.ui-frame-app-window .ui-frame-footer .container-full-width{
 max-width: 100%
}
 
@media ( min-width: 1360px ){
	
 .ui-frame-app-window .ui-frame-main .container-full-width,
 .ui-frame-app-window .ui-frame-footer .container-full-width{
  max-width: 100%
 }
 
}