.offcanvas-mask{display:none;position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background:rgba(0,0,0,0.6)}

/* CLOSE BUTTON */
.svg-close{position:absolute;top:0;right:0;width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26px' height='26px'%3E%3Cpath fill-rule='evenodd' fill='rgb%28255,255,255%29' d='M15.471,12.500 L24.384,3.587 C25.204,2.767 25.204,1.437 24.384,0.616 C23.563,-0.204 22.233,-0.204 21.413,0.616 L12.500,9.529 L3.587,0.616 C2.767,-0.204 1.437,-0.204 0.616,0.616 C-0.204,1.437 -0.204,2.767 0.616,3.587 L9.529,12.500 L0.616,21.413 C-0.204,22.233 -0.204,23.563 0.616,24.384 C1.437,25.204 2.767,25.204 3.587,24.384 L12.500,15.471 L21.413,24.384 C22.233,25.204 23.563,25.204 24.384,24.384 C25.204,23.563 25.204,22.233 24.384,21.413 L15.471,12.500 Z'/%3E%3C/svg%3E") no-repeat center center;background-size:70%;cursor:pointer}

/* MENU */
.offcanvas-sidebar{position:absolute;top:0;width:300px;min-height:100%;max-height:9999px;padding:40px 20px 20px 20px;overflow:hidden;background-color:var(--blue);transform:translate3d(-320px,0,0);transition:.4s;transition-timing-function:cubic-bezier(0.7,0,0.3,1);z-index:1000001}
.offcanvas-sidebar .title{color:#fff;text-align:center;font-size:20px;background:rgba(0,0,0,0.1);padding:8px;margin-bottom:15px}
.offcanvas-sidebar .menu{overflow-y:hidden;height:100%;background:rgba(0,0,0,0.1);transform:translate3d(0,100%,0);transition:.4s;transition-timing-function:cubic-bezier(0.7,0,0.3,1)}
.offcanvas-sidebar .menu li{display:block;transform:translate3d(0,500px,0);transition:.4s;transition-timing-function:cubic-bezier(0.7,0,0.3,1)}
.offcanvas-sidebar .menu li:nth-child(2){transform:translate3d(0,1000px,0)}
.offcanvas-sidebar .menu li:nth-child(3){transform:translate3d(0,1500px,0)}
.offcanvas-sidebar .menu li:nth-child(4){transform:translate3d(0,2000px,0)}
.offcanvas-sidebar .menu li:nth-child(5){transform:translate3d(0,2500px,0)}
.offcanvas-sidebar .menu li:nth-child(6){transform:translate3d(0,3000px,0)}
.offcanvas-sidebar .menu li:nth-child(7){transform:translate3d(0,3500px,0)}
.offcanvas-sidebar .menu li:nth-child(8){transform:translate3d(0,4000px,0)}
.offcanvas-sidebar .menu li:nth-child(9){transform:translate3d(0,4500px,0)}
.offcanvas-sidebar .menu li:nth-child(10){transform:translate3d(0,5000px,0)}
.offcanvas-sidebar .menu li:nth-child(11){transform:translate3d(0,5500px,0)}
.offcanvas-sidebar .menu li:nth-child(12){transform:translate3d(0,6000px,0)}
.offcanvas-sidebar .menu li:nth-child(13){transform:translate3d(0,6500px,0)}
.offcanvas-sidebar .menu li:nth-child(14){transform:translate3d(0,7000px,0)}
.offcanvas-sidebar .menu li:nth-child(15){transform:translate3d(0,7500px,0)}

/* SHOWN MENU */
.show-menu .offcanvas-sidebar{transform:translate3d(0px,0,0);transition:.4s}
.show-menu .offcanvas-sidebar .menu,.show-menu .offcanvas-sidebar .menu li{transform:translate3d(0,0,0);transition:.8s;transition-timing-function:cubic-bezier(0.7,0,0.3,1)}
.show-menu .offcanvas-sidebar .menu .dropdown-menu.show{display:block}

/* OFFCANVAS MENU STYLE */
.offcanvas-sidebar .menu li > a{padding:8px 0;color:#fff;text-align:center}
.offcanvas-sidebar .menu li:hover > a,.offcanvas-sidebar .menu .dropdown-item:hover,.offcanvas-sidebar .menu .dropdown-item.active{background-color:#fff;color:var(--green)}
.offcanvas-sidebar .menu .dropdown-menu{border:0;background-color:initial;position:relative !important;float:none;display:none}
.offcanvas-sidebar .menu .dropdown-item{color:#fff;text-align:center;white-space:normal}