#canvas-content { /*-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);	transition: transform .5s ease-in-out; */ }

#canvas-content.open { /*-webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px);*/ }

#canvas-menu { position: fixed; height: calc(100% - 115px); transition: transform .5s ease-in-out; color: #000; background-color: white; overflow-y: hidden; }

#canvas-menu.side { top: 0; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); z-index: 3; }

#canvas-menu.side.open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); overflow-y: scroll; overflow-x: hidden; }

#canvas-menu.top { top: 0; left: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); width: 100%; }

#canvas-menu.top.open { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); overflow-y: scroll; overflow-x: hidden; }

#canvas-menu.top #navbar-mobile .close-canvas { display: none; }

#canvas-menu #navbar-canvas { height: calc(100% - 115px); overflow-y: scroll; padding: 40px 120px; }

#canvas-menu #navbar-canvas .close-canvas { height: 41px; width: 100%; cursor: pointer; position: absolute; left: 20px; top: 24px; }

#canvas-menu #navbar-canvas .close-canvas:before, #canvas-menu #navbar-canvas .close-canvas:after { content: ""; display: block; position: absolute; top: 30px; left: 20px; width: 36px; height: 4px; background-color: #FFF; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: background-color .5s ease-in-out; border-radius: 2px; }

#canvas-menu #navbar-canvas .close-canvas:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

#canvas-menu #navbar-canvas .close-canvas:hover:before, #canvas-menu #navbar-canvas .close-canvas:hover:after, #canvas-menu #navbar-canvas .close-canvas:focus:before, #canvas-menu #navbar-canvas .close-canvas:focus:after { background-color: #CCC; transition: background-color 0.25s ease-in-out; }

#canvas-menu #navbar-canvas .navbar-nav { padding-left: 0; list-style: none; margin-top: 60px; width: 100%; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item { min-width: 450px; position: relative; cursor: pointer; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown .dropdown-toggle:after { position: absolute; right: 10px; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item .nav-link { display: block; font-size: 32px; color: #000; font-weight: normal; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding: 0 10px 0 40px; line-height: 70px; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item > .dropdown-menu { list-style: none; padding-left: 0; display: none; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item > .dropdown-menu.open { display: block; }

#canvas-menu #navbar-canvas .navbar-nav .nav-item > .dropdown-menu .nav-link { font-size: 24px; line-height: 60px; }

@media (min-width: 992px) and (max-width: 1199px) { #canvas-menu #navbar-canvas .navbar-nav .nav-item { min-width: 350px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown:before { top: 20px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown.open:before { top: 27px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item .nav-link { font-size: 1.8rem; line-height: 4rem; } }

@media (min-width: 768px) and (max-width: 991px) { #canvas-menu #navbar-canvas { padding: 80px 60px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item { min-width: 350px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown:before { top: 20px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown.open:before { top: 27px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item .nav-link { font-size: 28px; line-height: 60px; } }

@media (max-width: 767px) { #canvas-menu { margin-top: 60px; height: calc(100% - 60px); }
  #canvas-menu #navbar-canvas { height: calc(100% - 60px); }
  #canvas-menu #navbar-canvas .close-canvas { top: 15px; }
  #canvas-menu #navbar-canvas .close-canvas:before, #canvas-menu #navbar-canvas .close-canvas:after { width: 26px; }
  #canvas-menu #navbar-canvas .navbar-nav { margin-top: 40px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item { min-width: 300px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown:before { top: 14px; width: 14px; height: 14px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item.dropdown i.open-dropdown.open:before { top: 20px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item .nav-link { font-size: 24px; line-height: 60px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item > .dropdown-menu .nav-link { font-size: 20px; line-height: 42px; } }

@media (max-width: 575px) { #canvas-menu #navbar-canvas { padding: 40px 10px 40px 30px; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item { min-width: unset; }
  #canvas-menu #navbar-canvas .navbar-nav .nav-item .nav-link { padding-left: 30px; } }