/* header */
#header { display: block; float: left; width: 100%; }
#header #inner { padding: 0 5px; }

	/* logo */
	.logo {
		float: left;
		max-width: 158px;
		width: 100%;
		padding: 14px 0;
		transition: max-width .2s;
		-webkit-transition: max-width .2s;
		-moz-transition: max-width .2s;
	}
	.logo img { width: 100%; }

	/* mobile button */
	.mobile-button-wrapper {
		width: 80px;
		height: 80px;
		margin: 6px 0;
		background-color: #9c8cc2;
		padding-top: 25px;
		float: right;
		text-align: center;
		cursor: pointer;
		position: relative;
		right: 0px;
		transition: all .2s;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		z-index: 100;
		border-radius: 29.5px;
		-webkit-border-radius: 29.5px;
		-moz-border-radius: 29.5px;
	}
	.mobile-button-wrapper:before { font-size: 30px; color: #FFFFFF; content: '\f0c9'; }
	.mobile-button-wrapper.open:before { content: "\f00d"; }

	/* menu top */
	.menu-top { display: none; }

		/* media specific styles */
		@media(min-width: 768px){
			#header #inner { padding: 0 15px; }

			/* logo */
			.logo { max-width: 248px; padding: 15px 0; }

			/* mobile button */
			.mobile-button-wrapper {
				width: 103px;
				height: 103px;
				margin: 13px 0;
				padding-top: 37px;
			}
			.mobile-button-wrapper:before { font-size: 40px; }
		}
		@media(min-width: 1024px){
			#header #inner { padding: 0 25px; max-width: 1074px; margin: 0 auto; height: 129px; }

			/* mobile button */
			.mobile-button-wrapper { display: none; }

			/* menu top */
			.menu-top { display: block; }
		}