/* start of desktop styles */

@media screen and (max-width: 999px) {
/* start of large tablet styles */
	header,
	section,
	footer
	{
		width: 768px;
	}
	
	header .logo
	{
		max-width: 150px;
		padding: 31px 10px !important;
	}
	
	#myLinks
	{
		display:block;
	}
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
	header,
	section,
	footer
	{
		width: 480px;
	}
	
	header .logo
	{
		max-width: 150px;
		padding: 31px 10px !important;
	}

	nav
	{
		background: transparent;
		position: relative;
	}
	
	nav .navbutton
	{
		display: block;
	}

	nav .navbutton
	{
		background: green;
		margin-top: 35px;
		padding: 15px;
		float:right;
		/*line-height: 50px;*/
	}
	
	nav .links
	{
		position: absolute;
		background-color: yellow;
		margin: 100px 0px 0 0;
		width: 480px;
		right: 0;
		
	}
	
	#myLinks
	{
		display:none;
	}
	
			
	nav a
	{
		display: block;
		background-color: transparent;
		
	}
	
	nav a:hover
	{
		background: purple;
	}

}

@media screen and (max-width: 479px) {
/* start of phone styles */
	header,
	section,
	footer
	{
		width: 90%;
	}
	header
	{
		height: 80px;
	}
	
	
	header .logo
	{
		max-width: 100px;
		padding: 18px 10px !important;
	}
	nav .navbutton
	{
		margin-top: 16px;
	}
	nav .links
	{
		width: 320px;
	}
}