/* desktop view */
@media only screen and (min-width: 1001px) {
	
	#menu-button
	{
		display: none;
	}	

	#mainmenu
	{
		position: relative;
		display: table;
		overflow: visible;
		margin: 0;
		padding: .5rem 1rem;
		list-style-type: none;
		box-sizing: border-box;
		font-size: 1.25rem !important;
		height: 100%;
	}
	#mainmenu > li
	{
		display: table-cell;
		vertical-align: middle;
	}
	#mainmenu > li:not(:last-child)
	{
		padding-right: 1.5rem;
	}
	#mainmenu > li > a
	{
		/*text-transform: uppercase;*/
		color: #444444;
		font-weight: bold;
		text-decoration: none;
	}
	#mainmenu > li.selected > a,
	#mainmenu > li > a:hover
	{
		color: #F49E00;
	}
	#mainmenu li.selected > a
	{
		font-family: OpenSansBold;
	}
}


/*  mobile view  */
@media only screen and (max-width: 1000px) {
	
	
	#menu-button
	{
		position: absolute;
		display: block;
		width: 80px;
		height: 80px;
		right: 0;
		top: 0;
		cursor: pointer;
		text-align: center;
		color: #FFFFFF;
		background: #F49E00;
		border: 10px solid #F49E00;
		margin: 0;
		padding: 0;
		z-index: 99;
	}
	#menu-button .text
	{
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		clip: rect(0px, 0px, 0px, 0px);
	}
	#menu-button .bar
	{
		position: absolute;
		display: block;
		width: 80%;
		height: 10%;
		top: 50%;
		margin-top: -5%;
		margin-left: 10%;
		border-radius: 1px;
		background: #FFFFFF;
		transition: all 0.3s ease-in-out 0s;
		transform: rotate(0deg);
	}
	#menu-button .bar:nth-child(2)
	{
		margin-top: -25%;
	}
	#menu-button .bar:nth-child(4)
	{
		margin-top: 15%;
	}
	#menu-button:hover .bar:nth-child(3)
	{
		margin-left: 15%;
	}
	#menu-button.opened .bar:nth-child(2)
	{
		margin-top: -5%;
		transform: rotate(-45deg);
	}
	#menu-button.opened .bar:nth-child(3)
	{
		opacity: 0;
	}
	#menu-button.opened .bar:nth-child(4)
	{
		margin-top: -5%;
		transform: rotate(45deg);
	}
	
	#mainmenu
	{
		position: absolute;
		display: block;
		overflow: hidden;
		top: 80px;
		right: 0;
		z-index: 20;
		max-width: 300px;
		max-height: 0;
		padding: 0 20px;
		background: #F49E00;
		color: #FFFFFF;
		transition: max-height 0.5s ease-out;
		text-align: left;
	}
	#mainmenu.opened
	{
		max-height: 600px;
		transition: max-height 0.5s ease-in;
	}
	#mainmenu > li
	{
		position: relative;
		display: block;
		overflow: hidden;
		padding: 0.5em 0;
	}
	#mainmenu > li:not(:last-child)
	{
		border-bottom: 1px solid #FFFFFF;
	}
	#mainmenu > li:first-child
	{
		padding-top: 15px;
	}
	#mainmenu > li:last-child
	{
		padding-bottom: 15px;
	}
	#mainmenu a
	{
		color: #FFFFFF;
		text-decoration: none;
	}
	#mainmenu > li > a
	{
		text-transform: uppercase;
	}
	#mainmenu li.selected > a
	{
		font-family: OpenSansBold;
	}
	#mainmenu a:hover
	{
		color: #FFFFFF;
		text-decoration: underline;
	}
	#mainmenu ul
	{
		list-style-type: none;
		margin: 0;
		font-size: 0.9em;
	}
	#mainmenu ul > li
	{
		display: inline-block;
		padding-right: 1em;
	}
	
}