.eael-offcanvas-content { position: fixed; top: 0; left: 0; z-index: 100; visibility: hidden; width: 300px; height: 100%; overflow-y: auto; background: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .eael-offcanvas-content.eael-offcanvas-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .eael-offcanvas-content-slide .eael-offcanvas-container { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .eael-offcanvas-content-slide.eael-offcanvas-content-open .eael-offcanvas-content.eael-offcanvas-content-visible { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .eael-offcanvas-content .eael-offcanvas-close { position: relative; cursor: pointer; float: right; top: 20px; right: 20px; line-height: 1; z-index: 1; font-style: normal; font-family: Helvetica, Arial, sans-serif; font-weight: 100; font-size: 24px; } html.eael-offcanvas-content-widget body { height: 100%; } .eael-offcanvas-toggle { cursor: pointer; } .eael-offcanvas-container { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .eael-offcanvas-container:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .eael-offcanvas-content-open .eael-offcanvas-content-visible + .eael-offcanvas-container:after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 100001; } .eael-offcanvas-content.eael-offcanvas-content-right { left: auto; right: 0; } .eael-offcanvas-content .eael-offcanvas-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; float: left; width: 100%; height: unset; } .eael-offcanvas-content .eael-offcanvas-header .eael-offcanvas-title { padding: 5px 20px; } .eael-offcanvas-content .eael-offcanvas-close { position: relative; cursor: pointer; float: right; top: 20px; right: 0; line-height: 1; z-index: 1; font-style: normal; font-family: Helvetica, Arial, sans-serif; font-weight: 100; font-size: 24px; padding: 0 20px 20px; } .eael-offcanvas-content .eael-offcanvas-body { float: left; padding-left: 20px; padding-right: 20px; width: 100%; } .eael-offcanvas-toggle-wrap .eael-offcanvas-toggle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .eael-offcanvas-icon-before .eael-offcanvas-toggle-icon { margin-right: 5px; } .eael-offcanvas-icon-after .eael-offcanvas-toggle-icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-left: 5px; } .eael-offcanvas-content.eael-offcanvas-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .eael-offcanvas-content.eael-offcanvas-slide.eael-offcanvas-content-right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .eael-offcanvas-content.eael-offcanvas-reveal { z-index: 1; } .eael-offcanvas-content-slide.eael-offcanvas-content-open .eael-offcanvas-content.eael-offcanvas-content-visible { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .eael-offcanvas-content-left.eael-offcanvas-push { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .eael-offcanvas-content-left.eael-offcanvas-push.eael-offcanvas-content-visible { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .eael-offcanvas-content-right.eael-offcanvas-push { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .eael-offcanvas-content-right.eael-offcanvas-push.eael-offcanvas-content-visible { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .eael-offcanvas-content-push.eael-offcanvas-content-open .eael-offcanvas-content.eael-offcanvas-content-visible { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .eael-offcanvas-content-open.eael-offcanvas-content-left .eael-offcanvas-container { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .eael-offcanvas-content-open.eael-offcanvas-content-right .eael-offcanvas-container { -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); } .eael-offcanvas-content-reveal .eael-offcanvas-container { background: #fff; overflow: hidden; } .eael-offcanvas-content-reveal.eael-offcanvas-content-open { position: relative; } .eael-offcanvas-content-reveal.eael-offcanvas-content-open .eael-offcanvas-content.eael-offcanvas-content-visible { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .eael-offcanvas-content-left.eael-offcanvas-slide-along { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .eael-offcanvas-content-right.eael-offcanvas-slide-along { z-index: 1; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .eael-offcanvas-content-slide-along .eael-offcanvas-container { background: #fff; overflow: hidden; } .eael-offcanvas-content-slide-along.eael-offcanvas-content-open .eael-offcanvas-content.eael-offcanvas-content-visible { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .eael-offcanvas-custom-widget ul { padding: 0 0 0 30px; } .eael-offcanvas-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .woocommerce .select2-container .select2-dropdown, .woocommerce-page .select2-container .select2-dropdown { z-index: 999 !important; }