/*
You can adjust the menu bar color or the line width vars
*/
.spinner-master {
  position: relative;
  margin: 50px auto;
  height: calc(5px * 10 );
  width: calc(5px * 10 );
}
.spinner-master * {
  transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master input[type="checkbox"] {
  display: none;
}
.spinner-master label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 10px;
  left: 0;
}
.spinner-master .spinner1,
.spinner-master .spinner2,
.spinner-master .spinner3,
.spinner-master .spinner4 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: calc(5px * 1.3 );
}
.spinner-master .horizontal {
  position: relative;
  float: left;
  margin-top: calc(5px * 1.3 );
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .horizontal, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .horizontal, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .horizontal, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .horizontal {
  opacity: 0;
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .diagonal.part-2, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-2, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-2, .spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .diagonal.part-2 {
  margin-top: calc(-1 * ( 5px + (5px  * 2.2 ) ));
}


/*Style two*/
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
}




/* Common styles of menus */
#dl-menu-cats{ left: 50%; margin-left: 2px; z-index:999; }

li.dl-back a{ background:#28a1bf !important; color:#FFF !important;}

.dl-menuwrapper { width: 100%;/* position: absolute;*/ position:relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; z-index: 20000; }
.dl-menuwrapper:first-child { margin-right: 100px; }
.dl-menuwrapper button { color: #fff; text-transform: uppercase; font-size: 16px; letter-spacing: 2px; border: none; height: 48px; overflow: hidden; position: relative; cursor: pointer; outline: none; text-align: left; padding-left: 5px; }
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul { background: #FFF!important; }
.dl-menuwrapper button:after { content: ''; position: absolute; width: 24px; height: 2px; background: #0CC; top: 15px; right: 12px; box-shadow: 0 8px 0 #0CC, 0 16px 0 #0CC; }
.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.dl-menuwrapper li { position: relative; background: #ccc!important; border-bottom: 1px inset #333!important; }
.dl-menuwrapper li a { display: block; position: relative; padding:17px 10px; font-size: 21px; line-height: 20px; 
font-weight: 300; color: #fff; outline: none; text-transform:uppercase;  }
.no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); }
.dl-menuwrapper li.dl-back > a { padding-left: 30px; background: rgba(0,0,0,0.1); }
.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after { position: absolute; top: 0; line-height: 50px; speak: none; color:#FFF; top:2px; -webkit-font-smoothing: antialiased; content: ">"; color: #fff; }
.dl-menuwrapper li.dl-back:after { left: 10px; color: rgba(212,204,198,0.3); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
.dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); }
.dl-menuwrapper .dl-menu { margin: 0px; position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;  top: 118px;}
.dl-menuwrapper .dl-menu.dl-menu-toggle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

.dl-menuwrapper li .dl-submenu { display: none; }
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a { display: none ; z-index:999; }
.dl-menu.dl-subview li.dl-subview > a:hover { text-decoration:none;}
.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; z-index:999; }
.dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 50px; left: 0; margin: 0; }

.dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; -moz-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; }

@keyframes MenuAnimOut1 { 50% { 	transform: translateZ(-250px) rotateY(30deg); } 75% { transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; }}
@keyframes MenuAnimIn1 { 0% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { transform: translateZ(0px) rotateY(0deg); opacity: 1; }}
@keyframes SubMenuAnimIn1 { 0% { transform: translateX(50%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; }}
@keyframes SubMenuAnimOut1 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(50%); opacity: 0; }}

@-webkit-keyframes MenuAnimOut1 { 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }}
@-webkit-keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; }}
@-webkit-keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; }}
@-webkit-keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); opacity: 0; }}

@-moz-keyframes MenuAnimOut1 { 50% { -moz-transform: translateZ(-250px) rotateY(30deg); } 75% { -moz-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }}
@-moz-keyframes MenuAnimIn1 { 0% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -moz-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -moz-transform: translateZ(0px) rotateY(0deg); opacity: 1; }}
@-moz-keyframes SubMenuAnimIn1 { 0% { -moz-transform: translateX(50%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; }}
@-moz-keyframes SubMenuAnimOut1 { 0% { -moz-transform: translateX(0%); opacity: 1; } 100% { -moz-transform: translateX(50%); opacity: 0; }}

.dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; -moz-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; -moz-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; }
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; -moz-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; }

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; }
.no-js .dl-menuwrapper li .dl-submenu { display: block; }
.no-js .dl-menuwrapper li.dl-back { display: none; }
.no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1); }
.no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; }
.dl-menuwrapper button { background: #FFF; position: absolute; width:48px;  right: 0; top: 20px; }
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul { background:#999; }
.dl-menuwrapper li a:hover{text-decoration:none;}