/* 
--------------------------------------
MAIN MENU
--------------------------------------
*/

#main-menu{clear:both;margin-top:43px}
ul.menu,ul.menu li,ul.accordion,ul.accordion li,ul.flyout,ul.flyout li{margin:0;padding:0;}
ul.menu li.hide{display:none !important;}
ul.menu li:before,ul.accordion li:before,ul.flyout li:before{display:none;}
ul.menu,ul.menu li,ul.menu ul.sub-menu,ul.menu ul.sub-menu li{margin:0;padding:0;}
.main-menu ul.menu li{margin-right: 20px;position:relative;float:left;display: flex;justify-content: center;text-align: center;}
.main-menu ul.menu li:last-child{margin-right:0 !important;}
.main-menu ul.menu li.current-menu-item:last-child{margin-right:0;}
ul.menu>li.text > a{cursor:text;}
 /*
  *set padding and z-index to work the submenu fade down
  *remove the ul.menu li margin-right and replace with ul.menu li a padding
 
 */
.main-menu ul.menu li a{text-decoration:none;z-index:599;text-transform: uppercase;}
.main-menu ul.menu>li.false>a{cursor:text;}
.main-menu ul.menu > li > a{
    font-size: 14px;
    color: #1a2120;
    font-weight: 500;
}
.main-menu ul.menu li span{transition:none;}
.main-menu ul.menu li:hover > a,
.main-menu ul.menu li.current-menu-item > a,
body.pages .main-menu ul.menu li.current-menu-parent > a{color:#57aebf;}
.main-menu ul.menu li.home{display:block;bottom:0px;margin-right:0;text-align:center;}
.main-menu ul.menu li.home a:before{vertical-align:top;
margin:0px 20px 0 0;font-family:FontAwesome-webfont;content:"\f015";
font-size:20px;}
.main-menu ul.menu li.home a:hover:before{}
.main-menu ul.menu li.home a{font-size:0;}
.main-menu ul.menu li a:before{left:51%;right:51%;}
.main-menu ul.menu li a:hover:before,
.main-menu ul.menu li a:focus:before,
.main-menu ul.menu li a:active:before,
body.pages .main-menu ul.menu li.current-menu-item > a:before,
body.pages .main-menu ul.menu li.current-menu-parent > a:before{left:0;right:0;}

/* SUBMENU */

.main-menu ul.menu>li >.sub-menu{
  display: block;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index:-1;
  min-width: 156px;
  top: 100%;
  padding: 56px 33px 30px;
  overflow: hidden;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  pointer-events:none;
}
.main-menu ul.menu li:hover > .sub-menu {
   opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  visibility:visible;
  z-index:9;
  pointer-events:all;
}
.main-menu ul.menu>li >.sub-menu:before,.main-menu ul.menu>li >.sub-menu:after{
  content:"";
  position:absolute;
  width:100%;
  z-index: -1;left:0;
}

.main-menu ul.menu>li >.sub-menu:before{width:40px;height:20px;background:url("../images/arrow-40x20.svg") no-repeat;top: 13px;left:0;right:0;margin:0 auto;}
.main-menu ul.menu>li >.sub-menu:after{content:"";position:absolute;width:100%;background-color: #57aebf;height:100%;top: 33px;}
.main-menu ul.menu .sub-menu li{float: none;display: block;position:relative;margin: 0 0 10px;}
.main-menu ul.menu>li >.sub-menu>li>a{font-size: 12px;color: #ffffff;white-space:nowrap;text-transform: uppercase;font-weight: 600;}
.main-menu ul.menu>li >.sub-menu>li.current-menu-item>a,
.main-menu ul.menu>li >.sub-menu>li>a:hover,
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li.current-menu-item>a,
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li>a:hover{color: #1a2120;}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu{display:none;transform:none !important;transition: none;padding: 25px 0 5px;}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li>a{font-size: 14px;color: #454545;line-height: normal;padding:0 0 0 28px;}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li>a:after{content:"";position:absolute;top:8px;bottom:0;margin:0;left:0px;background-color: #a5a5a5;width: 20px;height:2px;}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li>a:hover:after{background-color:#0391bf;}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li{padding:0 0 15px}
.main-menu ul.menu>li >.sub-menu>li>.sub-menu>li:last-child{padding-bottom:0 !important;}

/* END SUBMENU */

/* ---- END MAIN MENU ---- */

/* 
--------------------------------------
FOOTER MENU
--------------------------------------
*/

#footermenu li{float:left;line-height:100%;margin: 0 21px 0 0;padding:0;}
#footermenu li:first-child{padding-left:0 !important;}
#footermenu li:last-child{border-right:0 !important;margin-right:0 !important;padding-right: 0 !important;}
#footermenu li a{line-height:100%;color: #1a2120;vertical-align:top;}
#footermenu li:hover a,
#footermenu li.current-menu-item a{color:#57aebf;}
#footermenu li a:before{left:51%;right:51%;background:#f5eddd;bottom:0;}
#footermenu li a:hover:before,
#footermenu li a:focus:before,
#footermenu li a:active:before,
#footermenu li.current-menu-item a:before{left:0;right:0;}


/* ---- END FOOTER MENU ---- */

/* 
--------------------------------------
MOBILE MENU
--------------------------------------
*/


.hamburger-spring{display:block;position:relative;width:30px;height:19px;}
#mobmenu .hamburger-box{margin: 0 auto;}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
    width: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 2px;
    background-color: #ffffff;
    border-radius: 0;
    position: absolute;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.show_mobmenu .hamburger-inner,.show_mobmenu .hamburger-inner::after,
.show_mobmenu .hamburger-inner::before{
    background:#ffffff;
}
.hamburger-inner::after,
.hamburger-inner::before{content:"";}
.hamburger-inner:before{top:8px;}
.hamburger-inner:after{top:16px;}
.hamburger-spring.is-active .hamburger-inner {
    -webkit-transition-delay: .22s;
    transition-delay: .22s;
    background-color: transparent !important;
}
.hamburger-spring.is-active .hamburger-inner::before {
    top: 0;
    -webkit-transition: top .1s .15s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .1s .15s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .1s .15s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .1s .15s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    -webkit-transform: translate3d(0,10px,0) rotate(45deg);
    transform: translate3d(0,10px,0) rotate(45deg);
}
.hamburger-spring.is-active .hamburger-inner::after {
    top: 0;
    -webkit-transition: top .2s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1);
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s .22s cubic-bezier(.215,.61,.355,1),-webkit-transform .13s .22s cubic-bezier(.215,.61,.355,1);
    -webkit-transform: translate3d(0,10px,0) rotate(-45deg);
    transform: translate3d(0,10px,0) rotate(-45deg);
}


#mobmenu #show_mobmenu {display:block;vertical-align:middle;text-align:center;}
#mobmenu #show_mobmenu .fa{font-size:40px;}
#mobmenu #show_mobmenu span{display:inline-block;vertical-align:top;}

.show_mobmenu{top:0;position:fixed; /* to prevent header div moving when the mobile menu displays */width : 100%;left : 0;z-index : 99;overflow:auto;transition:none;min-height:100vh;-webkit-transition: all .6s ease;transition: all .6s ease;-webkit-transform: translateY(-100%);transform: translateY(-100%);display:none;height:100%;background: #57aebf;padding: 50px 0 150px;}
.show_mobmenu.side ul ul.sub-menu{padding:0 0 0 20px;}
.show_mobmenu ul.menu li{border-bottom:solid 1px #cccccc;padding:10px 0 15px;}
.show_mobmenu ul.menu li:last-child{border-bottom:0;padding-bottom:0;}
.show_mobmenu ul.menu li a{color:#ffffff;text-transform:uppercase;font-size:20px;display:inline-block;font-weight: 500;}
.show_mobmenu.top ul.menu li{border-bottom:0;text-align:center;}
.show_mobmenu.top ul.menu li a{color:#ffffff;display:inline-block;font-size:25px;}
.show_mobmenu ul.menu li.current-menu-item>a,
.show_mobmenu ul.menu li>a:hover{color:#1a2120;}
.show_mobmenu ul.menu li a:before{left:50%;right:50%;}
.show_mobmenu ul.menu li a:hover:before,
.show_mobmenu ul.menu li.current-menu-item>a:before{left:0;right:0;}
.show_mobmenu ul.menu ul.sub-menu{margin:20px 0 0;}
.show_mobmenu ul.menu ul.sub-menu li{padding:0 0 10px;}
.show_mobmenu ul.menu ul.sub-menu li a{font-size:18px;text-transform:none;}


@media screen and (max-width:1260px) {
 header.main{position:absolute;} /*make header absolute to avoid menu displaying issues */ 
.main-menu {display : none;}
#mobmenu{position:relative;display:block !important;margin-top:10px;}
#mobmenu .label{text-transform:uppercase;font-size: 14px;line-height:100%;vertical-align:middle;margin-right:10px;}
#mobmenu ._icon{background:url("../images/icon-menu.svg") no-repeat center center #57aebf;width:40px;height:40px;display:inline-block;vertical-align:middle;border-radius:50%;}
}

/* ---- END MOBILE MENU ---- */