/* Menu section */

section#menu .inner {
	display:grid;
	grid-gap:10px;
	grid-template-columns: 1fr;
	grid-template-areas:
		"msl"
		"mse"
		"mst"
		"msn"
	;
	font-size:16px;
	text-align:center;
}

#site_logo {
	grid-area: msl;
}
#site_email {
	grid-area: mse;
}
#site_telephone {
	grid-area: mst;
}
#site_sn {
	grid-area: mss;
	display:none;
}
	#site_sn a {
		display:inline-block;
		height:25px;
		width:25px;
		background-image:url(/userfiles/design/icons.png);
		background-position:-3px -3px;
		margin-left:10px;
		text-indent:-500em;
		outline:0;
	}
		#site_sn a.twitter {
			background-position:-35px -3px;
		}
		#site_sn a.youtube {
			background-position:-195px -3px;
		}		
		
		
#site_member_icon {
	grid-area: msm;
	text-indent:-500em;
	outline:0;
	background-image:url(/userfiles/design/member-icon.png);
	background-repeat:no-repeat;
	background-position:center center;
	padding:5px;
	display:none;
}
#site_search_icon {
	grid-area: msq;
	text-indent:-500em;
	outline:0;
	background-image:url(/userfiles/design/search-icon.png);
	background-repeat:no-repeat;
	background-position:top center;
	padding:5px;
	display:none;
}
nav {
	background: #26575C;
	grid-area: msn;
	font-size:16px;
	font-weight:400;
}

@media (min-width:600px) {

	section#menu .inner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"msl msl"
			"mse mst"
			"msn msn"
		;
	}

}

@media only screen and (min-width: 1202px) {

	section#menu .inner {
		grid-gap:10px;
		grid-template-columns: 240px auto 109px 120px 60px;
		grid-template-rows:1fr 1fr;
		grid-template-areas:
			"msl mse mst mss msm"
			"msl msn msn msn msq"
		;
		font-size:15px;
	}
	#site_logo {
		align-self:end;
		padding-bottom:10px;
	}
	#site_email {
		align-self:center;
		justify-self:end;
		font-weight:400;
		color:#000;
	}
	#site_telephone {
		align-self:center;
		justify-self:end;
		font-weight:400;
	}
	#site_sn {
		display:initial;
		align-self:center;
		justify-self:end;
	}
	#site_search_icon {
		display:initial;
	}
	#site_member_icon {
		display:initial;
	}
	nav {
		text-align:right;
	}
}










/* Menu itself */

section#menu ul {
	display:none;
	padding:0;
}

section#menu li {
	list-style-type:none;
	padding:0;
}

#menu_opener {
	display:block;
	background:#26575C;
	color:#fff;
	cursor:pointer;
	font-size:2.5em;
	line-height:1;
	padding:10px 0;
}

@media (max-width:1201px) {

	#site_logo {
		padding:10px;
	}

	section#menu ul {
		background:#26575C;
		border-top:1px solid #aaa;
	}

	section#menu li {
		display:grid;
		grid-template-columns:40px auto;
		width:100vw;
		border-top:1px solid #aaa;
	}

	section#menu ul li::before {
		content: '\25b6';
		padding:15px;
	}
	section#menu ul li.has_children::before {
		color:#fff;
	}
	section#menu ul li.has_children.showing_children::before {
		content: '\25bc';
	}

	section#menu ul a {
		text-align:left;
		color:#ddd;
		padding:15px;
	}

}

@media (min-width: 1202px) {

	#menu_opener {
		display:none;
	}

	/* first level */

	section#menu ul {
		display:block;
	}

		section#menu ul li {
			display:inline-block;
		}
			section#menu ul li a {
				display:block;
				padding:5px 10px 15px 10px;
				color:#000;
			}
				section#menu>ul>li:last-child>a {
					padding-right:0;
				}
				section#menu>ul>li>a:hover {

				}
				section#menu ul li a.on,
				section#menu ul li a.on:hover {

				}
				/* we want the bottom border to stretch
					section#menu nav>ul:first-of-type>li:first-child>a:first-child {
						padding-left:0;
					}
					section#menu nav>ul:first-of-type>li:last-of-type a:first-child {
						padding-right:0;
					}
				*/
				section#menu ul li a.on,
				section#menu ul li a:hover {
					text-decoration:none;
				}
				section#menu ul li a.on {
					cursor:default;
				}


	/* second level */

	section#menu ul li ul {
		display:none;
	}

			section#menu ul li:hover ul {
				display:block;
				position:absolute;
				z-index:99999;
				-webkit-border-radius: 0 0 10px 10px;
				border-radius: 0 0 10px 10px;
				margin-top:-3px;
				-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.2);
				box-shadow: 0 3px 3px 0 rgba(0,0,0,.2);
			}

			section#menu ul li ul li {
				float:none;
				text-align:left;
				display:block;
			}

			section#menu ul>li>ul>li>a {
				font-size:.9rem;
				float:none;
				text-align:left;
				padding:5px 15px;
			}

			section#menu ul>li>ul>li>a.on,
			section#menu ul>li>ul>li>a:hover {
				background:#f7f7f7;
			}

}