/*------------------------------------------------- 2.1 - BURGER MENU --------------------------------*/


@import url(https://fonts.googleapis.com/css?family=Montserrat);


 .burger-click-region {
	 position: absolute;
	 z-index:999;
	 top: calc(5vh - 0px);
	 right: 40px;
	 aleft:30px;
	 transform-origin: top right;
	 width: 30px;
	 height: 25px;
	 cursor: pointer;
	 abackground-color:red;
	 opacity:.8;
}
 .burger-menu-piece {
	 z-index:999;
	 display: block;	
	 position: absolute;
	 width: 30px;
	 transform-origin: 50% 50%;
	 transition: transform 200ms ease-out;}
}
 .burger-menu-piece:nth-child(1) {
	 top: 0;
}
 .burger-menu-piece:nth-child(2) {
	 top: 9px;
	 opacity: 1;
	 atransition: transform 50ms ease-out !important, opacity 50ms linear 50ms !important;
}
 .burger-menu-piece:nth-child(3) {
	 top: 18px;
}
 .active .burger-menu-piece:nth-child(1) {
	 animation: burger-open-top 200ms ease-out forwards;
}
 .active .burger-menu-piece:nth-child(2) {
	 opacity: 0;
	 transition: transform 200ms ease-out, opacity 0ms linear 100ms;
}
 .active .burger-menu-piece:nth-child(3) {
	 animation: burger-open-bot 200ms ease-out forwards;
}
 .closing .burger-menu-piece:nth-child(1) {
	 animation: burger-close-top 200ms ease-out forwards;
}
 .closing .burger-menu-piece:nth-child(3) {
	 animation: burger-close-bot 200ms ease-out forwards;
}


@keyframes burger-open-top {
	 50% {
		 transform: translate3d(0, 9px, 0);
	}
	 100% {
		 transform: translate3d(0, 9px, 0) rotate(45deg);
	}
}
 @keyframes burger-open-bot {
	 50% {
		 transform: translate3d(0, -9px, 0);
	}
	 100% {
		 transform: translate3d(0, -9px, 0) rotate(-45deg);
	}
}
 @keyframes burger-close-top {
	 0% {
		 transform: translate3d(0, 9px, 0) rotate(45deg);
	}
	 50% {
		 transform: translate3d(0, 9px, 0) rotate(0deg);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}
 @keyframes burger-close-bot {
	 0% {
		 transform: translate3d(0, -9px, 0) rotate(-45deg);
	}
	 50% {
		 transform: translate3d(0, -9px, 0) rotate(0deg);
	}
	 100% {
		 transform: translate3d(0, 0, 0);
	}
}


@media only screen and (max-width: 900px) {
    .burger-menu-piece {width: 40px;}
    .burger-menu-piece:nth-child(1) {top: 0;}
    .burger-menu-piece:nth-child(2) {top: 15px;}
    .burger-menu-piece:nth-child(3) {top: 30px;}
    .burger-click-region {top: calc(5vh - 2px);}
	
	@keyframes burger-open-top {
		 50% {
			 transform: translate3d(0, 15px, 0);
		}
		 100% {
			 transform: translate3d(0, 15px, 0) rotate(45deg);
		}
	}
	 @keyframes burger-open-bot {
		 50% {
			 transform: translate3d(0, -15px, 0);
		}
		 100% {
			 transform: translate3d(0, -15px, 0) rotate(-45deg);
		}
	}
	 @keyframes burger-close-top {
		 0% {
			 transform: translate3d(0, 15px, 0) rotate(45deg);
		}
		 50% {
			 transform: translate3d(0, 15px, 0) rotate(0deg);
		}
		 100% {
			 transform: translate3d(0, 0, 0);
		}
	}
	 @keyframes burger-close-bot {
		 0% {
			 transform: translate3d(0, -15px, 0) rotate(-45deg);
		}
		 50% {
			 transform: translate3d(0, -15px, 0) rotate(0deg);
		}
		 100% {
			 transform: translate3d(0, 0, 0);
		}
	}
}