/* Theme Name: Salient Description: Off canvas menu set to "Slide Out From Right Hover" in theme options */ body[data-slide-out-widget-area-style="slide-out-from-right-hover"] #header-outer{ z-index:9995 } #slide-out-widget-area.slide-out-from-right-hover{ position:fixed; transform:translate3d(341px,0,0); -webkit-transform:translate3d(341px,0,0); -ms-transform:translate3d(341px,0,0); top:0; right:0; width:340px; height:100%; z-index:9999; padding:62px; padding-top:80px; overflow:hidden; -webkit-transition:all .7s cubic-bezier(0.25,1,.2,1); -ms-transition:all .7s cubic-bezier(0.25,1,.2,1); transition:all .7s cubic-bezier(0.25,1,.2,1) } /* text fade in */ #slide-out-widget-area.slide-out-from-right-hover .inner{ opacity:0; margin-bottom:30px; transform:translateX(50px); -webkit-transition:-webkit-transform .45s cubic-bezier(.2,.75,.3,1) 0.22s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.22s; -ms-transition:transform .45s cubic-bezier(.2,.75,.3,1) 0.22s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.22s; transition:transform .45s cubic-bezier(.2,.75,.3,1) 0.22s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.22s } .material #slide-out-widget-area.slide-out-from-right-hover .inner { margin-bottom: 0px; } #slide-out-widget-area.slide-out-from-right-hover.open .inner{ opacity:1; transform:translateX(0px) } #slide-out-widget-area.slide-out-from-right-hover .bottom-meta-wrap{ opacity:0; transform:translateX(50px); -webkit-transition:-webkit-transform .45s cubic-bezier(.2,.75,.3,1) 0.35s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.35s; -ms-transition:transform .45s cubic-bezier(.2,.75,.3,1) 0.35s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.35s; transition:transform .45s cubic-bezier(.2,.75,.3,1) 0.35s,opacity .45s cubic-bezier(.2,.75,.3,1) 0.35s; margin-top:50px } #slide-out-widget-area.slide-out-from-right-hover.open .bottom-meta-wrap{ opacity:1; transform:translateX(0px) } #slide-out-widget-area.slide-out-from-right-hover .inner{ position:relative } #slide-out-widget-area.slide-out-from-right-hover .bottom-text{ margin-top:30px } #slide-out-widget-area.slide-out-from-right-hover .off-canvas-menu-container{ position:absolute; top:50%; width:100% } #slide-out-widget-area.slide-out-from-right-hover .off-canvas-social-links{ margin-top:30px } #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a{ font-size:24px; line-height:30px } body #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a{ word-break:break-word } body #slide-out-widget-area.slide-out-from-right-hover .inner .widget.widget_nav_menu li a, body #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a{ display:inline-block; position:relative; color:rgba(255,255,255,0.7); opacity:1; padding-left:0; padding-right:0 } #slide-out-widget-area.slide-out-from-right-hover .inner .widget.widget_nav_menu li.no-pointer-events, #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li.no-pointer-events{ pointer-events:none } #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li { margin: 5px 0; } #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a { -webkit-transition: color .2s; transition: color .2s; } #slide-out-widget-area.slide-out-from-right-hover .off-canvas-menu-container { min-width: 190px; } #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li a:hover { color: #fff; } .admin-bar #slide-out-widget-area.slide-out-from-right-hover{ padding-top:100px } #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .off-canvas-menu-container { position: relative; top: auto; } #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .menuwrapper, #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .off-canvas-menu-container { display: inline-block; } @media only screen and (min-width: 1000px) { #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .off-canvas-menu-container.mobile-only { display: none; } } #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .inner > div.off-canvas-menu-container { margin: auto 0; position: relative; -ms-transform: none!important; -webkit-transform: none!important; transform: none!important; } #slide-out-widget-area.slide-out-from-right-hover[data-dropdown-func="separate-dropdown-parent-link"] .inner{ display: -webkit-box; display: -webkit-flex; display: flex; height: auto; flex-wrap: wrap; } body #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li.subviewopen >a, body #slide-out-widget-area.slide-out-from-right-hover .inner .off-canvas-menu-container li.subview >a{ display:none } .admin-bar .slide-out-hover-icon-effect{ top:32px } .slide-out-hover-icon-effect .lines{ background-color:transparent } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines-button:after{ top:0px; -ms-transform:scale(0,1); transform:scale(0,1); -webkit-transform:scale(0,1); -ms-transform-origin:left; transform-origin:left; -webkit-transform-origin:left; border-radius:2px; background-color:#fff; opacity:1; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1) 0.07s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.07s!important; transition:transform .4s cubic-bezier(.2,.01,.16,1) 0.07s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.07s!important; } .slide-out-hover-icon-effect.slide-out-widget-area-toggle:not(.small) .lines-button:after{ top:0px } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines{ width:2em } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before{ -ms-transform:scale(0,1); transform:scale(0,1); -webkit-transform:scale(0,1); -ms-transform-origin:left; transform-origin:left; -webkit-transform-origin:left; border-radius:2px; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1) 0.12s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.12s!important; transition:transform .4s cubic-bezier(.2,.01,.16,1) 0.12s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.12s!important; } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:after{ -ms-transform:scale(0,1); transform:scale(0,1); -webkit-transform:scale(0,1); -ms-transform-origin:left; transform-origin:left; -webkit-transform-origin:left; border-radius:2px; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1) 0.02s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.02s!important; transition:transform .4s cubic-bezier(.2,.01,.16,1) 0.02s,opacity .4s cubic-bezier(.2,.01,.16,1) 0.02s!important; } #slide-out-widget-area.open .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines-button:after, #slide-out-widget-area.open .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before, #slide-out-widget-area.open .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:after { transition: transform 0s cubic-bezier(.2,.01,.16,1),opacity .4s cubic-bezier(.2,.01,.16,1) 0.02s!important; } body .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines:after, body .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines:before, body .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines-button:after{ height:2px!important } /*non minimal style*/ @media only screen and (min-width:1000px){ body .slide-out-hover-icon-effect.slide-out-widget-area-toggle:not(.small) .lines-button:after, body .slide-out-hover-icon-effect.slide-out-widget-area-toggle:not(.small) .lines:before, body .slide-out-hover-icon-effect.slide-out-widget-area-toggle:not(.small) .lines:after{ height:3px!important } } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .no-delay.lines-button:after{ transition:transform .4s cubic-bezier(.2,.01,.16,1) 0.05s!important; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1) 0.05s!important } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .no-delay .lines:before{ transition:transform .4s cubic-bezier(.2,.01,.16,1)!important; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1)!important } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .no-delay .lines:after{ transition:transform .4s cubic-bezier(.2,.01,.16,1) 0.1s !important; -webkit-transition:-webkit-transform .4s cubic-bezier(.2,.01,.16,1) 0.1s !important } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines-button:after{ width:2rem; background-color:#fff } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line.lines-button:after{ -ms-transform:scale(1,1); transform:scale(1,1); -webkit-transform:scale(1,1); background-color:#fff } .slide-out-hover-icon-effect .lines:after{ top:-8px } .slide-out-hover-icon-effect:not(.small) .lines:after{ top:-9px } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before{ top:8px } @media only screen and (min-width: 1000px) { .slide-out-hover-icon-effect.slide-out-widget-area-toggle:not(.small) .lines:before{ top:9px } } .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines-button:after{ width:1.4rem } .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .unhidden-line .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .unhidden-line .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .unhidden-line.lines-button:after{ width:1.4rem; height:2px; -ms-transform:scale(1,1); transform:scale(1,1); -webkit-transform:scale(1,1) } .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines{ width:1.4rem } .slide-out-hover-icon-effect.small .lines:after{ top:-6px } .slide-out-hover-icon-effect.slide-out-widget-area-toggle.small .lines:before{ top:6px } .admin-bar .slide-out-hover-icon-effect.small{ top:32px } @media only screen and (max-width:999px){ .slide-out-hover-icon-effect a{ width:auto } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines-button:after{ width:1.4rem } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line .lines:before, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line .lines:after, .slide-out-hover-icon-effect.slide-out-widget-area-toggle .unhidden-line.lines-button:after{ width:1.4rem; height:2px; -ms-transform:scale(1,1); transform:scale(1,1); -webkit-transform:scale(1,1) } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines-button:after{ top:0px } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines{ width:1.4rem } .slide-out-hover-icon-effect .lines:after, .slide-out-hover-icon-effect.small .lines:after, .slide-out-hover-icon-effect:not(.small) .lines:after{ top:-6px } .slide-out-hover-icon-effect.slide-out-widget-area-toggle .lines:before{ top:6px } .admin-bar .slide-out-hover-icon-effect{ top:32px } .slide-out-hover-icon-effect{ top:0px; right:28px } } .slide-out-hover-icon-effect{ position:fixed; right:30px; top:0px; z-index:10000; pointer-events:none } .slide-out-hover-icon-effect.small{ right:27px } .slide-out-hover-icon-effect a{ display:block; pointer-events:none } @media only screen and (min-width: 500px) { #slide-out-widget-area.slide-out-from-right-hover { width: 400px; -webkit-transform: translate3d(101%,0,0); -ms-transform: translate3d(101%,0,0); transform: translate3d(101%,0,0); } }