div.tagglogohead
{
	position: fixed;
	left: 1.5rem;
	top: 1rem;
	z-index: 100;
	height: 2rem;
}

img.tagglogoheadimg
{
	position: relative;
	left: 0rem;
	top: 0rem;
	/* width: 7rem; */
	height: 100%;
}

div.mainmenubtn
{
	position: fixed;
	right: 1.5rem;
	top: 1rem;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
	z-index: 100;
}

img.mainmenubtnimg
{
	position: absolute;
	width: 550%;
	height: 100%;
	left: 0%;
	top: 0%;
	transition: left 0.5s;
}

img.mainmenubtnimg:hover
{
	left: -450%;
}

div.mainmenupanel
{
	position: fixed;
	top: 0rem;
	left: 0rem;
	width: 100%;
	height: 14rem;
	z-index: 200;
	background-color: #00a4de;
	overflow: hidden;
	transition: top 0.5s ease-out;
	text-align: center;
}

div.mainmenupanelclosed
{
	top: -18rem;
}

div.mainmenuclosebtn
{
	position: absolute;
	right: 1rem;
	top: 0.5rem;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	background-color: #000000;
	border-radius: 50%;
	transition: background-color 0.5s;
}

img.mainmenuclosebtnimg
{
	position: absolute;
	width: 50%;
	height: 50%;
	left: 25%;
	top: 25%;
}

div.mainmenuclosebtn:hover
{
	background-color: transparent;
}

div.mainmenutitle
{
	position: relative;
	top: 0rem;
	width: 12rem;
	height: 5rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5rem;
	overflow: hidden;
}

img.mainmenutitleimg
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
}

div.mainmenusubtitle
{
	color: #ffffff;
	font-family: LatoRegular;
	font-size: 0.7rem;
	text-align: center;
	letter-spacing: 0.25em;
}

div.mainmenuunderline
{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	height: 0.2rem;
	margin: 1rem auto;
	background: red; /* For browsers that do not support gradients */
	background: linear-gradient(to right, rgb(177, 100, 254), rgb(24, 230, 168));
}

div.mainmenuitemgroup
{
	margin: 1.5rem auto;
	text-align: center;
}

div.mainmenuitem
{
	cursor: pointer;
	display: inline-block;
	width: 11rem;
	text-align: center;
	font-family: LatoRegular;
	font-size: 0.9rem;
	letter-spacing: 0.20em;
	color: #444444;
	transition: color 0.5s, letter-spacing 0.5s;
}

div.mainmenuitem:hover
{
	letter-spacing: 0.1em;
	color: #777777;
}

div.mainmenulinkedin
{
	/* display: inline-block; */
	position: absolute;
	bottom: 1rem;
	width: 100%;
	/* margin: 0.5rem auto; */
	text-align: center;
	font-family: FontAwesome, LatoBold;
	font-size: 0.8rem;
/*	font-weight: bold;*/
	color: #333333;
	/* transition: color 0.5s; */
}

a.mainmenulinkedinbtn
{
	color: #333333;
	transition: color 0.5s;
}

a.mainmenulinkedinbtn:hover
{
	color: #00ccff;
}


@media only screen and (min-width: 2000px)
{
	div.mainmenupanel {height: 16rem;}
	div.mainmenupanelclosed {top: -20rem;}
	div.mainmenutitle {width: 15rem; height: 6rem;}
	div.mainmenusubtitle {font-size: 0.9rem;}
	div.mainmenuitem {width: 15rem; font-size: 1.2rem;}
	div.mainmenulinkedin {font-size: 1.0rem;}
	div.tagglogohead {height: 2.5rem;}
	div.mainmenubtn {width: 1.3rem; height: 1.3rem;}
	div.mainmenuclosebtn {width: 2.5rem; height: 2.5rem;}
	div.mainmenuunderline {height: 0.25rem;}
}

@media only screen and (max-width: 1500px)
{
	div.mainmenupanel {height: 18rem;}
	div.mainmenupanelclosed {top: -22rem;}
	div.mainmenuitemgroup {width: 40rem; margin: 0.25rem auto;}
	div.mainmenuitem {display: inline-block; width: 30%; margin: 0.75em 0.75em auto auto;}
}

@media only screen and (max-width: 799px)
{
	div.mainmenupanel {height: 20rem;}
	div.mainmenupanelclosed {top: -24rem;}
	div.mainmenutitle {width: 10rem; height: 4rem;}
	div.mainmenusubtitle {font-size: 0.75rem;}
	div.mainmenuitemgroup {width: 28rem; margin: 0.25rem auto;}
	div.mainmenuitem {display: inline-block; width: 45%; font-size: 1.1rem; margin: 0.75em 0.75em auto auto;}
	div.mainmenulinkedin {font-size: 1.0rem;}
	div.tagglogohead {height: 1.5rem; left: 1rem;}
	div.mainmenubtn {width: 1rem; height: 1rem; right: 1rem;}
	div.mainmenuclosebtn {width: 2rem; height: 2rem; right: 0.5rem;}
	div.mainmenuunderline {height: 0.25rem; margin: 1rem auto;}
}

@media only screen and (max-width: 599px)
{
	div.mainmenupanel {height: 17rem;}
	div.mainmenupanelclosed {top: -21rem;}
	div.mainmenutitle {display: inline-block; width: 10rem; height: 3rem; margin-left: 0rem; margin-right: 1rem;}
	div.mainmenusubtitle {display: inline; position: relative; font-size: 0.75rem; top: -1rem; margin-left: 1rem; margin-right: 0rem;}
	div.mainmenuunderline {height: 0.25rem; margin: 0.25rem auto;}
}

@media only screen and (max-width: 479px)
{
	div.mainmenupanel {height: 28rem;}
	div.mainmenupanelclosed {top: -30rem;}
	div.mainmenutitle {display: block; width: 10rem; height: 4rem; margin-left: auto; margin-right: auto;}
	div.mainmenusubtitle {display: block; position: static; font-size: 0.75rem; margin-left: auto; margin-right: auto;}
	div.mainmenuitemgroup {width: 16rem; margin: 0.25rem auto;}
	div.mainmenuitem {display: block; width: 100%; font-size: 1.1rem; margin: 0.75em auto;}
	div.mainmenulinkedin {font-size: 1.0rem;}
	div.tagglogohead {height: 1.5rem; left: 1rem;}
	div.mainmenubtn {width: 1rem; height: 1rem; right: 1rem;}
	div.mainmenuclosebtn {width: 2rem; height: 2rem; right: 0.5rem;}
	div.mainmenuunderline {height: 0.25rem; margin: 1rem auto;}
}