#topBar
	position: relative
	background-color: rgba(170, 122, 82, 0.3)
	padding: 1em 0

	.logoImage
		height: 6rem
		vertical-align: top
		padding-right: 1rem
		animation: colorAnimation ease 4s
		animation-iteration-count: 1
		animation-duration: 4s

	@keyframes colorAnimation
		0%
			filter: grayscale(100%)
		100%
			filter: grayscale(0%)

	.logoText
		display: inline-block

		.logoTitle
			line-height: 1
			font-size: 4.5rem
			font-family: 'Arima Madurai', cursive
			//font-weight: 900
		.logoTagline
			line-height: 0.5
			font-size: 2rem
			font-family: 'Dancing Script', cursive
			//font-weight: 700
			text-align: left
		.menuButtonContainer
			display: block
			position: fixed
			right: 5rem
			top: 2.5rem
			-webkit-box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61)
			-moz-box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61)
			box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.61)

			button
				line-height: 1
				padding: 0.4em

				svg
					font-size: 1.5em

//@media only screen and (max-width: 1100px)
//	#topBar
//		padding-top: 4rem
//		padding-bottom: 4rem
//		.logoImage
//			height: 5.2rem
//		.logoText .logoTitle
//			font-size: 4rem
//		.logoText .logoTagline
//			font-size: 1.5rem
//
//@media only screen and (max-width: 950px)
//	#topBar
//		padding-top: 3rem
//		padding-bottom: 3rem
//		.logoImage
//			height: 4rem
//			padding-right: 3rem
//		.logoText .logoTitle
//			font-size: 3rem
//		.logoText .logoTagline
//			font-size: 1.2rem
//
//@media only screen and (max-width: 760px)
//	#topBar
//		padding-top: 2rem
//		padding-bottom: 2rem
//		.logoImage
//			height: 3rem
//			padding-right: 2rem
//		.logoText .logoTitle
//			font-size: 2rem
//		.logoText .logoTagline
//			font-size: 1rem
//
@media only screen and (max-width: 500px)
	#topBar
		.logoImage
			height: 4rem
			padding-right: 0.6rem
		.logoText .logoTitle
			font-size: 3rem
		.logoText .logoTagline
			font-size: 1.4rem