<div id="slide-out-widget-area" class="slide-out-from-right" style="padding-top: 71.4px; padding-bottom: 71.4px;"> <div class="inner-wrap"> <div class="inner"> <div class="off-canvas-menu"> <?php wp_nav_menu( array ( 'theme_location' => 'header', 'container' => '', 'menu_class' => 'menu', ) ); ?> </div> </div> </div> <div id="slide-out-widget-area-bg" class="slide-out-from-right solid material-open"></div> <!-- <div class="close-btn"> <span class="close-wrap"> <span class="close-line close-line1"></span> <span class="close-line close-line2"></span> </span> </div> --> </div> <div class="occu-health-wrapper"> <div id="top"><a class="menulinks"><i></i></a></div> </div> <style> @media (max-width:767px){ header#header {padding: 20px 0 0;background: transparent;} .header-top {border-bottom: none;} .head-wrapper {height: 98px;} .head-wrapper.fixed-header a.menulinks {top: 30px;right: 20px;} .head-wrapper.fixed-header ul.mainmenu {top: 98px;left: 0;width: 100%;} .logo-col {flex: 0 0 110px;} .head-btn-col {flex: 0 0 calc(100% - 150px);justify-content: flex-end;padding-right: 0px;padding-left: 0;} .mobile-open div#slide-out-widget-area {min-width: 78vw;width: 78vw;margin: 0 0 0 auto;padding-left: 50px;padding-right: 50px;display: block;} .mobile-open .inner-wrap{position:absolute;top:50%;transform:translate(-50%,-50%);left: 70%;display:flex;align-items:center;justify-content:center;} .off-canvas-menu .menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;margin-bottom:10px;} .inner-wrap .off-canvas-menu .nav-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;} .mobile-open div#slide-out-widget-area-bg{background:var(--primary-color);opacity:1;height:100vh;width:100vw;z-index:-1;position:absolute;top:0;left:0;} .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;} div#top .menulinks{display:none;justify-content:end;height:50px;z-index:99;width:100%;} .mobile-open div#top .menulinks {display: flex;} div#slide-out-widget-area {display: none;} .occu-health-wrapper{transition:transform 0.5s;top:auto;height:100vh;} .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;} .mobile-open .occu-health-wrapper {left: 25%;} .mobile-open div#top{padding:10px 0;background:white;display:flex;justify-content:end;height:inherit;} ul#menu-header-menu li > a{color:var(--white);} ul#menu-header-menu {list-style: none;padding: 0;} .off-canvas-menu{width:200px;} .off-canvas-menu .btn-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-top:10px;} .off-canvas-menu a.btn{display:inline-flex;padding:10px;width:50px;height:50px;background:var(--white);margin-right:10px;} .off-canvas-menu a.btn svg{color:var(--primary-color);width:30px;height:30px;} .off-canvas-menu a.btn:last-child{margin:0;} .off-canvas-menu ul#menu-header-menu li{margin-bottom:10px;width: 100%;} /*Nav*/ .menulinks{display:block;top:30px;right:20px;z-index:999999;} .mobile-open a.menulinks {display: none;} ul.mainmenu{text-align:left;position:absolute;top:98px;padding:0;right:0;width:100%;background:#000;display:none !important;z-index:9999999;} ul.mainmenu>li>a:after{content:none;} ul.mainmenu>li>a:hover:after{content:none;} ul.mainmenu>li{float:left;width:100%;padding:0px;margin:0;border-top:1px solid rgba(255,255,255,0.2);position:relative;} ul.mainmenu>li:first-child{border:none;} ul.mainmenu>li>a:link,ul.mainmenu>li>a:visited{padding:10px 15px;font-size:16px;float:left;width:100%;border:none;text-align:left;color:#fff;} ul.mainmenu>li>a:hover{background:rgba(255,255,255,0.2);} a.menulinks i{display:inline;position:relative;top: 0;right: 0;margin-left:0;-webkit-transition-duration:0s;-webkit-transition-delay:.2s;-moz-transition-duration:0s;-moz-transition-delay:.2s;transition-duration:0s;transition-delay:.2s;} a.menulinks i:before,a.menulinks i:after{position:absolute;content:'';left:0;} a.menulinks i,a.menulinks i:before,a.menulinks i:after{width:35px;height:4px;background-color:#000;display:inline-block;} a.menulinks i:before{transform: translateY(-10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;} a.menulinks i:after{transform: translateY(10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;} .mobile-open a.menulinks i{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);} .mobile-open a.menulinks i:before{margin-top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);} .mobile-open a.menulinks i:after{margin-top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);} ul.mainmenu>li>a.current:after{display:none;} ul.mainmenu ul{position:relative;top:auto;left:auto;float:left;width:100%;} ul.mainmenu ul li{position:relative;} ul.mainmenu ul li a{padding:8px 15px 8px 25px;color:#fff;} a.child-triggerm{display:block!important;cursor:pointer;position:absolute!important;top:0px;right:0px;width:50px!important;min-width:50px!important;height:38px!important;padding:0!important;border-left:1px dotted rgba(255,255,255,.20);} a.child-triggerm:hover{text-decoration:none;color:#f00;} a.child-triggerm span{position:relative;top:50%;margin:0 auto!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;} a.child-triggerm span:after{position:absolute;content:'';} a.child-triggerm span,a.child-triggerm span:after{width:10px;height:1px;background-color:#fff;display:block;} a.child-triggerm span:after{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;} a.child-triggerm.child-open span:after{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;} a.child-triggerm.child-open span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;} a.child-triggerm:hover span,a.child-triggerm:hover span:after{background-color:#f00;} .logo-col a > img {max-width: 110px;height: 70px;object-fit: contain;} .head-btn-col a.btn:last-of-type {margin-right: 0;display: none;} .contact-col ul, .keep-col ul {margin: 0 0 0 15px;} .footer-logo-col {width: 100%;} } @media (max-width: 567px) { .head-btn-col {flex: 0 0 calc(100% - 110px);justify-content: end;padding-right: 38px;padding-left: 5px;} .head-btn-col .btn {width: 40px;height: 40px;margin-right: 5px;} ul.mainmenu {top: 143px;display: none !important;} .head-wrapper.fixed-header ul.mainmenu {top: 144px;} .services-col {margin-bottom: 15px;margin-top: 15px;} .contact-col {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;width: 100%;} .footer .services-col .footer-links ul {text-align: center;margin: 0;} .contact-col ul, .keep-col ul {margin: 0 0 0px 0;text-align: center;} .keep-col {width: 100%;} .footer .services-col span, .footer .contact-col span, .footer .keep-col span {padding-left: 0;padding-bottom: 15px;font-size: 22px;justify-content: center;} .footer .row {justify-content: center;} .footer-logo-col {width: 100%;text-align: center;} .contact-col ul, .keep-col ul {margin: 0 0 0 0;} .logo-col a > img {max-width: 90px;} .mobile-open .inner-wrap {left: 75%;} .head-wrapper.fixed-header a.menulinks{top:30px;right:10px;} } @media (max-width: 350px) { .logo-col{flex:0 0 90px;} .head-btn-col {flex: 0 0 calc(100% - 90px);padding-right: 28px;} .menulinks{top:30px;right:20px;} .head-wrapper.fixed-header a.menulinks{top:30px;right:5px;} } </style> <script> jQuery(document).ready(function (jQuery) { jQuery('.mainmenu li:has(ul)').addClass('parent'); jQuery('.mainmenu').before('<a class="menulinks"><i></i></a>'); jQuery('a.menulinks').click(function () { jQuery(this).next('ul').slideToggle(250); jQuery('body').toggleClass('mobile-open'); jQuery('.mainmenu li.parent ul').slideUp(250); jQuery('a.child-triggerm').removeClass('child-open'); return false; }); jQuery('.mainmenu li.parent > ul').before('<a class="child-triggerm"><span></span></a>'); jQuery('.mainmenu a.child-triggerm').click(function () { jQuery(this).parent().siblings('li').find('a.child-triggerm').removeClass('child-open'); jQuery(this).parent().siblings('li').find('ul').slideUp(250); jQuery(this).next('ul').slideToggle(250); jQuery(this).toggleClass('child-open'); return false; });</script>