/* Responsive Side */

@media screen and (max-width: 970px) {
	html, body {
		 -webkit-text-size-adjust: none;
	}

	.normal img {
		max-width: 100%;
	}
	
	#Banner {
		margin-top: 108px;
		height: 200px;
	}

	h1.head-broker-name {
		position: relative;
		top: 0;
		left: 0;
	}

	/*Home*/

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

	.social-links {
		height: 70px;
	}
	
	#broker-header .logo {
		margin-left: 20px;
		max-width: 100px;
		height: auto;
		top: 5px;
	}

	#brokers-inner-wrapper {
		margin-top: 138px;
	}

	#brokers-inner-wrapper.includes-banner {
		margin-top: 0;
	}

	#footer .footer-content {
		width: 100%;
		padding: 25px 20px;
	}

	#footer .industry-logos .industry-logo {
		padding: 0 15px;
		width: 32.33%;
	}

	#footer .industry-logos .industry-logo img {
		width: 100%;
	}

	/*Broker Search*/

	ul.result-list li .detail-wrapper {
		width: 50%;
	}

	ul.result-list li .broker-name,
	.broker-details-card .broker-name {
		font-size: 20px;
	}

	ul.result-list li .broker-location, 
	.broker-details-card .broker-location,
	ul.result-list li .broker-specialties, 
	.broker-details-card .broker-specialties {
		font-size: 14px;
	}

	/*Flyer Details*/

	#thebody .inner-wrapper-header {
		margin-bottom: 40px;
	}

	#thebody .hotel .hotel-info {
		width: 60%;
	}

	#thebody .hotel-images {
		width: 35%;
	}

	#thebody .hotel-images .image {
		width: 100%
	}

	#thebody .hotel-images .image img {
		width: 100%;
	}

	#thebody .hotel-extras .hotel-images img {
		width: 100%;
		height: 100%;
	}

	/*Flyer Details*/

	/*#thebody .inner-wrapper-header div {
		max-width: 100% !important;
	}*/

	#thebody .flyer-title,
	#thebody .flyer-subtitle {
		white-space: normal;
	}

	#thebody .hotel.hotel-extras {
		width: 45%;
	}

	#thebody .hotel.hotel-extras .hotel-info {
		width: 100%;
	}

	#thebody .hotel.hotel-extras .hotel-description {
		width: 100%;
		margin-bottom: 10px;
	}

	#thebody .hotel.hotel-extras .hotel-images {
		width: 100%;
	}

	#thebody .hotel-extras.fullwidth .hotel-details {
		position: relative;
	}

	#thebody .hotel-extras.fullwidth .hotel-info {
		height: auto;
	}

	#thebody .hotel.hotel-extras.fullwidth .hotel-images {
		width: 100%;
	}

	/*Enquiry Form*/

	#thebody .svySubformRow.row-odd,
	#thebody .svySubformRow.row-odd td {
		width: 600px;
	}

	#thebody .svySubformRow.row-odd td.remove {
		width: 90px;
		display: table-cell !important;
	}

	#thebody .colhead,
	#thebody .subformcell,
	input.medium-2,
	select.medium-2 {
		width: 140px;
		margin-right: 5px;
	}

	#thebody .hotel.hotel-extras {
		min-height: 500px;
	}

	.broker-details-card {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.broker-details-card .img-wrapper {
		float: none;
		margin: 0 auto;
	}

	.broker-details-card .detail-wrapper {
		margin-top: 20px;
		width: 100%;
	}
}

@media screen and (max-width: 870px) {
	/*Home*/

	.banner-promo-sticker,
	.banner-promo-sticker img {
		width: 60px;
	}

	.banner-promo-sticker .promo-text {
		top: 14px;
		font-size: 16px;
	}

	ul#footer_nav {
		width: 100%;
		max-width: 100%;
		float: none;
		text-align: center;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}

	ul#footer_nav li {
		display: inline-block;
		float: none;
	}

	#footer .industry-logos {
		width: 100%;
		max-width: 100%;
		float: none;
		text-align: center;
		padding: 20px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}

	#footer .industry-logos .industry-logo {
		width: auto;
	}

	#copyright {
		width: 100%;
		max-width: 100%;
		float: none;
		text-align: center;
	}	

} 


@media screen and (max-width: 800px) {
	html, body {
		 -webkit-text-size-adjust: none;
	}

	ul.social-icons {
		margin-right: 0;
	}

	/*Header*/
	.hide-on-desktop {
		display: block;
	}

	#thebody #broker-header,
	#broker-header .navigation,
	.social-links,  
	#brokers-inner-wrapper {
		width: 100%;
	}

	#brokers-inner-wrapper {
		margin-top: 108px;
	}

	#broker-header .container.blue,
	#broker-header .navigation {
		height: 100%;
	}

	#broker-header .container.blue {
		position: relative;
		background: none;
	}

	.mobile_navigation {
		position: absolute;
		top: 0;
		width: 100%;
		height: 35px;
		background: #005586;
	}

	#broker-header .navigation {
		background: none;
		position: relative;
	}

	#broker-header ul.nav {
		display: none;
		height: 100%;
		position: relative;
		top: 35px;
		border-bottom: 5px solid #262262;
		background: #fff;
		overflow: scroll !important;
		padding-bottom: 120px;
	}

	#broker-header ul.hidden-subnav {
		position: relative;
		width: 100%;
		padding: 0 0 0 50px;
		background: #fff;
		border-bottom: 1px solid rgba(38, 34, 98, 0.2);
	}

	#broker-header ul.nav li {
		float: none;
		background: white;
		display: block;
	}

	#broker-header ul.nav li a {
		font-size: 15px;
		line-height: 100%;
		color: #262262;
		padding: 20px;
		height: auto;
		text-align: left;
		border-bottom: 1px solid rgba(38, 34, 98, 0.2);
	}

	#broker-header ul.nav li a.has_subnav {
		background-image: url(images/subnav_arrow_down.png);
		background-position: center right 20px;
		background-repeat: no-repeat;
		-ms-background-size: 15px 8px;
		background-size: 15px 8px;
	}

	#broker-header ul.nav li a.active,
	#broker-header ul.nav li a:hover {
		background-color: #fff;
	}

	#broker-header ul.nav li a:hover {
		color: #262262;
	}

	#broker-header ul.hidden-subnav li a {
		font-size: 15px;
		color: #262262;
		padding: 10px 0;
		border: none;
	}

	.hidden-subnav {
		margin-top: 0;
	}

	.page-title {
		margin-bottom: 20px;
	}

	.broker-details-wrapper {
		padding: 20px 0;
		margin-bottom: 20px;
	}

	/*Home*/

	.search-heading h1 {
		font-size: 28px;
	}

	.home-copy {
		width: 100%;
		padding-right: 0;
	}

	ul.awards {
		width: 100%;
		margin-top: 20px;
	}

	/*Broker Search*/

	ul.result-list {
		margin: 0 -20px 0 -20px;
	}

	ul.result-list li {
		/*min-height: 210px;*/
		width: 50%;
	}

	/*ul.result-list li,
	ul.result-list li:nth-child(even) {
		background-color: #e5e5e5;
	}

	.result-list li:nth-child(4n+1),
	.result-list li:nth-child(4n) {
		background-color: white !important;
	}*/

	.search-and {
		font-size: 30px;	
	}

	/*Broker Home Page*/

	.broker-details-card ul li {
		font-size: 14px;
	}

	/*Flyer Details*/

	#thebody .flyer-title {
		font-size: 25px;
	}

	#thebody .hotel-name {
		font-size: 14px;
	}

	#thebody .inner-wrapper-packages {
		font-size: 12px;
	}

	#thebody .hotel-bonus .hotel-bonus-text {
		padding: 1px 5px;
	}

	#thebody .hotel-extras.fullwidth .hotel-info .hotel-name,
	#thebody .hotel-extras .hotel-info .hotel-name {
		width: 100%;
	}

	/*Enquiry Form*/

	#thebody .svySubformRow.row-odd,
	#thebody .svySubformRow.row-odd td {
		width: 400px;
	}

	#thebody .svySubformRow.row-odd td.remove {
		width: 90px;
	}

	#thebody .colhead {
		display: none;	
	}

	#thebody .subformcell,
	input.medium-2,
	select.medium-2 {
		width: 350px;
		margin: 0 5px 5px 0;
	}

	ul.broker-details-contact li {
		display: block;
		padding: 5px 20px;
	}

	h2.deal-subtitle {
		display: block;
		width: 100%;
		margin: 0;
	}

	.travel-periods {
		float: none;
		margin: 0;
		padding: 10px 0;
		text-align: center;
		width: 100%;
	}

}

@media screen and (max-width: 690px) {

	
	/*Flyer Details*/

	#thebody .package-title {
		margin-bottom: 0;
	}

	#thebody .hotel-bonus {
		left: 0;
		width: 100%;
	}

	#thebody .hotel {
		margin-top: 60px;
	}

	#thebody .inner-wrapper-footer {
		margin-top: 70px;
	}

	/*Flyer Details*/
	
	#thebody .hotel-extras.fullwidth .hotel-details {
		position: relative;
	}

	#thebody .hotel-extras.fullwidth {
		width: 100%;
		margin-top: 0;
	}

	#thebody .hotel.hotel-extras.fullwidth .hotel-images {
		width: 100%;
		text-align: center;
	}

		#SubscribeForm input[type=text] {
		margin-bottom: 5px;
	}

	#thebody .hotel.hotel-extras.fullwidth .hotel-images {
		margin-top: 50px;
	}

	.mini-banner {
		width: 50%;	
		/*background-size: 100% 208px;*/
    background-size: cover;
    background-position: center;
	}

}

@media screen and (max-width: 650px) {
	html, body {
		-webkit-text-size-adjust: none;
		font-size: 14px;
	}

	/*Home*/

	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 20px;
	}

	h1.head-broker-name {
		position: absolute;
		top: inherit;
		right: 20px;
		bottom: 5px;
		left: inherit;
		float: none;
	}

	ul.social-icons {
		position: relative;
		margin: 0;
		padding: 20px 0 0;
		text-align: center;
	}

	.social-icons li {
		display: inline-block;
		float: none;
		padding: 0 5px;
	}

	.social-icons li a {
		background-position: 0 -50px
	}

	.social-icons li a.twitter {
		background-position: -25px -50px;
	}

	.social-icons li a.youtube {
		background-position: -50px -50px;
	}

	.social-icons li a.linkedin {
		background-position: -75px -50px;
	}

	.social-icons li a.googleplus {
		background-position: -100px -50px;
	}

	.social-icons li a.instagram {
		background-position: -125px -50px;
	}

	.social-icons li a.rssfeed {
		background-position: -150px -50px;
	}

	.social-icons li a.share {
		background-position: -175px -50px;
	}

	.search-heading h1 {
		font-size: 24px;
	}

	.search-location,
	.search-byname {
		width: 100%;
		/*background-size: 100% 316px;*/
		background-size: cover;
		background-position: center;
	}

	#thebody .select2-container.select2 {
		width: 60%;
	}

	.search-or,
	.search-and {
		top: 96%;
	}

	.medium-banner {
		width: 100%;
		margin-bottom: 0;
		/* background-size: 100% 316px; */
		background-size: cover;
		background-position: center;
	}

	.small-banner {
		width: 50%;
		/*background-size: 100% 316px;*/
		background-size: cover;
		background-position: center;
	}

	.small-banner .btn {
		margin-left: -40%;
	}

	.sub-deal-list {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.deal-list ul, .sub-deal-list ul {
		margin-bottom: 20px;
	}

	#footer .industry-logos img {
		width: 60px;
	}

	#footer .industry-logos .industry-logo {
		padding: 10px 10px;
		max-width: 32.33%;
	}

	/*Broker Search*/
	.search-and {
		font-size: 36px;	
	}

	/*Broker Home Page*/
	
	.broker-details-card {
		padding: 20px 10px;
	}

	.page-title {
		line-height: 100%;
	}

	/*Flyer Details*/

	.mini-banner .btn {
		margin-left: -55px;
	}

	#thebody .leadin-price .nights {
		font-size: 14px;
		padding-bottom: 10px;
	}

	#thebody .leadin-price .price {
		font-size: 38px;
	}

	#thebody .flyer-title.smaller {
		text-align: left;
		max-width: 70%;
		margin: 0;
	}

	#thebody .flyer-subtitle {
		font-size: 20px;
		word-break: keep-all;
		margin-top: 40px;
	}

	#thebody .hotel .hotel-info,
	#thebody .hotel  .hotel-images,
	#thebody .hotel  .hotel-images image {
		width: 100%;
	}

	#thebody .hotel  .hotel-info {
		margin-bottom: 10px;
	}

	#thebody .hotel  .hotel-images,
	#thebody .hotel  .hotel-images .image {
		height: 100% !important; 
	}

	#thebody .inner-wrapper-footer {
		padding: 0;
		margin-top: 0;
	}

	#thebody .hotel {
		margin-top: 0;
	}

	#thebody .package-title {
		margin-bottom: 60px;
	}

	#thebody .btn.center-btn {
		font-size: 18px;
		width: 280px;
		padding: 10px 18px;
	}

	input.large,
	select.large,
	textarea.large {
		width: 310px;
	} 

	#thebody .inner-wrapper-header.deal-margin {
		margin-bottom: 20px;
	}

	/*Brochures*/

	.mini-banner.brochure {
		width: 33.33%;
	}

	#thebody .hotel.hotel-extras {
		min-height: 550px;
	}

	#thebody .hotel-extras.fullwidth .hotel-images img {
		width: initial;
		height: initial;
	}

	.broker-details-card .detail-wrapper {
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin: 20px 0 0;
	}
	
	.broker-details-wrapper ul.broker-details-contact,
	.subscribe-wrapper {
		width: 100%;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		text-align: center;
	}

	.broker-details-card ul li .icon {
		margin-left: 0;
	}

	.subscribe-wrapper {
		margin-bottom: 0;
	}

}

@media screen and (max-width: 520px) {

	/*Home*/

	#df_SubformTable_EnquiryPassenger thead {
		display: none;
	}

	#thebody .svySubformRow.row-odd, 
	#thebody .svySubformRow.row-odd td,
	#thebody .subformcell, 
	#thebody .subformcell input.medium-2, 
	#thebody .subformcell select.medium-2 {
		width: 100%;
	}

	#thebody .subformcell select.medium-2 {
		margin: 2px 0;
	}

	#thebody .svySubformRow.row-odd td,
	#thebody .svySubformRow.row-odd td.remove {
		display: block !important;
	}

	h1.head-broker-name {
		display: none;
	}

	#brokers-inner-wrapper {
		margin-top: 100px;
	}

	.search-heading h1 {
		font-size: 20px;
		padding: 10px 14px 14px;
	}

	.small-banner .btn {
		margin-left: -65px;
	}

	.home-copy .normal h2 {
		font-size: 22px;
	}

	ul#footer_nav li a {
		font-size: 12px;
	}

	/*Broker Search*/

	ul.result-list li {
		/*min-height: 210px;*/
		width: 100%;
	}

	/*ul.result-list li,
	ul.result-list li:nth-child(even),
	.result-list li:nth-child(4n+1),
	.result-list li:nth-child(4n) {
		background-color: white;
	}
	ul.result-list li:nth-child(even) {
		background-color: #e5e5e5 !important;
	}*/

	/*Holidays and Deals*/

	.page-title {
		font-size: 25px;
	}

	/*Broker Home Page*/

	.broker-details-card .img-wrapper {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
		float: none;
	}

	.broker-details-card .img-wrapper img {
		display: block;
		margin: 0 auto 10px;
	}

	.broker-details-card .detail-wrapper {
		width: 100%;
		margin-left: 0;
	}

	/*Enquiry Form*/

	.field #PhoneAreaCode {
		margin: 0 10px 10px 0;
	}

	.field #PhoneNumber {
		margin-left: 0;
	}
	
	input.large,
	select.large,
	textarea.large {
		width: 100%;
	} 

	input.medium-2, 
	select.medium-2 {
		width: 170px;
	}

	.label {
		width: 25%;
		margin-top: 5px;
		font-size: 12px;
		line-height: 100%;
	}

	.svyDateInput {
		max-width: 80%;
	}

	.btn.big {
		width: 100%;
		font-size: 20px;
	}

	.deal-list.region h2, 
	.deal-list.deal h2,
	.sub-deal-list h2 {
		margin: 20px;
		text-align: center;
	}

	body#tinymce h2 {
		text-align: center;
	}

	.deal-list.deal.region-information h2 {
		margin-right: 0;
		line-height: 130%;
	}

	/*Flyer Details*/

	#thebody .package-title {
		line-height: 100%;
		margin-bottom: 20px;
	}

	#thebody #leadin-text .flyer-features ul li {
		font-size: 12px;
	}

	#thebody .hotel.hotel-extras {
		width: 100%;
	}

	#thebody .hotel.hotel-extras .hotel-description {
		height: auto;
		
	}

	#thebody .hotel.hotel-extras .hotel-images,
	#thebody .hotel.hotel-extras.fullwidth .hotel-images img {
		width: 100%;
	}

	#thebody .hotel-extras.fullwidth .hotel-info {
		height: auto;
	}
	
	/*#thebody table.hotel-details {
		font-size: 10px;
	}*/ 

	.broker-home-video {
		max-height: 250px;
	}
	
	#thebody .inner-wrapper-packages {
		margin-bottom: 50px;
	}

	#thebody .hotel.hotel-extras.marginLeft20 {
		margin: 0;
	}	

	#thebody .hotel.hotel-extras {
		min-height: 550px;
	}

	.mini-banner {
		width: 100%;
		-ms-background-size: cover;
		background-size: cover;
    background-position: center;
	}

	ul#footer_nav li.divider {
		padding: 0 5px;
	}

	#thebody .flyer-title.smaller {
		max-width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
}

@media screen and (max-width: 360px) {
	
	#thebody .hotel.hotel-extras {
		min-height: 550px;
	}

}

@media screen and (max-width: 320px) {
	
	/*Enquiry Form*/

	input.large,
	select.large,
	textarea.large {
		width: 200px;
	} 

	#thebody .package {
		margin: -10px;
	}

	.broker-home-video {
		max-height: 175px; 
	}

	.mini-banner.brochure {
		width: 50%;
	}

}



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

.hamburglar {
	-webkit-transform: scale(0.65);
	-ms-transform: scale(0.65);
	transform: scale(0.65);
	/*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;
	z-index: 999;
}

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

.hamburglar.is-closed .burger-bun-top,
.hamburglar.is-closed .burger-filling,
.hamburglar.is-closed .burger-bun-bot,
.hamburglar.is-open .burger-bun-top,
.hamburglar.is-open .burger-filling,
.hamburglar.is-open .burger-bun-bot  {
	background-color: #ffffff;
}

.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: #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 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;
	border-radius: 2px;
	background: white;
}

.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 {
	display: none;
	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 */