/* General styles for all menus */

.top-bar { height: 52px; background: #1f1d1d; position: relative; z-index: 2; }

.offCanvas { width: 300px; background: #fff; position: fixed; left: -300px; top: 0; }

/* Toggles */
.openOffCanvasBtn { width: 25px; background: none; border: none; outline: none; cursor: pointer; }
.openOffCanvasBtn span { width: 100%; height: 2px; background-color: #fff; display: block; margin: 0 auto 8px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; border-radius: 2px; }
.openOffCanvasBtn span:nth-child(2) { width: 15px; background-color: #ecaa00; margin-left: 0; }
.openOffCanvasBtn span:last-child { margin-bottom: 0; }
.openOffCanvasBtn:hover { cursor: pointer; }

.closeOffCanvasBtn { width: 20px; height: 20px; background: none; border: none; outline: none; color: #ecaa00; position: relative; cursor: pointer; right: 0; text-transform:uppercase; font-size: 14px; }
.closeOffCanvasBtn:before,
.closeOffCanvasBtn:after { height: 21px; width: 2px; position: absolute; left: 9px; top: 0; content: ' '; background-color: #ecaa00; }
.closeOffCanvasBtn:before { transform: rotate(45deg); }
.closeOffCanvasBtn:after { transform: rotate(-45deg); }

@media (max-width: 991px) {
  
 .offCanvas-active { overflow-y: hidden; }
 .offCanvas { left: -300px; height: 100vh; z-index: 1060; transition: all 0.3s; overflow-y: auto; }
 .offCanvas.active { left: 0; }

 .offCanvas .offcanvas-content { position: relative; height: calc(100% - 70px); overflow: hidden; }
 .offCanvas .offcanvas-content .main-site-menu { max-height: calc(100% - 250px); overflow-y: auto; transition: all 0.3s; position: relative; }
 
 .overlay { width: 100vw; height: 100vh; display: none; position: fixed; background: rgba(0, 0, 0, 0.7); z-index: 1050; opacity: 0; cursor: pointer; }
 .overlay.active { display: block; opacity: 1; }

 .mc_canvas { list-style: none; margin: 0; padding: 0; }
 .mc_canvas-item { position: relative; transition: all 0.3s; }
 .mc_canvas-item > .mc_toggle { display: block; position: relative; border-bottom: 1px solid #eaeaea; }
 .mc_canvas-item > .mc_toggle .mc_link { text-decoration: none; color: #1f1d1d; font-size: 16px; font-weight: bold; display: block; width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; }
 .mc_canvas-item > .mc_toggle .mc_link > span { padding-top: .75rem; padding-bottom: .75rem; display: block; }
 .mc_canvas-item > .mc_toggle .mc_carret-prev,
 .mc_canvas-item > .mc_toggle .mc_carret-next { width: 1rem; height: 100%; position: absolute; top: 0; background-repeat: no-repeat; cursor: pointer; }
 .mc_canvas-item > .mc_toggle .mc_carret-prev { left: 0; display: none; background-image:url('../images/menu-leftcarret.svg'); background-position: left center;  }
 .mc_canvas-item > .mc_toggle .mc_carret-next { right: 0; background-image:url('../images/menu-rightcarret.svg'); background-position: right center; }
 
 .mc_canvas-item.active > .mc_toggle .mc_carret-prev { display: block; }
 .mc_canvas-item.active > .mc_toggle .mc_carret-next { display: none; }
 .mc_canvas-item.active > .mc_panel > .mc_canvas > .mc_canvas-item > .mc_toggle .mc_carret-next { width: 100%; }
 
 .mc_canvas-item .mc_panel { width: 100%; display: none; transition: all 0.3s; }
  
 .mc_canvas.active > .mc_canvas-item { display: none; }
 .mc_canvas.active > .mc_canvas-item.active { display: block; }
 .mc_canvas.active > .mc_canvas-item.active > .mc_panel { display: block; }
 .mc_canvas.active > .mc_canvas-item.active > .mc_toggle.active { display: none; }
 
 .menu-parent > .mc_canvas-item > .mc_toggle .mc_link { width: calc(100% - 1rem); margin-right: 1rem; margin-left: 0; }
 .menu-parent > .mc_canvas-item.active > .mc_toggle .mc_link { margin-left: 1rem; }
 
}

@media screen and (min-width: 992px){

 .top-bar { height: 70px; }

 .mc-megamenu { position: relative; z-index: 1; }
 .mc-megamenu-panels,
 .mc-megamenu-panels .mc-megamenu-panel-wrap { position: relative; }
 
 /* Panel Mega Menu */
 .mc-megamenu-panels .mc-megamenu-panel { width: 100%; max-height: 0; opacity: 0; background: #f5f5f5; border-bottom: 1px solid #deddde; position: absolute; left: 0; top: 0; overflow: hidden; z-index: 999; }
 .mc-megamenu-panels .mc-megamenu-panel.active { max-height: 1000px; opacity: 1;  }

 .mc-megamenu-triggers { background: #1f1d1d; padding: .5rem; }

 .mc-megamenu-parents .menu-parent { width: 100%; text-transform: uppercase; padding: 0; margin: 0; }
 .mc-megamenu-parents .menu-parent > li { display: inline-block; }
 .mc-megamenu-parents .menu-parent > li a { padding: 0 1.5rem; color: #fff; text-decoration: none; font-weight: 400; }
 .mc-megamenu-parents .menu-parent > li.active-hover a { color: #ecaa00; }

 .mm-item > .mc_item { list-style: none; }
 .mm-item > .mc_item a { color: #35353b; font-weight: 400; font-size: 16px; text-decoration: none; }
 .mm-item > .mc_item .menu-children { list-style: none; margin: 0; padding: .5rem 0; }
 .mm-item > .mc_item .menu-children > li { line-height: 1.5; }
 .mm-item > .mc_item .menu-children > li a { color: #7f7f7f; text-decoration: none; font-size: 14px; }
 .mm-item > .mc_item.mc_col-item .menu-children { webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

 .mc_icon_item { padding-top: 1rem; text-align: center; }
 .mc_icon_item .menu-children { text-align: center; }
 .mc_icon_item .menu-children > li { display: inline-block; text-align: center; margin: 0 1rem; }
 .mc_icon_item .menu-children > li a > i.mc_icon { width: 80px; height: 75px; background-image:url('../images/menu-icons-linked.svg'); background-repeat: no-repeat !important;  background-position-y: 0; -webkit-background-size: 650px !important; -moz-background-size: 650px !important; background-size: 650px !important; display: inline-block; }
 .mc_icon_item .menu-children > li a > span { display: block; }
 .mc_icon_item .menu-children > li a:hover > span { color: #ecaa00; }

 /* IE 10 */
 _:-ms-input-placeholder, :root .mc_icon_item .menu-children > li a > i.mc_icon { background-position-y: 35.75%; }

 /* IE 11 */
 _:-ms-fullscreen, :root .mc_icon_item .menu-children > li a > i.mc_icon { background-position-y: 35.75%; }

 /* Specifics */
 .mc_icon_item .menu-children > li.mc_ballpointpen a > i.mc_icon { background-position-x: 0; }
 .mc_icon_item .menu-children > li.mc_rollerballpen a > i.mc_icon { background-position-x: 14.25%; }
 .mc_icon_item .menu-children > li.mc_fountainpen a > i.mc_icon { background-position-x: 28.5%; }
 .mc_icon_item .menu-children > li.mc_pensets a > i.mc_icon { background-position-x: 42.75%; }
 .mc_icon_item .menu-children > li.mc_pencils a > i.mc_icon { background-position-x: 57%; }
 .mc_icon_item .menu-children > li.mc_multifunctionpens a > i.mc_icon { background-position-x: 71.5%; }
 .mc_icon_item .menu-children > li.mc_giftsets a > i.mc_icon { background-position-x: 85.75%; }
 .mc_icon_item .menu-children > li.mc_porouspoint a > i.mc_icon { background-position-x: 100%; }
 
 .mc_icon_item .menu-children > li.mc_ballpointpen a:hover > i.mc_icon { background-position-x: 0; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_rollerballpen a:hover > i.mc_icon { background-position-x: 14.25%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_fountainpen a:hover > i.mc_icon { background-position-x: 28.5%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_pensets a:hover > i.mc_icon { background-position-x: 42.75%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_pencils a:hover > i.mc_icon { background-position-x: 57%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_multifunctionpens a:hover > i.mc_icon { background-position-x: 71.5%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_giftsets a:hover > i.mc_icon { background-position-x: 85.75%; background-position-y: 50%; }
 .mc_icon_item .menu-children > li.mc_porouspoint a:hover > i.mc_icon { background-position-x: 100%; background-position-y: 50%; }

 /* Static Buttons */
 .mc-btn-static,
 .mc-btn-static:hover,
 .mc-btn-static:focus { background: transparent; border: 2px solid #ecaa00; color: #ecaa00; text-decoration: none; padding: .75rem 2rem; display: inline-block; }
 .mc-btn-static-darker,
 .mc-btn-static-darker:hover,
 .mc-btn-static-darker:focus { background: #1a1919; border: 2px solid #1a1919; color: #fff; text-decoration: none; padding: .75rem 2rem; display: inline-block; }

}

@media screen and (min-width: 1200px){

 .top-bar { height: 80px; }

 /* Panel Mega Menu */
 .mm-item > .mc_item a { font-size: 17px; }
 .mm-item > .mc_item .menu-children { padding: .75rem 0; }
 .mm-item > .mc_item .menu-children > li { line-height: 1.65; }
 .mm-item > .mc_item .menu-children > li a { font-size: 15px; }
 
 .mc_icon_item .menu-children > li a > i.mc_icon { width: 95px; height: 95px; -webkit-background-size: 800px !important; -moz-background-size: 800px !important; background-size: 800px !important;  }

}

@media screen and (min-width: 1600px){

 /* Panel Mega Menu */
 
 .mm-item > .mc_item a { font-size: 18px; }
 .mm-item > .mc_item .menu-children { padding: 1rem 0; }
 .mm-item > .mc_item .menu-children > li { line-height: 1.9; }
 .mm-item > .mc_item .menu-children > li  a { font-size: 16px; }
 
}