.hamburglar{-webkit-transform:scale(1);transform:scale(1);position:relative;width:40px;height:40px;background-color:#d26c22;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0;margin:11px 0}
.path-burger{position:absolute;top:0;left:0;height:38px;width:38px;mask:url(/template/images/svg/burgermenu_mask.svg);-webkit-mask:url(/template/images/svg/burgermenu_mask.svg);-webkit-mask-box-image:url(/template/images/svg/burgermenu_mask.svg)}
.animate-path{position:absolute;top:0;left:0;width:40px;height:40px}
.path-rotation{height:34px;width:34px;margin:34px 34px 0 0;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 0;transform-origin:100% 0}
.path-rotation:before{content:"";display:block;width:30px;height:34px;margin:0 4px 0 0;background:#fff}
@-webkit-keyframes rotate-out {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes rotate-out {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes rotate-in {
0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes rotate-in {
0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
.hamburglar.is-open .path{-webkit-animation:dash-in .6s linear normal;animation:dash-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-open .animate-path{-webkit-animation:rotate-in .6s linear normal;animation:rotate-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .path{-webkit-animation:dash-out .6s linear normal;animation:dash-out .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .animate-path{-webkit-animation:rotate-out .6s linear normal;animation:rotate-out .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.path{stroke-dasharray:240;stroke-dashoffset:240;stroke-linejoin:round}
@-webkit-keyframes dash-in {
0%{stroke-dashoffset:240}
40%{stroke-dashoffset:240}
100%{stroke-dashoffset:0}
}
@keyframes dash-in {
0%{stroke-dashoffset:240}
40%{stroke-dashoffset:240}
100%{stroke-dashoffset:0}
}
@-webkit-keyframes dash-out {
0%{stroke-dashoffset:0}
40%{stroke-dashoffset:240}
100%{stroke-dashoffset:240}
}
@keyframes dash-out {
0%{stroke-dashoffset:0}
40%{stroke-dashoffset:240}
100%{stroke-dashoffset:240}
}
.burger-icon{position:absolute;padding:0 0 0 6px;height:25px;width:25px;transform:translateY(-14px)}
.burger-container{position:relative;height:28px;width:30px}
.burger-bun-top,.burger-bun-bot,.burger-filling{position:absolute;display:block;height:4px;width:25px;border-radius:2px;background:#fff}
.burger-bun-top{top:0;-webkit-transform-origin:34px 2px;transform-origin:28px 2px}
.burger-bun-bot{bottom:0;-webkit-transform-origin:34px 2px;transform-origin:30px 2px}
.burger-filling{top:12px}
.hamburglar.is-open .burger-bun-top{-webkit-animation:bun-top-out .6s linear normal;animation:bun-top-out .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-open .burger-bun-bot{-webkit-animation:bun-bot-out .6s linear normal;animation:bun-bot-out .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .burger-bun-top{-webkit-animation:bun-top-in .6s linear normal;animation:bun-top-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .burger-bun-bot{-webkit-animation:bun-bot-in .6s linear normal;animation:bun-bot-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .burger-bun-top,.hamburglar.is-closed .burger-bun-bot,.hamburglar.is-closed .burger-filling{height:3px}
.hamburglar.is-closed .burger-bun-top{top:3px}
.hamburglar.is-closed .burger-bun-bot{bottom:4px}
@-webkit-keyframes bun-top-out {
0%{left:0;top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
20%{left:0;top:0;-webkit-transform:rotate(15deg);transform:rotate(15deg)}
80%{left:-5px;top:0;-webkit-transform:rotate(-60deg);transform:rotate(-60deg)}
100%{left:-5px;top:1px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
}
@keyframes bun-top-out {
0%{left:0;top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
20%{left:0;top:0;-webkit-transform:rotate(15deg);transform:rotate(15deg)}
80%{left:-5px;top:0;-webkit-transform:rotate(-60deg);transform:rotate(-60deg)}
100%{left:-5px;top:1px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
}
@-webkit-keyframes bun-bot-out {
0%{left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
20%{left:0;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
80%{left:-5px;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
100%{left:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
}
@keyframes bun-bot-out {
0%{left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
20%{left:0;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
80%{left:-5px;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
100%{left:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
}
@-webkit-keyframes bun-top-in {
0%{left:-5px;bot:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
20%{left:-5px;bot:0;-webkit-transform:rotate(-60deg);transform:rotate(-60deg)}
80%{left:0;bot:0;-webkit-transform:rotate(15deg);transform:rotate(15deg)}
100%{left:0;bot:1px;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes bun-top-in {
0%{left:-5px;bot:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
20%{left:-5px;bot:0;-webkit-transform:rotate(-60deg);transform:rotate(-60deg)}
80%{left:0;bot:0;-webkit-transform:rotate(15deg);transform:rotate(15deg)}
100%{left:0;bot:1px;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@-webkit-keyframes bun-bot-in {
0%{left:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
20%{left:-5px;bot:0;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
80%{left:0;bot:0;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
100%{left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes bun-bot-in {
0%{left:-5px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
20%{left:-5px;bot:0;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
80%{left:0;bot:0;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
100%{left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
.hamburglar.is-open .burger-filling{-webkit-animation:burger-fill-out .6s linear normal;animation:burger-fill-out .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.hamburglar.is-closed .burger-filling{-webkit-animation:burger-fill-in .6s linear normal;animation:burger-fill-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
@-webkit-keyframes burger-fill-in {
0%{width:0;left:36px}
40%{width:0;left:40px}
80%{width:36px;left:-6px}
100%{width:30px;left:0}
}
@keyframes burger-fill-in {
0%{width:0;left:36px}
40%{width:0;left:40px}
80%{width:36px;left:-6px}
100%{width:25px;left:0}
}
@-webkit-keyframes burger-fill-out {
0%{width:36px;left:0}
20%{width:42px;left:-6px}
40%{width:0;left:40px}
100%{width:0;left:36px}
}
@keyframes burger-fill-out {
0%{width:36px;left:0}
20%{width:42px;left:-6px}
40%{width:0;left:40px}
100%{width:0;left:36px}
}