body 
{
	overflow-x: hidden;
	text-align:center;
	font-family: Spectral;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#menu {
	background: #f2f2f2;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 0 0 0 11%;
	font-size: medium;
	& ul 
	{
		margin: 0;
		padding: 0;
	}
	& ul:before 
	{
		content: "";
		position: absolute;
		top: -8px;
		left: 23%;
		border-bottom: 5px solid #1f1b50;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}
	& li
	{
		float: left;
		background:#f2f2f2;
		position: relative;
		display: block;
		color: #4F4F4F;
		text-shadow: 1px 1px 1px rgba(6 10 115 / 13%);
		& a 
		{
			display: block;
			text-decoration: none;
			padding: 6px 10px;
			color: #4F4F4F;
			border-right: 1px solid #E7E7E7;
			& i
			{
				display: block;
				font-size: 1.5rem;
				margin-bottom: 10px;
				width:auto;
			}
			& strong 
			{
				display: block;
				font-size:1.1rem;
				text-transform: uppercase;
			}
			& small 
			{
				display: block;
				font-size: 0.6rem;
			}
		}
& .imglink {
	display: block;
	text-decoration: none;
	padding: 0px 20px;
	color: #4F4F4F;
	border-right: 1px solid #E7E7E7;
}
	}
	& li.full-width {
        position: static;
    }
	& li:hover > .sub-menu 
	{
		display: block;
	}
	& li:first-of-type
	{
		border-right: 1px solid #E7E7E7;
		display:list-item;
	}
	& input[type="checkbox"]
	{
		display: none;
	}
	& .sub-menu
	{
		display: none;
		border-top: 4px solid #1f1b50;
		margin: 0;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 13em;
		text-align:left;
		z-index: 3000;
		transition: all .125s ease-in-out;
		-o-transition: all .125s ease-in-out;
		-moz-transition: all .125s ease-in-out;
		-webkit-transition: all .125s ease-in-out;
		& li 
		{
			float: none;
			border: 1px solid #E7E7E7;
		}
		& li:first-of-type
		{
			display:block;
		}
		& a:hover 
		{
			color: #1f1b50;
		}
		& .sub-menu 
		{
			border-top:0;
			border-left: 4px solid #1f1b50;
			top: 0;
			left: 100%;
		}
		& ul:before 
		{
			content: "";
			position: absolute;
			top: 15px;
			left: -14px;
			border-right: 5px solid #1f1b50;
			border-bottom: 5px solid transparent;
			border-top: 5px solid transparent;
		}
		& ul.tileleft:before
		{
			content: "";
			position: absolute;
			top: 10px;
			right: -3%;
			border-right: 5px solid #1f1b50;
			border-bottom: 5px solid transparent;
			border-top: 5px solid transparent;
		}
		& .tileleft
		{
			border-top:0;
			border-left:0;
			border-right: 4px solid #1f1b50;
			top: 0;
			left: -123%;
		}
	}
	& a
	{
		position: relative;
		display: block;
		color: #4F4F4F;
		text-shadow: 1px 1px 1px rgba(6 10 115 / 13%);
		border-right: 1px solid #E7E7E7;
		padding: 1em 1.5em;
		transition: all .125s ease-in-out;
		-webkit-transition: all .125s ease-in-out;
	}
	& a:hover 
	{
		background-color: white;
		color: #1f1b50;
	}
	& input[type="checkbox"]:checked + .sub-menu 
	{
		display: none;
	}
	& label.drop-icon 
	{
		display: none;
	}
	& .drop-icon 
	{
		line-height: 1;
	}
& .main-menu {
	display: flex;
	list-style: none;
	align-items: center;
	height: 100px;
	background: #f2f2f2;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	& img 
		{
			height:4rem;
			padding:0.25rem 1.25rem 0 1rem;
		}
		& li > div .clm a:hover 
		{
			color: #a7222c;
			transition: color 0.2s;
		}
		& .clm a:hover 
		{
			color: #a7222c;
			text-decoration: underline;
		}
		& li:hover > .dropdown 
		{
			display: block;
			opacity: 1;
			z-index: 1;
		}
		& li > div .clm a, .mcd-menu .clm h3 
		{
			font-size: 1rem;
			font-weight: 400;
			font-family: inherit;
			margin: 0;
			padding: 8px 15px;
			display: block;
			color: inherit;
			text-decoration: none;
			text-align: center;
		}
		& li > div .clm h3 
		{
			text-align:center;
			font-size: 1.25rem;
			font-weight: 700;
		}
		& li > div .clm h3:not(:first-of-type) 
		{
			padding-top: 2rem;
		}
		& li.full-width .dropdown 
		{
			width: 100%;
			left: 0;
			box-sizing: border-box;
		}
		& .clm 
		{
			text-align: left;
			margin: 10px;
			vertical-align: top; /*or middle*/
			width: auto;
			min-width: 240px;
			display: inline-block;
			*display: inline;
			*zoom: 1;
		}
		& .dropdown 
		{
			text-align: left;
			left: 0;
			font-family: inherit;
			color: #1f1b50;
			background-color: #FFFFFF;
			border: none;
			position: absolute;
			box-shadow: 0 4px 8px rgba(0,0,0,0.3);
			display: none;
			opacity: 0;
			cursor: default;
		}
	}
}

#toggle-menu
{
	display: none;
	& .drop-icon
	{
		position: absolute;
		right: 1.5em;
		top: 1.25em;
	}
}