@charset "UTF-8";

.ui-frame-mainmenu a.mainmenu-toggle.cross{
 display: none	
}

@media ( max-width: 1199px ){
	
 .ui-frame-mainmenu{
  position: fixed; 
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100vh;
  transform: translateX( -100% );
  transition: ease transform 300ms 
 }
 
 html.sidebar-open .ui-frame-mainmenu{ 
  transform: translateX( 0 ) 
 }
 
 .ui-frame-mainmenu a.mainmenu-toggle.cross{
  display: block;
  top: 23px;
  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 10px
 }
 .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 20px 7px 7px
 }
 .ui-frame-mainmenu ul.primary-menu>li>a{
  font-size: 1.25rem
 }
 .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
 }
 .ui-frame-mainmenu ul.primary-menu>li>a{
  background-color: #00000002;
  transition: background-color 50ms
 }
 .ui-frame-mainmenu ul.primary-menu>li:HOVER>a,  .ui-frame-mainmenu ul.primary-menu>li.active>a,  .ui-frame-mainmenu ul.primary-menu>li.submenu-open>a{
  background-color: #00000002
 }
 .ui-frame-mainmenu ul.primary-menu ul li>a{ 
  transition: color 100ms
 }
 
 
 
 /*
  Submenu indicator left
  */
 .ui-frame-mainmenu.submenu-indicator-left ul.primary-menu li>a{
  padding-left: 45px
 }
 .ui-frame-mainmenu.submenu-indicator-left ul.primary-menu li.menu-item-has-children>a{
  position: relative
 }
 .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
 }

}

@media ( min-width: 1200px ){
 
 /*
  Main menu desktop
  Additional styles below
  */
 
 .ui-frame-mainmenu .mainmenu{
  z-index: 1
 }
 .ui-frame-mainmenu ul.primary-menu{
  font-size: 0 
 }
 .ui-frame-mainmenu ul.primary-menu>li+li{
  margin-left: 17px
 }
 .ui-frame-mainmenu ul.primary-menu li{
  position: relative
 }
 .ui-frame-mainmenu ul.primary-menu ul a{
  white-space: nowrap; 
 }
 .ui-frame-mainmenu ul.primary-menu>li div.submenu-wrap{
  display: none
 }
 .ui-frame-mainmenu ul.primary-menu li:hover>div.submenu-wrap{
  display: block
 }
 .ui-frame-mainmenu ul.primary-menu>li{
  display: inline-block
 }
 .ui-frame-mainmenu ul.primary-menu>li div.submenu-wrap{
  position: absolute;
  z-index: 2
 }
 
 /*
  Submenu indicator
  Additional styles in header.css
  */
  
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children a>span{
  display: block; 
  position: absolute; 
  top: 0; 
  right: 0;
  height: 100%;
  pointer-events: none
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  content: '';
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;   
  border: solid #d9dadc 0; 
  border-right-width: 2px;
  border-bottom-width: 2px;
  transform: rotate( 45deg );
  transition: linear transform 50ms, linear top50ms
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children:hover>a>span:before{
  top: 18px;
  transform: rotate( -45deg )
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.trigger-toggle-submenu>a>span{
  pointer-events: none
 }

 /*
  Additional styling, separated for ease of customisation
  */

 .ui-frame-mainmenu ul.primary-menu li{
  position: relative;
  font-size: 1rem;
 }
 .ui-frame-mainmenu ul.primary-menu>li{
  padding-bottom: 5px
 }
 .ui-frame-mainmenu ul.primary-menu>li:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 5px;
  transition: linear width 200ms
 }
 .ui-frame-mainmenu ul.primary-menu>li li a{
  padding-left: 15px;
  padding-right: 15px
 }
 .ui-frame-mainmenu ul.primary-menu>li>div.submenu-wrap{
  top: 100%;
  left: 0;
  min-width: 100%;
  min-width: calc( 100% + 30px );
  border-top: solid 3px transparent
 }
 .ui-frame-mainmenu ul.primary-menu>li>div.submenu-wrap div.submenu-wrap{
  top: 0;
  left: 100%
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap ul li:last-child a{ /* add a small amount of padding to the last item in the submenu */
  padding-bottom: 14px
 }
 
 /*
  Header menu item grid or block
  */

 .ui-frame-container.header-grid-buttons .ui-group-header.ui-frame-header-side-first .wrapper ul li+li,
 .ui-frame-container.header-grid-buttons .ui-group-header.ui-frame-header-side-last .wrapper ul li+li,
 .ui-frame-container.header-grid-buttons .ui-frame-mainmenu ul.primary-menu>li+li{
  margin-left: 20px
 }
 .ui-frame-container.header-grid-buttons .ui-frame-mainmenu ul.primary-menu a{
  padding-top: 5px;
  padding-bottom: 5px
 }
 .ui-frame-container.header-block-buttons .ui-frame-mainmenu ul.primary-menu a{
  padding-left: 20px;
  padding-right: 20px
 }
 .ui-frame-container.header-block-buttons .ui-frame-mainmenu ul.primary-menu>li>a{
  height: 45px;	/* account for border on the parent li */
  line-height: 42px
 }
 .ui-frame-container.header-block-buttons .ui-frame-mainmenu ul.primary-menu li li a{
  padding-top: 7px;
  padding-bottom: 7px  
 }
 
 /*
  Submenu indicator
  */
  
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children a>span{
  width: 28px
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  left: 10px
 }
 .ui-frame-container.header-grid-buttons.header-submenu-indicator  .ui-frame-mainmenu ul.primary-menu>li.menu-item-has-children+li{ /* reduce the amount of left margin where a submenu indicator exists so the spacing look more balanced */
  margin-left: 7px
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children a{ /* add padding to accommodate the submenu indicator */
  padding-right: 28px	 
 }
 
 /*
  Submenu indicator grid or block
  */
 .ui-frame-container.header-grid-buttons.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  top: 14px
 }
 .ui-frame-container.header-block-buttons.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  top: 20px
 }

 /*
  Device hide
  */
  
 .ui-frame-mainmenu ul.primary-menu>li.small-device-only,
 .ui-frame-mainmenu ul.primary-menu ul li.small-device-only{
  display: none	 
 }
 
}


/*
 mainmenu toogle
 */

@media ( max-width: 1199px ){


 .ui-frame-mainmenu.ui-group-header{
  background-color: #e31746
 }
 .ui-frame-mainmenu{
  padding-right: 5px;
  border-right: 0
 }
 .ui-frame-mainmenu ul.primary-menu li li+li{
  margin-top: 5px
 }
 .ui-frame-mainmenu ul.primary-menu>li>a{
  padding: 7px 3px;
  min-height: 36px
 }
 .ui-frame-mainmenu ul.primary-menu a{
  border-radius: 4px;
  text-transform: uppercase
 }
 .ui-frame-mainmenu ul.primary-menu li, 
 .ui-frame-mainmenu ul.primary-menu li a[href]{
  color: #FFF
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap{
  background-color: #ffffff10
 }	
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap.l2-submenu-wrap{
  border-radius: 0 4px 4px 0
 }
 .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children a>span{
  background-color: #ffffff10
 }
 .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  border-color: #fff
 }
 .ui-frame-mainmenu ul.primary-menu>li>a{
  background-color: transparent
 }
 .ui-frame-mainmenu ul.primary-menu>li.active>a, .ui-frame-sidebar ul.primary-menu>li.submenu-open>a{
  background-color: #ffffff10
 }

 /*
  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
 }
 

}

@media ( min-width: 1200px ){
	
 .ui-frame-mainmenu ul.primary-menu li, 
 .ui-frame-mainmenu ul.primary-menu li a[href]{
  color: #fff
 }
 .ui-frame-mainmenu ul.primary-menu li li, 
 .ui-frame-mainmenu ul.primary-menu li li a[href]{
  color: #424B5A;
  transition: linear color 300ms
 }
 .ui-frame-mainmenu ul.primary-menu li li a[href]:hover{
  color: #e31746
 }
 .ui-frame-mainmenu ul.primary-menu a{
  text-transform: uppercase
 }
 .ui-frame-mainmenu ul.primary-menu>li:after{
  background-color: #717e95
 } 
 .ui-frame-mainmenu ul.primary-menu>li:hover:after{
  width: 100%
 }
 .ui-frame-mainmenu ul.primary-menu>li.active:after,
 .ui-frame-mainmenu ul.primary-menu>li.active:hover:after{
  background-color: #e31746;
  width: 100%
 }
 ul.primary-menu>li>div.submenu-wrap{
  border-top-color: #000
 }
 .ui-frame-mainmenu ul.primary-menu div.submenu-wrap{
  background-color: #efefef
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li.menu-item-has-children>a>span:before{
  border-color: #222
 }
 .ui-frame-container.header-submenu-indicator .ui-frame-mainmenu ul.primary-menu li li.menu-item-has-children>a>span:before{
  border-color: #fff
 }
 
}