/*standard*/

header .navigationcontainer {
    position: relative;
    
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: space-between;

    width: 100%;
}

header .mobilemenutrigger {
    display: none;
    position: relative;
    
    width: 22px;
    height: 18px;
    
    
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
header .mobilemenutrigger .mobileopen,
header .mobilemenutrigger .mobilexclose  {
    position:absolute;
    
    cursor: pointer;
    
    display:inline-block;
    vertical-align: baseline;
    
    -webkit-transition: all ease-in-out;
    -o-transition: all ease-in-out;
    -moz-transition: all ease-in-out;
    transition: all ease-in-out;
}
header .mobilemenutrigger .mobileopen {
    opacity:1;
    visibility: visible;    
}
header .mobilemenutrigger .mobilexclose {
    opacity:0;
    visibility: hidden;
}

header .mobilemenutrigger.open .mobileopen {
    opacity:0;
    visibility: hidden;
}
header .mobilemenutrigger.open .mobilexclose {
    opacity:1;
    visibility: visible;
}

header .mobilemenutrigger .mobileopen .menuicon {
    width: 22px;
    height: 18px;    
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../graphics/menuopen2.svg);
}
header.reverse .mobilemenutrigger .mobileopen .menuicon {
    background-image: url(../graphics/menuopen2-reverse.svg);
}
header .mobilemenutrigger .mobilexclose .xcloseicon {
    width: 14px;
    height: 14px;
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../graphics/menuclose-x.svg);
}
header.reverse .mobilemenutrigger .mobilexclose .xcloseicon {
    background-image: url(../graphics/menuclose-x-reverse.svg);
}


/*header .navigation .menu-navigation.w-nav-menu {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
    position: absolute;
    top: 100%;
    left: 0;
    
}*/


@media screen and (max-width: 820px) {
    header .navigation {
        display:none;
    }    

    header .mobilemenutrigger {
        display: flex;
    }
}


/*dropdown/slideout*/
.mainmobilenavigation.navbox {
    
    position: fixed;
    
    opacity: 0.0;
    visibility: hidden;
    
    right: -100%;
    top: 0;
    
    padding-top: 115px;
    
    margin: 0; /*17px 0 0*/;
    
    z-index: 999;
    
    height: 100vh;
    
    overflow: hidden;
    
    width: 265px;
    
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    
    background: rgba(108,101,97,0.97);
    box-shadow: 4px 4px 11px 0 rgba(0,0,0,0.10);
    
    
    /*background: rgba(202, 117, 69, 0.97);*/
    
    pointer-events:none;
    
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.mainmobilenavigation.navbox.showfixed {
    
    opacity: 1;
    visibility: visible;
    
    right: 0;
  
    pointer-events:all;
}
/*if the device width is larger than our mobile menu layout, then keep hidden*/
@media screen and (min-width: 820px) {
    .mainmobilenavigation.navbox.showfixed {
        opacity: 0.0;
        visibility: hidden;
        right: -100%; 
        pointer-events: none;   
    }    
}
.mainmobilenavigation.navbox .innernavbox {
    position: relative;
    margin: 0;
    padding: 0;
    
    padding-bottom: 20px;
    
    width: 100%;
}



.mainmobilenavigation.navbox .innernavbox .menuitems {
    position: relative;
    
    height: auto;
}
.hasmainmenu.mainmobilenavigation .contactcontainer {
    position: relative;
    right: unset;
    bottom: unset;
    height: auto;
    top: unset;
    
    min-height: auto;
    margin-top: 0px;
    padding-bottom: 0px;
}
.hasmainmenu.mainmobilenavigation .contactcontainer .menucontactbox-dc9kjr {
    border-top: 1px solid #C8C7C7;
    padding-top: 21px;
    margin-top: 0;    
    margin-bottom: 80px;
}

.mainmobilenavigation .menuitems.mobileitems .mainnavigation {
    display:flex;
    position:relative;
    
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    justify-content: flex-start;
    
    padding: 0 20px 0 35px;
    margin-top:0;
    margin-left:0;
    
    width:auto;
}
.mainmobilenavigation .menuitems.mobileitems .menulistbox {
    position: relative;
    top: unset !important;
    justify-content: flex-start;
    
    left: unset;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    right: 0;
    
    background-color: rgba(0, 0, 0, 0);
    
    color: #fff;
    line-height: 22px;
    
    z-index: 3000;
    text-transform: capitalize;

    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    
    overflow: hidden;
    opacity:0.0;
    height: 0;
    margin-top: 0;
 
    pointer-events:none;
}
.mainmobilenavigation.navbox.showfixed .menuitems.mobileitems .menulistbox  {
   pointer-events:all; 
}

.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item.expand .menulistbox {
    opacity:1;
    margin-top:15px;   
}

.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item {
    margin-left: 0;
    margin-top: 17px;
    width: 100%;
    height: auto;
    position: relative;
    
    font-family: brother-1816, Helvetica, Arial, serif;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    letter-spacing: 2px;
    color: #fff;
    
    cursor:pointer;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}  
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item:first-of-type {
    margin-top:0;
}
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item:after,
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item:before {
    position:absolute;
    content:'';
    top:9px;
   
    right: 20px;
    width: 10px;
    height: 6px;

    opacity:0;
    
    background-origin:padding-box;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    
    
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    
}
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item:after {
    opacity:1;
    background-image: url(../graphics/menu-arrow-down.svg);
}
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item.expand:after {
    opacity:0;
}
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item:before {
    opacity:0;
    background-image:url(../graphics/menu-arrow-up.svg);   
}
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item.expand:before {
    opacity:1;
}


.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item .linkitem,
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item > a,
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item > a:link,
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item > a:visited,
.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item > a:hover {
    font-family: brother-1816, Helvetica, Arial, serif;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 2px;
    line-height: 16px;
    
    pointer-events:none;
    
    text-transform: uppercase;
}

.mainmobilenavigation .menuitems.mobileitems .mainnavigation .item > a:hover {
    text-decoration: underline;
}
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul {
    width:100%;
    
    /*counter legacy CSS in the bridge styles*/
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
}
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li {
    list-style: none;
    margin: 0 0 15px;
    
    padding: 0 0 0 13px;

    font-family: brother-1816, Helvetica, Arial, serif;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 16px;
    
    cursor:pointer;
    
    position: relative;
    
    /*counter legacy CSS in the bridge styles*/
    background: none;
}
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li a,
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li a:link,
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li a:visited,
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li a:hover {
    font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: inherit;
  text-decoration: none;
}
.mainmobilenavigation .menuitems.mobileitems .menulistbox ul li:hover {
    opacity:.5;
}

@media screen and (max-width: 540px) {
    .mainmobilenavigation.navbox {
        padding-top: 78px;
    }
    
    .hasmainmenu.mainmobilenavigation .contactcontainer .infobox-coZ3D0 .labelbox a, 
    .hasmainmenu.mainmobilenavigation .contactcontainer .infobox-coZ3D0 .labelbox a:link,
    .hasmainmenu.mainmobilenavigation .contactcontainer .infobox-coZ3D0 .labelbox a:visited,
    .hasmainmenu.mainmobilenavigation .contactcontainer .infobox-coZ3D0 .labelbox a:hover {
        text-transform: lowercase;    
    }
}