@media handheld, only screen and (max-device-width: 800px) and (orientation: portrait) 
{
	

		#menu
		{
			position: fixed;
			width: 100%;
			height: 0%;
			font-family: "Josefin Sans", "Arial", serif; 
            font-weight: 700;
			font-size: 2.2em;
			color: #333;
			-webkit-box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
		    box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
			
		}


		#logo
		{
			width: 100%;
			height: 60%;
			margin-bottom: 8%;
			opacity: 1;
			text-align: center;
			background-color: #000;
			/* Firefox */
			-moz-transition: all 0.2s ease;
			/* WebKit */
			-webkit-transition: all 0.2s ease;
			/* Opera */
			-o-transition: all 0.2s ease;
			/* Standard */
			transition: all 0.2s ease;

		}

		#logo #canvas_logo
		{
			width: 25%;
			height: 100%;
			margin: 0 auto;
			background:url("../assets/logo_w.png")no-repeat center center;
			background-size: 90%; 
		}

		#logo #canvas_logo img
		{
			width: 120px;
			height: auto;
		}

		#logo:hover
		{
			margin-top: -10px;
			padding-bottom: 10px;
			margin-bottom: 8%;
			opacity: 1;
			background-color: #000;
		}

		#menu ul 
		{
			margin-top: -30px;
			font-weight: bold;
		}

		#menu ul li
		{
			display: inline-block;
			opacity: 0;
			font-size: 1em;
			margin-top: -200px; 
			
		}

		#contsound:hover
		{
			animation-play-state:paused;
			-webkit-animation-play-state:paused; /* Safari and Chrome */
			width: 30%;
		}

		#contsound:hover #soundcloud, #contsound:focus #soundcloud, #contsound:active #soundcloud
		{
			height: 250px;
		}


}

@media only screen and (max-width: 800px) 
{
		#menu
		{
			position: fixed;
			width: 100%;
			height: 0%;
			font-family: "Josefin Sans", "Arial", serif; 
            font-weight: 700;
			font-size: 1.4em;
			color: #333;
			-webkit-box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
		    box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
			
		}


		#logo
		{
			width: 100%;
			height: 60%;
			margin-bottom: 8%;
			opacity: 1;
			text-align: center;
			background-color: #000;
			/* Firefox */
			-moz-transition: all 0.2s ease;
			/* WebKit */
			-webkit-transition: all 0.2s ease;
			/* Opera */
			-o-transition: all 0.2s ease;
			/* Standard */
			transition: all 0.2s ease;

		}

		#logo #canvas_logo
		{
			width: 25%;
			height: 100%;
			margin: 0 auto;
			background:url("../assets/logo_w.png")no-repeat center center;
			background-size: 90%; 
		}

		#logo #canvas_logo img
		{
			width: 120px;
			height: auto;
		}

		#logo:hover
		{
			margin-top: -10px;
			padding-bottom: 10px;
			margin-bottom: 8%;
			opacity: 1;
			background-color: #000;
		}

		#menu ul 
		{
			margin-top: -60px;
			font-weight: bold;
		}

		#menu ul li
		{
			display: inline-block;
			opacity: 0;
			font-size: 1.4em;
			margin-top: -200px; 
			
		}

	#grid li span h2
	{
		display: none;
	}

	#grid li span p
	{
		display: none;
	}

	#grid li span
	{
		display: none;
	}

	#contsound:hover
	{
		animation-play-state:paused;
		-webkit-animation-play-state:paused; /* Safari and Chrome */
		width: 30%;
	}



}


@media handheld, only screen and (max-width: 400px) and (max-height: 500px), only screen and (max-device-width: 400px) and (max-device-height: 500px) and (orientation: portrait)
{
		#menu
		{
			position: fixed;
			width: 100%;
			height: 0%;
			font-family: "Josefin Sans", "Arial", serif; 
            font-weight: 700;
			font-size: 1.4em;
			color: #333;
			-webkit-box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
		    box-shadow:  5px 0px 7px 0px rgba(0, 0, 0, 0.15);
			
		}

		#logo
		{
			width: 100%;
			height: 60%;
			margin-bottom: 8%;
			opacity: 1;
			text-align: center;
			background-color: #000;
			/* Firefox */
			-moz-transition: all 0.2s ease;
			/* WebKit */
			-webkit-transition: all 0.2s ease;
			/* Opera */
			-o-transition: all 0.2s ease;
			/* Standard */
			transition: all 0.2s ease;

		}

		#logo #canvas_logo
		{
			width: 25%;
			height: 100%;
			margin: 0 auto;
			background:url("../assets/logo_w.png")no-repeat center center;
			background-size: 90%; 
		}

		#logo #canvas_logo img
		{
			width: 100px;
			height: auto;
		}

		#logo:hover
		{
			margin-top: -10px;
			padding-bottom: 10px;
			margin-bottom: 8%;
			opacity: 1;
			background-color: #000;
		}

		#menu ul 
		{
			margin-top: -60px;
			font-weight: bold;
		}

		#menu ul li
		{
			display: inline-block;
			opacity: 0;
			font-size: 1.4em;
			margin-top: -200px; 
			
		}

		#grid li span h2
	{
		display: none;
	}

	#grid li span p
	{
		display: none;
	}

	#grid li span
	{
		display: none;
	}

	#contsound:hover
	{
		animation-play-state:paused;
		-webkit-animation-play-state:paused; /* Safari and Chrome */
		width: 30%;
	}



}