/* main menu */
.menu {
    position: absolute;
	-webkit-filter: url("./#shadowed-goo");
			filter: url("./#shadowed-goo");
	height:41vw;
	width:100vw;
    top:0;
    left:0;
	overflow:hidden;
	box-sizing: border-box;
}
.menu svg {
	position:absolute;
	width:100%;
	height:100%;
    top:0;
    left:0;
	pointer-events: none;
/*	clip-path:border-box;
	border-radius:50%; */
/*	box-sizing: border-box; */
}
svg text {
	font-family: 'Roboto Slab', serif;
	font-size:10px;
	font-weight:100;
	fill:#65c;
	text-anchor: middle;
}
.menu-item-button:hover svg text, a.menu-sub-item:hover svg text {
	font-weight:normal;
	fill:#c25;
}

.menu-open-checkbox, .menu-item-checkbox {
	display: none;
}
/* initialization of all menu buttons */
.menu-open-button, .menu-item-button, a.menu-sub-item {
	position: absolute;
	display:block;
	width: 10vw;
	height: 10vw;
	left: 45vw;
	bottom: 8vw;
	overflow: hidden;

	background-color: #43b;
	border-radius: 50%;
	color: #e4e4e4;
	text-align: center;
	line-height: 10vw;
/*	-webkit-transform: translate(0, 0);
			transform: translate(0, 0); */
	-webkit-transition: -webkit-transform ease-out 200ms;
			transition: transform ease-out 200ms;
	cursor: pointer;
	box-sizing: border-box;
}
.menu-open-button {
	z-index: 30;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-webkit-transform: scale(1.15, 1.15);
			transform: scale(1.15, 1.15);
}
.menu-item-button {
	z-index: 20;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a.menu-sub-item {
	z-index:10;
	-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
			transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
	width: 8vw;
	height: 8vw;
/*	margin-left: -5vw; */
	line-height:8vw;
	left:46vw;
	bottom:9vw;
}
.menu-item-button:hover, a.menu-sub-item:hover {
	background-color: #e4e4e4;
	color: #c25;
}
/* logo image inside main menu button */
.menu-open-button img {
	position:relative;
	top:-3%;
	width:100%;
	border-radius:50%;
}
.hover-button {
	-webkit-transform: scale(1.2, 1.2);
			transform: scale(1.2, 1.2);
}
.slogan-text {
	z-index: 50;
	position:absolute;
	width:10vw;
	margin-left:-5vw;
	bottom:6.1vw;
	left:50%;
	line-height:2vw;
	font-size:1vw;
/*	font-weight:100; */
	color:#c25;
	opacity:0;
	-webkit-transition: opacity 1s ease;
			transition: opacity 1s ease;
}
#about-text-container {
	z-index:10;
	position:absolute;
	width:20vw; /* 20vw */
	height:10vw;
	bottom:7vw;
	left:64.4vw;
	
	background-color:#e4e4e4;
	border-radius:2vw;
	box-sizing: border-box;
	overflow:hidden;
	
	opacity:0;
	-webkit-transition: opacity 1s ease;
			transition: opacity 1s ease;
}
#about-text {
	position: absolute;
    height: 80%;
	top:10%;
	left:5vw;
	right:-30px; /* hide vertical scrollbar */
	overflow-x:hidden;
    overflow-y:scroll;
	color:#329;
	text-align:left;
	padding:0 2vw 0 0;
	border-top:1px solid #329;
	border-bottom:1px solid #329;
	box-sizing: border-box;
}
#about-text:before {
	/* TODO arrow to scroll up */
}
#about-text:after {
	/* TODO arrow to scroll down */
}

/* custom symbol font used for menu icons */
.symbol {
	font-family: 'Fontello';
	font-size:3vw;
}