/* **************************** nav */
/* */
nav.active {
	animation: animate-bg .125s linear forwards;
	-moz-animation: animate-bg .125s linear forwards;
	-webkit-animation: animate-bg .125s linear forwards;
}
@keyframes animate-bg {
	0% {
		background: rgba(248, 229, 0, 0.2);
  	}
  	100% {
		background: rgba(248, 229, 0, 1);
  	}
}
/* */
nav.active .open .bars span.bar-top {
	animation: animate-bar-top .25s linear forwards;
	-moz-animation: animate-bar-top .25s linear forwards;
	-webkit-animation: animate-bar-top .25s linear forwards;
}
nav.active .open .bars span.bar-middle {
	animation: animate-bar-middle .25s linear forwards;
	-moz-animation: animate-bar-middle .25s linear forwards;
	-webkit-animation: animate-bar-middle .25s linear forwards;
}
nav.active .open .bars span.bar-bottom {
	animation: animate-bar-bottom .25s linear forwards;
	-moz-animation: animate-bar-bottom .25s linear forwards;
	-webkit-animation: animate-bar-bottom .25s linear forwards;
}
@keyframes animate-bar-top {
	0% {
		top: 0;
    	transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
  	}
	50% {
		top: 6px;
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
  	}
  	100% {
		top: 6px;
		transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
  	}
}
@keyframes animate-bar-middle {
	0% {
		opacity: 1;
  	}
  	100% {
		opacity: 0;
  	}
}
@keyframes animate-bar-bottom {
	0% {
		top: 14px;
    	transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
  	}
	50% {
		top: 7px;
    	transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
  	}
  	100% {
		top: 7px;
		transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
  	}
}
/* */
nav.active .info {
	animation: animate-info .25s linear 0.25s forwards;
	-moz-animation: animate-info .25s linear 0.25s forwards;
	-webkit-animation: animate-info .25s linear 0.25s forwards;
}
@keyframes animate-info {
	0% {
		opacity: 0;
		padding-top: 50px;
  	}
  	100% {
		opacity: 1;
		padding-top: 100px;
  	}
}

/* *************************************************** */
/* *************************************************** */
@media screen and (max-width : 1024px) {
	nav.active .info {
		animation-delay: 0.125s;
		-moz-animation-delay: 0.125s;
		-webkit-animation-delay: 0.125s;
	}
	@keyframes animate-info {
		0% {
			opacity: 1;
			padding-top: 100px;
		}
		100% {
			opacity: 1;
			padding-top: 100px;
		}
	}
}
/* *************************************************** */
/* *************************************************** */
@media screen and (max-width : 768px) {
	
}
/* *************************************************** */
/* *************************************************** */
@media screen and (max-width : 767px) {
	@keyframes animate-info {
		0% {
			opacity: 1;
			padding-top: 60px;
		}
		100% {
			opacity: 1;
			padding-top: 60px;
		}
	}
}