#mobile-navigation,
#nav-trigger
	{
	display: none;
	}

#mobile-navigation
	{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	}
	
#mobile-navigation li
	{
	width: 200px;
	}
	
	
/* --------------------------------------- 1260 --------------------------------------- */	
	
	
@media screen and (max-width: 1260px)
	{
	#site-header
		{
		padding-right: 3%;
		padding-left: 3%;
		}
	}
	
	
/* --------------------------------------- 910 --------------------------------------- */	


@media screen and (max-width: 910px)
	{
	#mobile-navigation,
	#nav-trigger
		{
		display: block;
		}
		
	#site-navigation
		{
		display: none;
		}
		
	body
		{
		overflow-x: hidden;
		}
		
	#content
		{
		padding-right: 3%;
		padding-left: 3%;
		}
		
	/* Site Wrapper - Everything that isn't navigation */
	.site-wrap
		{
		/* Critical position and size styles */
		position: relative;
		min-height: 100%;
		min-width: 100%;
		padding-top: 30px;
		top: 0;
		bottom: 100%;
		left: 0;
		background-color: #000; /* Needs a background or else the nav will show through */
		z-index: 1;
		}
		
	/* Nav Trigger */
	.nav-trigger {
		position: absolute;
		clip: rect(0, 0, 0, 0);
		}
		
	label[for="nav-trigger"]
		{
		/* critical positioning styles */
		position: fixed;
		top: 15px;
		left: 15px;
		
		/* non-critical apperance styles */
		height: 30px;
		width: 30px;
		cursor: pointer;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' fill='white' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
		background-size: contain;
		background-color: rgba(0,0,0,0.75);
		 /* IE up to version 10 doesnt support svg and we cant serve IE 10 separate styles so use gif */
		background: #000 url(../../images/mobile_navigation.gif) center center no-repeat;
		outline: rgba(0,0,0,0.75) 10px solid;
		z-index: 3;
		}
		
	/* Make the Magic Happen */
	.nav-trigger + label, .site-wrap {
		transition: left 0.2s;
		}
		
	.nav-trigger:checked + label {
		left: 215px;
		}
		
	.nav-trigger:checked ~ .site-wrap {
		left: 200px;
		box-shadow: rgba(0,0,0,0.15) 0px 0px 5px 5px;
		}
	}
	

/* --------------------------------------- 700 --------------------------------------- */	


@media screen and (max-width: 700px)
	{
	#site-header
		{
		text-align: left;
		}
		
	.left
		{
		float: none;
		width: auto;
		}
		
	.right
		{
		float: none;
		width: auto;
		padding-top: 2rem;
		}
	}
	
	
/* --------------------------------------- 500 --------------------------------------- */	


@media screen and (max-width: 500px)
	{
	#site-header #logo
		{
		display: block;
		float: none;
		margin-bottom: 2em;
		}

	#language-selection
		{
		clear: both;
		float: none;
		display: inline-block;
		}
		
	#language-selection a
		{
		padding-right: 20px;
		}
		
	#language-selection ul
		{
		padding: 5px 17px;
		font-size: 1.5rem;
		text-align: left;
		}
	}