button#responsive-menu-button, #responsive-menu-container { display: none; -webkit-text-size-adjust: 100%; } @media screen and (max-width: 1024px) { #responsive-menu-container { display: block; position: fixed; top: 0; bottom: 0; z-index: 99998; padding-bottom: 5px; margin-bottom: -5px; outline: 1px solid transparent; overflow-y: auto; overflow-x: hidden; } #responsive-menu-container .responsive-menu-search-box { width: 100%; padding: 0 2%; border-radius: 2px; height: 50px; -webkit-appearance: none; } #responsive-menu-container.push-left, #responsive-menu-container.slide-left { transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } .responsive-menu-open #responsive-menu-container.push-left, .responsive-menu-open #responsive-menu-container.slide-left { transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } #responsive-menu-container.push-top, #responsive-menu-container.slide-top { transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); } .responsive-menu-open #responsive-menu-container.push-top, .responsive-menu-open #responsive-menu-container.slide-top { transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); } #responsive-menu-container.push-right, #responsive-menu-container.slide-right { transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); } .responsive-menu-open #responsive-menu-container.push-right, .responsive-menu-open #responsive-menu-container.slide-right { transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } #responsive-menu-container.push-bottom, #responsive-menu-container.slide-bottom { transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%); } .responsive-menu-open #responsive-menu-container.push-bottom, .responsive-menu-open #responsive-menu-container.slide-bottom { transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); } #responsive-menu-container, #responsive-menu-container:before, #responsive-menu-container:after, #responsive-menu-container *, #responsive-menu-container *:before, #responsive-menu-container *:after { box-sizing: border-box; margin: 0; padding: 0; } #responsive-menu-container #responsive-menu-search-box, #responsive-menu-container #responsive-menu-additional-content, #responsive-menu-container #responsive-menu-title { padding: 25px 5%; } #responsive-menu-container #responsive-menu, #responsive-menu-container #responsive-menu ul { width: 100%; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu { display: none; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu.responsive-menu-submenu-open { display: block; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-1 a.responsive-menu-item-link { padding-left: 10%; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-2 a.responsive-menu-item-link { padding-left: 15%; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-3 a.responsive-menu-item-link { padding-left: 20%; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-4 a.responsive-menu-item-link { padding-left: 25%; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-5 a.responsive-menu-item-link { padding-left: 30%; } #responsive-menu-container li.responsive-menu-item { width: 100%; list-style: none; } #responsive-menu-container li.responsive-menu-item a { width: 100%; display: block; text-decoration: none; padding: 0 5%; position: relative; } #responsive-menu-container li.responsive-menu-item a .fa { margin-right: 15px; } #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow { position: absolute; top: 0; bottom: 0; text-align: center; overflow: hidden; } #responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow .fa { margin-right: 0; } button#responsive-menu-button .responsive-menu-button-icon-inactive { display: none; } button#responsive-menu-button { z-index: 99999; display: none; overflow: hidden; outline: none; } button#responsive-menu-button img { max-width: 100%; } .responsive-menu-label { display: inline-block; font-weight: 600; margin: 0 5px; vertical-align: middle; } .responsive-menu-label .responsive-menu-button-text-open { display: none; } .responsive-menu-accessible { display: inline-block; } .responsive-menu-accessible .responsive-menu-box { display: inline-block; vertical-align: middle; } .responsive-menu-label.responsive-menu-label-top, .responsive-menu-label.responsive-menu-label-bottom { display: block; margin: 0 auto; } button#responsive-menu-button { padding: 0 0; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .responsive-menu-box { width: 25px; height: 19px; display: inline-block; position: relative; } .responsive-menu-inner { display: block; top: 50%; margin-top: -1.5px; } .responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after { width: 25px; height: 3px; background-color: #ffffff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .responsive-menu-open .responsive-menu-inner, .responsive-menu-open .responsive-menu-inner::before, .responsive-menu-open .responsive-menu-inner::after { background-color: #ffffff; } button#responsive-menu-button:hover .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-inner::after, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::after { background-color: #ffffff; } .responsive-menu-inner::before, .responsive-menu-inner::after { content: ""; display: block; } .responsive-menu-inner::before { top: -8px; } .responsive-menu-inner::after { bottom: -8px; } .responsive-menu-boring .responsive-menu-inner, .responsive-menu-boring .responsive-menu-inner::before, .responsive-menu-boring .responsive-menu-inner::after { transition-property: none; } .responsive-menu-boring.is-active .responsive-menu-inner { transform: rotate(45deg); } .responsive-menu-boring.is-active .responsive-menu-inner::before { top: 0; opacity: 0; } .responsive-menu-boring.is-active .responsive-menu-inner::after { bottom: 0; transform: rotate(-90deg); } button#responsive-menu-button { width: 55px; height: 55px; position: fixed; top: 15px; right: 5%; background: #1b3588 } .responsive-menu-open button#responsive-menu-button { background: #1b3588 } .responsive-menu-open button#responsive-menu-button:hover, .responsive-menu-open button#responsive-menu-button:focus, button#responsive-menu-button:hover, button#responsive-menu-button:focus { background: #1b3588 } button#responsive-menu-button .responsive-menu-box { color: #ffffff; } .responsive-menu-open button#responsive-menu-button .responsive-menu-box { color: #ffffff; } .responsive-menu-label { color: #ffffff; font-size: 14px; line-height: 13px; } button#responsive-menu-button { display: inline-block; transition: transform 0.5s, background-color 0.5s; } #responsive-menu-container { width: 60%; right: 0; transition: transform 0.5s; text-align: center; background: #1b3588; } #responsive-menu-container #responsive-menu-wrapper { background: #1b3588; } #responsive-menu-container #responsive-menu-additional-content { color: #ffffff; } #responsive-menu-container .responsive-menu-search-box { background: #ffffff; border: 2px solid #dadada; color: #333333; } #responsive-menu-container .responsive-menu-search-box:-ms-input-placeholder { color: #c7c7cd; } #responsive-menu-container .responsive-menu-search-box::-webkit-input-placeholder { color: #c7c7cd; } #responsive-menu-container .responsive-menu-search-box:-moz-placeholder { color: #c7c7cd; opacity: 1; } #responsive-menu-container .responsive-menu-search-box::-moz-placeholder { color: #c7c7cd; opacity: 1; } #responsive-menu-container .responsive-menu-item-link, #responsive-menu-container #responsive-menu-title, #responsive-menu-container .responsive-menu-subarrow { transition: background-color 0.5s, border-color 0.5s, color 0.5s; } #responsive-menu-container #responsive-menu-title { background-color: #1b3588; color: #ffffff; font-size: 13px; } #responsive-menu-container #responsive-menu-title a { color: #ffffff; font-size: 13px; text-decoration: none; } #responsive-menu-container #responsive-menu-title a:hover { color: #ffffff; } #responsive-menu-container #responsive-menu-title:hover { background-color: #1b3588; color: #ffffff; } #responsive-menu-container #responsive-menu-title:hover a { color: #ffffff; } #responsive-menu-container #responsive-menu-title #responsive-menu-title-image { display: inline-block; vertical-align: middle; } #responsive-menu-container #responsive-menu-title #responsive-menu-title-image img { } #responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a { border-top: 1px solid #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link { font-size: 13px; } #responsive-menu-container #responsive-menu li.responsive-menu-item a { height: 30px; line-height: 30px; border-bottom: 1px solid #1b3588; color: #ffffff; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover { color: #6cdbff; background-color: #1b3588; border-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow { right: 0; height: 39px; line-height: 39px; width: 40px; color: #ffffff; border-left: 1px solid #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow:hover { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link { background-color: #1b3588; color: #6cdbff; border-color: #1b3588; } #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link:hover { background-color: #1b3588; color: #6cdbff; border-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item .responsive-menu-item-link { font-size: 13px; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a { height: 40px; line-height: 40px; border-bottom: 1px solid #1b3588; color: #ffffff; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover { color: #ffffff; background-color: #1b3588; border-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a:hover .responsive-menu-subarrow.responsive-menu-subarrow-active { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow { right: 0; height: 39px; line-height: 39px; width: 40px; color: #ffffff; border-left: 1px solid #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a .responsive-menu-subarrow:hover { color: #ffffff; border-color: #1b3588; background-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link { background-color: #1b3588; color: #ffffff; border-color: #1b3588; } #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link:hover { background-color: #1b3588; color: #ffffff; border-color: #1b3588; } .menu { display: none !important; } }</style><script>jQuery(document).ready(function($) {

    var ResponsiveMenu = {
        trigger: '#responsive-menu-button',
        animationSpeed: 500,
        breakpoint: 1024,
        pushButton: 'off',
        animationType: 'slide',
        animationSide: 'right',
        pageWrapper: '',
        isOpen: false,
        triggerTypes: 'click',
        activeClass: 'is-active',
        container: '#responsive-menu-container',
        openClass: 'responsive-menu-open',
        accordion: 'off',
        activeArrow: '▲',
        inactiveArrow: '▼',
        wrapper: '#responsive-menu-wrapper',
        closeOnBodyClick: 'off',
        closeOnLinkClick: 'off',
        itemTriggerSubMenu: 'off',
        linkElement: '.responsive-menu-item-link',
        subMenuTransitionTime: 200,
        openMenu: function() {
            $(this.trigger).addClass(this.activeClass);
            $('html').addClass(this.openClass);
            $('.responsive-menu-button-icon-active').hide();
            $('.responsive-menu-button-icon-inactive').show();
            this.setButtonTextOpen();
            this.setWrapperTranslate();
            this.isOpen = true;
        },
        closeMenu: function() {
            $(this.trigger).removeClass(this.activeClass);
            $('html').removeClass(this.openClass);
            $('.responsive-menu-button-icon-inactive').hide();
            $('.responsive-menu-button-icon-active').show();
            this.setButtonText();
            this.clearWrapperTranslate();
            this.isOpen = false;
        },
        setButtonText: function() {
            if($('.responsive-menu-button-text-open').length > 0 && $('.responsive-menu-button-text').length > 0) {
                $('.responsive-menu-button-text-open').hide();
                $('.responsive-menu-button-text').show();
            }
        },
        setButtonTextOpen: function() {
            if($('.responsive-menu-button-text').length > 0 && $('.responsive-menu-button-text-open').length > 0) {
                $('.responsive-menu-button-text').hide();
                $('.responsive-menu-button-text-open').show();
            }
        },
        triggerMenu: function() {
            this.isOpen ? this.closeMenu() : this.openMenu();
        },
        triggerSubArrow: function(subarrow) {
            var sub_menu = $(subarrow).parent().siblings('.responsive-menu-submenu');
            var self = this;
            if(this.accordion == 'on') {
                /* Get Top Most Parent and the siblings */
                var top_siblings = sub_menu.parents('.responsive-menu-item-has-children').last().siblings('.responsive-menu-item-has-children');
                var first_siblings = sub_menu.parents('.responsive-menu-item-has-children').first().siblings('.responsive-menu-item-has-children');
                /* Close up just the top level parents to key the rest as it was */
                top_siblings.children('.responsive-menu-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('responsive-menu-submenu-open');
                /* Set each parent arrow to inactive */
                top_siblings.each(function() {
                    $(this).find('.responsive-menu-subarrow').first().html(self.inactiveArrow);
                    $(this).find('.responsive-menu-subarrow').first().removeClass('responsive-menu-subarrow-active');
                });
                /* Now Repeat for the current item siblings */
                first_siblings.children('.responsive-menu-submenu').slideUp(self.subMenuTransitionTime, 'linear').removeClass('responsive-menu-submenu-open');
                first_siblings.each(function() {
                    $(this).find('.responsive-menu-subarrow').first().html(self.inactiveArrow);
                    $(this).find('.responsive-menu-subarrow').first().removeClass('responsive-menu-subarrow-active');
                });
            }
            if(sub_menu.hasClass('responsive-menu-submenu-open')) {
                sub_menu.slideUp(self.subMenuTransitionTime, 'linear').removeClass('responsive-menu-submenu-open');
                $(subarrow).html(this.inactiveArrow);
                $(subarrow).removeClass('responsive-menu-subarrow-active');
            } else {
                sub_menu.slideDown(self.subMenuTransitionTime, 'linear').addClass('responsive-menu-submenu-open');
                $(subarrow).html(this.activeArrow);
                $(subarrow).addClass('responsive-menu-subarrow-active');
            }
        },
        menuHeight: function() {
            return $(this.container).height();
        },
        menuWidth: function() {
            return $(this.container).width();
        },
        wrapperHeight: function() {
            return $(this.wrapper).height();
        },
        setWrapperTranslate: function() {
            switch(this.animationSide) {
                case 'left':
                    translate = 'translateX(' + this.menuWidth() + 'px)'; break;
                case 'right':
                    translate = 'translateX(-' + this.menuWidth() + 'px)'; break;
                case 'top':
                    translate = 'translateY(' + this.wrapperHeight() + 'px)'; break;
                case 'bottom':
                    translate = 'translateY(-' + this.menuHeight() + 'px)'; break;
            }
            if(this.animationType == 'push') {
                $(this.pageWrapper).css({'transform':translate});
                $('html, body').css('overflow-x', 'hidden');
            }
            if(this.pushButton == 'on') {
                $('#responsive-menu-button').css({'transform':translate});
            }
        },
        clearWrapperTranslate: function() {
            var self = this;
            if(this.animationType == 'push') {
                $(this.pageWrapper).css({'transform':''});
                setTimeout(function() {
                    $('html, body').css('overflow-x', '');
                }, self.animationSpeed);
            }
            if(this.pushButton == 'on') {
                $('#responsive-menu-button').css({'transform':''});
            }
        },
        init: function() {
            var self = this;
            $(this.trigger).on(this.triggerTypes, function(e){
                e.stopPropagation();
                self.triggerMenu();
            });
            $(this.trigger).mouseup(function(){
                $(self.trigger).blur();
            });
            $('.responsive-menu-subarrow').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                self.triggerSubArrow(this);
            });
            $(window).resize(function() {
                if($(window).width() > self.breakpoint) {
                    if(self.isOpen){
                        self.closeMenu();
                    }
                } else {
                    if($('.responsive-menu-open').length>0){
                        self.setWrapperTranslate();
                    }
                }
            });
            if(this.closeOnLinkClick == 'on') {
                $(this.linkElement).on('click', function(e) {
                    e.preventDefault();
                    /* Fix for when close menu on parent clicks is on */
                    if(self.itemTriggerSubMenu == 'on' && $(this).is('.responsive-menu-item-has-children > ' + self.linkElement)) {
                        return;
                    }
                    old_href = $(this).attr('href');
                    old_target = typeof $(this).attr('target') == 'undefined' ? '_self' : $(this).attr('target');
                    if(self.isOpen) {
                        if($(e.target).closest('.responsive-menu-subarrow').length) {
                            return;
                        }
                        self.closeMenu();
                        setTimeout(function() {
                            window.open(old_href, old_target);
                        }, self.animationSpeed);
                    }
                });
            }
            if(this.closeOnBodyClick == 'on') {
                $(document).on('click', 'body', function(e) {
                    if(self.isOpen) {
                        if($(e.target).closest('#responsive-menu-container').length || $(e.target).closest('#responsive-menu-button').length) {
                            return;
                        }
                    }
                    self.closeMenu();
                });
            }
            if(this.itemTriggerSubMenu == 'on') {
                $('.responsive-menu-item-has-children > ' + this.linkElement).on('click', function(e) {
                    e.preventDefault();
                    self.triggerSubArrow($(this).children('.responsive-menu-subarrow').first());
                });
            }
        }
    };
    ResponsiveMenu.init();
});