.show-on-small-mobile {
	display: none;
}

.hide-on-desktop {
	display: none;
}

@media(max-width: 1024px) {
	.supportofficeboxDotNet {
		margin: 20px -60px 20px -20px;
	}

	#page-content .wrapper {
		padding-right: 80px;
	}

	.sm-padding {
		padding-left: 20px;
		padding-right: 20px;
	}

	ul.nav li .main-header-li,
	ul.nav li .main-subheader-li,
	ul.nav li .section .first {
		display: block;
	}

	ul.nav li .main-header-li.section,
	ul.nav li .main-subheader-li.section {
		display: none;
	}
}

@media(max-width: 980px) {

	.wrapper {
		padding: 0 20px;
	}

	ul.nav li a {
		padding: 14px;
	}

	#page-content .wrapper,
	.home #page-content .wrapper {
		padding: 0 20px;
	}
	
	/*.iframepage #page-content .wrapper .page-padding {
		padding: 20px 20px 10px;
	}*/
}


@media(max-width: 900px) {
	/*ul.nav li a {
		padding: 14px 8px;
		font-size: 14px;
	}*/

	#page-content {
		padding: 20px 0;
	}

	.site-body h1,
	.article-wrapper h2, 
	.mce_h1 .mceText, 
	.mceListBoxMenu H1 {
		margin-bottom: 20px;
	}

	.links-downloads .section {
		margin-bottom: 0;
	}

	.article-wrapper h2 {
		font-size: 32px;
	}

	.page-intro {
		margin-bottom: 50px;
	}

	.article-wrapper li {
		padding: 20px 0;
	}

	.hide-on-mobile {
		display: none;
	}

	.hide-on-desktop {
		display: block;
	}
	/*header*/
	#header {
		height: 80px;
	}

	#header .logo {
		max-height: 65px;
	}

	#search {
		float: none;
	}

	#SearchForm {
		margin: 0;
	}

	#navigation {
		z-index: 13100;
	}

	ul.nav {
		display: block;
		display: none;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	ul.nav li {
		float: none;
		width: 100%;
		background: none !important;
		text-align: left;
	}

	ul.nav li.mobile-search {
		display: block;
		margin: 14px 0;
	}

	ul.nav li.mobile-search input {
		border: 1px solid #fff;
		color: #fff;
		vertical-align: top;
	}

	ul.nav li.mobile-search input.data-placeholder-on {
		color: #fff;
	}

	ul.nav li.mobile-search input[type=submit] {
		font-size: 14px;
		background: #f7941d;
		border: 1px solid #f7941d;
	}

	ul.nav li .sub {
		position: static;
		background: #6d6f71;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}

	ul.nav li .sub li {
		padding-left: 20px;
	}

	ul.nav li .sub li a {
		border: none;
	}

	#navigation .current {
		display: block;
		text-align: center;
	}

	#navigation .current-page-text a {
		color: #fff;
	}

	#navigation .current-page-text a:hover,
	#navigation .current-page-text a:focus {
		color: #f7941d;
	}

	/*ul.nav li a {
		padding: 10px 0;
	}*/

	/*ul.nav li ul li a {
		padding-left: 0px;
		padding-right: 0px;
	}*/

	ul.nav li ul li ul.flyout {
		position: static;
		padding-left: 20px;
		background-color: #6d6f71;
	}

	ul.nav li:hover ul,
	ul.nav li ul li:hover ul.flyout {
		display: none;
	}

	ul.nav li ul li ul.flyout {
		border-left: none;
	}

	ul.nav > li:hover a,
	ul.nav > li.clicked a {
		color: #fff;
	}


	ul.nav > li:hover .sub li:hover a,
	ul.nav > li.clicked .sub li.clicked a,
	ul.nav > li:hover .sub li:hover .flyout li:hover a,
	ul.nav > li.clicked .sub li.clicked .flyout li.clicked a {
		/*color: #f58227;*/
		background: none;
		color: #fff;
	}

	ul.flyout, ul.sub {
		border: none;
	}

	ul.nav li a.active {
		background: none;
	}

	/*.page-padding {
		padding: 0;
	}*/

	.salesAndLeads td {
		padding: 12px;
	}

	.tableHeader {
		padding: 6px;
		line-height: 18px;
	}

	.tableHeader span {
		height: 24px;
	}
	.third-col {
		width:50%
	}
	
	.tiles li h2,
	.tiles li.middle h2 {
		font-size: 16px;
		line-height: 100%;
		padding-top: 8px;
	}

	.add-new-staff .input {
		width: 70%;
	}
}

@media(max-width: 767px) {
	.loginforms form {
		width: 100%;
	}

	.links-downloads.table-layout ul li:nth-child(3n+2),
	.links-downloads.table-layout ul li {
		min-height: 80px;
	}

	/*.site-body h1, .mce_h1 .mceText, .mceListBoxMenu H1 {
		font-size: 26px;
	}*/

	#calendar,
	.calendar-filters {
		width: 100%;
		margin-bottom: 10px;
	}


	.emailContainer ul.enquiryList li {
		width: 100%;
	}

	.emailContainer ul.enquiryList li.odd {
		background-color: #fff;
	}

	.emailContainer ul.enquiryList li.even {
		background-color: #e8e8e8;
	}

	.enquiryItem {
		font-size: 12px;
	}

	#EnquiryListFilter select {
		width: 100%;
		margin-top: 5px;
	}

	ul.reportList li.report .statistics .stat {
		min-height: 106px;
		position: relative;
	}

	ul.reportList li.report .statistics .stat .svyBarGraph {
		position: absolute;
		bottom: 0;
	}

	ul.reportList li.report .statistics .stat .big-number {
		font-size: 22px;
	}

	ul.reportList li.report .statistics .stat .big-number .nobr {
		font-size: 10px;
	}


	ul.reportList li.report .statistics .stat .description {
		font-size: 12px;
		line-height: 120%;
	}

	#enquiry-notification, #chat-box, #forex, #usefullinks, #weather {
		top: 144px;
	}

	#forex {
		top: 224px;
	}

	#usefullinks {
		top: 204px;
	}

	#weather {
		top: 264px;
	}
	#enquiry-notification {
			top: 304px;
	}

	.site-body h2.section {
		min-height: 40px;
		font-size: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#chat-box .online-num {
		margin-top: -2px;
	}

	h2.section span {
		height: 20px;
	}

	#enquiry-notification .actionbuttons .action, #chat-box .actionbuttons .action, #forex .actionbuttons .action, #usefullinks .actionbuttons .action, #weather .actionbuttons .action {
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: scale(0.8, 0.8);
		-moz-transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-o-transform: scale(0.8, 0.8);
		transform: scale(0.8, 0.8);
	}



	/*.tableHeader {
		padding: 4px 6px;
	}

	.salesAndLeads td {
		padding: 4px 6px;
	}*/

	#forex input[type=text] {
		padding: 4px;
	}

	input, .input, select, .select, textarea {
		padding: 4px;
	}

	input[type=checkbox] {
		vertical-align: top;
	}

	#converter ul.currency {
		padding: 0 8px;
	}

	input[type=submit],
	input[type=button],
	.btn {
		font-size: 12px;
		height: 28px;
		padding: 4px 15px;
	}
	#chat-box .btn.post {
		height: 40px;
		font-size: 16px;
		padding:10px 15px;
	}

	#usefullinks .section .actionbuttons .closer {
		height: 42px;
	}

	#EnquiryCustomerSearch .go-btn {
		right: 5px;
	}

	.manageprofile ul li, .events ul li {
		width: 100%;
	}

	.tiles li,
	.tiles li.middle {
		width: 48%;
		margin: 0 1% 1%;
		float: left;
	}
}

@media(max-width: 660px) {

	.mobile-padding {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.search .article-wrapper {
		width: 100%;
		float: none;
		clear: both;
	}

	.search .links-downloads {
		width: 100%;
		margin: 20px 0 0;
		clear: both;
		float: none;
	}

	.search .links-downloads li {
		width: 50%;
		float: left;
	}

	.links-downloads.table-layout ul li,
	.links-downloads.table-layout ul li:nth-child(3n+2) {
		/*min-height: 64px;*/
		width: 50%;
	}

	.links-downloads.table-layout ul li,
	.links-downloads ul li {
		border: 0;
		border-bottom: 1px solid #6d6f71;
	}

	.links-downloads.table-layout ul li:nth-child(odd),
	.links-downloads ul li:nth-child(odd) {
		border-left: 1px solid #6d6f71;
		border-right: 1px solid #6d6f71;
	} 

	.links-downloads.table-layout ul li:nth-child(even),
	.links-downloads ul li:nth-child(even) {
		border-right: 1px solid #6d6f71;
	}

	.links-downloads ul li a {
		min-height: 68px;
	}

	.half-col {
		width: 100%;
	}

	.home-info .other-stuff .half-col {
		width: 50%;
	}

	.home-info .other-stuff .half-col:nth-child(odd) {
		padding: 0;
		padding-right: 10px;
	}

	.home-info .other-stuff .half-col:nth-child(even) {
		padding: 0;
		padding-left: 10px;
	}

	.home-info .latest-advertising {
		padding: 0 0 10px 0;
	}


	#chat-box .btn.post {
		-ms-border-bottom-right-radius: 0;
		border-bottom-right-radius: 0;
		-ms-border-top-right-radius: 0;
		border-top-right-radius: 0;
	}
/*
	#usefullinks .widget-wrapper {
		overflow-y: scroll;
		height: 244px;
	}
	*/

	#directory .svySelect2 {
		width: 100%;
	}

	.third-col {
		width: 100%;
	}

	.article h2 {
		width: 100%;
		max-width: 100%;
		clear: both;
	}

	.article.standard-layout .text {
		max-width: 100%;
		float: none;
		clear: both;
	}

	.article.standard-layout .links-downloads {
		margin: 20px 0 0;
		width: 100%;
	}

	.article.standard-layout .links-downloads li {
		width: 50%;
		float: left;
	}

	.article-wrapper .article-image {
		display: block;
		float: none;
		clear: both;
		margin: 0 auto 15px;
	}

	.search .article-wrapper {
		width: 100%;
		float: none;
		clear: both;
	}

	.search .links-downloads {
		width: 100%;
		margin: 20px 0 0;
		clear: both;
		float: none;
	}

	.search .links-downloads li {
		width: 50%;
		float: left;
	}
}

@media(max-width: 480px) {
	#footer .column {
		width: 100% !important;
		padding: 10px 0;
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}

	.tiles li,
	.tiles li.middle {
		width: 100%;
	}

	.tiles li h2 {
		max-width: 100%;
	}

	.article.standard-layout .links-downloads li,
	.article .links-downloads.table-layout li,
	.links-downloads.table-layout ul li, 
	.links-downloads.table-layout ul li:nth-child(3n+2),
	.search .links-downloads ul li {
		width: 100%;
		float: none;
		border: 1px solid #6d6f71;
		border-top: 0;
	}

	#otherReplyOptions.replied,
	#otherReplyOptions,
	#replymethod-email,
	#replies {
		width: 100%;
		border: none;
	}

	#otherReplyOptions {
		margin-top: 20px;
	}


	#page-content .wrapper {
		padding-right: 20px;
	}

	.supportofficeboxDotNet {
		margin: 20px -20px 20px -20px;
	}

	.expert-points-table {
		font-size: 12px;
	}

	.show-on-small-mobile {
		display: block;
	}

	.hide-on-small-mobile {
		display: none;
	}

	.wrap {
		white-space: normal !important;
	}

	table.salesAndLeads td {
		padding: 10px;
	}

	.salesAndLeads .tableHeader {
		height: 50px;
	}

	.salesAndLeads td {
		height: 50px;
	}

	.page-padding {
		padding: 0 10px 10px;
	}

	.leaderboard {
		width: 100%;
	}

	/*.ignore-padding-small-mobile {
		padding: 0 !important;
	}*/

	.fc-header-title h2 {
		font-size: 16px !important;
		padding: 0 4px;
		line-height: 54px !important;
	}

	.fc-button.fc-button-today {
		height: 3.9em;
		text-align: center;
	}

	.fc-header-left {
		width: 30px !important;
	}

	.fc-header .fc-header-left .fc-button {
		display: block;
		margin: 0;
		margin-bottom: 2px;
		-ms-border-radius: 4px;
		border-radius: 4px;
	}

	.fc-button.fc-button-next {
		display: block;
	}

	.site-body h1, .mce_h1 .mceText, .mceListBoxMenu H1 {
		/*font-size: 22px;*/
		/*line-height: 120%;*/
	}

	.site-body h2, .mce_h2 .mceText, .mceListBoxMenu H2 {
		font-size: 19px;
		/*line-height: 120%;*/
	}

	body {
		font-size: 13px;
	}

	.supportofficebox select {
		margin-top: 10px;
		width: 200px;
	}

	.tableHeader {
		font-size: 12px;
	}

	.tableHeader span {
		height: 28px;
	}

	table.salesAndLeads td {
		font-size: 12px;
	}

	select, .select {
		font-size: 12px;
	}

	.form-buttons {
		padding-right: 20px;
	}

	.links-downloads {
		width: 100%;
		margin: 0;
	}

	.manageprofile ul li, .events ul li, .add-new-staff ul li {
		width: 100%;
	}

	.manageprofile label, .events label, .add-new-staff label {
		display: block;
		width: 100%;
	}

	.manageprofile .pictureLabel, .events .pictureLabel, .add-new-staff .pictureLabel {
		width: 24%;
	}

	.manageprofile select, .events select, .add-new-staff select
	.manageprofile .input, .events .input, .add-new-staff .input {
		width: 100%;
	}

	.knowledgebase .itembody ul li,
	.knowledgebase .itembody ul li:nth-child(3n+2) {
		width: 50%;
	}

	.knowledgebase .itembody ul li:nth-child(even) {
		background-color: #c2c2c2;
	}

	.knowledgebase .itembody ul li:nth-child(odd) {
		background-color: #e8e8e8;
	}

	#ActivityDescription {
		margin-left: 0;
	}
}

/* SVG animated menu icon - from https://raygun.io/blog/2014/07/making-svg-html-burger-button/ */

.hamburglar {
	-webkit-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);
	/*margin: 40px auto;*/
	/*position: relative;*/
	position: absolute;
	right: 10px;
	top: -15px;
	display: block;
	width: 68px;
	height: 68px;
	/*background: rgba(46, 46, 46, 0.5);*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.path-burger {
	position: absolute;
	top: 0;
	left: 0;
	height: 68px;
	width: 68px;
	mask: url(#mask);
	-webkit-mask-box-image: url(images/mask.svg);
}

.animate-path {
	position: absolute;
	top: 0;
	left: 0;
	width: 68px;
	height: 68px;
}

.path-rotation {
	height: 34px;
	width: 34px;
	margin: 34px 34px 0 0;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.path-rotation:before {
	content: '';
	display: block;
	width: 30px;
	height: 34px;
	margin: 0 4px 0 0;
	background: white;
}

@-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 0.6s linear normal;
	animation: dash-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-open .animate-path {
	-webkit-animation: rotate-in 0.6s linear normal;
	animation: rotate-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .path {
	-webkit-animation: dash-out 0.6s linear normal;
	animation: dash-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .animate-path {
	-webkit-animation: rotate-out 0.6s linear normal;
	animation: rotate-out 0.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: 20px 16px;
	height: 68px;
	width: 68px;
}

.burger-container {
	position: relative;
	height: 28px;
	width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
	position: absolute;
	display: block;
	height: 4px;
	width: 36px;
	-ms-border-radius: 0;
	border-radius: 0;
	background: #f7941d;
}

.burger-bun-top {
	top: 0;
	-webkit-transform-origin: 34px 2px;
	-ms-transform-origin: 34px 2px;
	transform-origin: 34px 2px;
}

.burger-bun-bot {
	bottom: 0;
	-webkit-transform-origin: 34px 2px;
	-ms-transform-origin: 34px 2px;
	transform-origin: 34px 2px;
}

.burger-filling {
	top: 12px;
}

.burger-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 68px;
	height: 68px;
}

.svg-ring {
	width: 68px;
	height: 68px;
}

.hamburglar.is-open .burger-bun-top {
	-webkit-animation: bun-top-out 0.6s linear normal;
	animation: bun-top-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-open .burger-bun-bot {
	-webkit-animation: bun-bot-out 0.6s linear normal;
	animation: bun-bot-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-top {
	-webkit-animation: bun-top-in 0.6s linear normal;
	animation: bun-top-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-bot {
	-webkit-animation: bun-bot-in 0.6s linear normal;
	animation: bun-bot-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-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 0.6s linear normal;
	animation: burger-fill-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-filling {
	-webkit-animation: burger-fill-in 0.6s linear normal;
	animation: burger-fill-in 0.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: 36px;
		left: 0px;
	}
}

@keyframes burger-fill-in {
	0% {
		width: 0;
		left: 36px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	80% {
		width: 36px;
		left: -6px;
	}

	100% {
		width: 36px;
		left: 0px;
	}
}

@-webkit-keyframes burger-fill-out {
	0% {
		width: 36px;
		left: 0px;
	}

	20% {
		width: 42px;
		left: -6px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	100% {
		width: 0;
		left: 36px;
	}
}

@keyframes burger-fill-out {
	0% {
		width: 36px;
		left: 0px;
	}

	20% {
		width: 42px;
		left: -6px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	100% {
		width: 0;
		left: 36px;
	}
}

/* end menu button */