@media
only screen and (max-width: 55em),
only screen and (-webkit-min-device-pixel-ratio: 1.5)    and (max-width: 55em),
only screen and (   min--moz-device-pixel-ratio: 1.5)    and (max-width: 55em),
only screen and (     -o-min-device-pixel-ratio: 3/2)    and (max-width: 55em),
only screen and (        min-device-pixel-ratio: 1.5)    and (max-width: 55em),
only screen and (                min-resolution: 192dpi) and (max-width: 55em),
only screen and (                min-resolution: 2dppx)  and (max-width: 55em) {

	body {
		z-index: 1337;
	}

	header {
		position: relative;
	}

	.responsive-fix {
		display: block;
	}
	#main-wrapper {
		margin: 2% auto;
		margin: calc(20px) auto;
	}
	hgroup {
		padding-top: 9px;
	}

	.Work article {
		width: 46%;
		width: calc(50% - 40px);
	}
	#details {
		padding: 0% 2% 0 0;
		padding: 0 calc(20px) 0 0;
		width: 100%;
		float: none;
	}

	#description {
		padding: 0 0 0 0;
		width: 100%;
		float: none;
	}

	.Information #info, .Information #description, .Information #contact, .Information #details  {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-left: 0;
	}
	.Information #info {
		width: 46%;
		width: calc(((100% / 2) * 1) - 20px);
		margin: 0 2% 2% 0;
		margin: 0 calc(20px) calc(20px) 0;
		float: left;
	}
	.Information #contact {
		float: left;
		margin: 0 2%;
		margin: 0 calc(20px);
		width: 46%;
		width: calc(((100% / 2) * 1) - 40px);
	}

	.Information #details {
		width: calc(((100% / 2) * 1) - 40px);
		float: right;
	}

	.Information h1 {
		width: 50%;
	}

	.Information h2 {
		width: 100% !important;
		margin-right: 0 !important;
		padding: 0 0 15px 0 !important;
	}

	.Information #secondnav {
		display: none;
	}
	.Information #firstnav {
		display: block;
	}

	#title h2 {
		width: 80%;
	}

}

@media
only screen and (max-width: 30em),
only screen and (-webkit-min-device-pixel-ratio: 1.5)    and (max-width: 30em),
only screen and (   min--moz-device-pixel-ratio: 1.5)    and (max-width: 30em),
only screen and (     -o-min-device-pixel-ratio: 3/2)    and (max-width: 30em),
only screen and (        min-device-pixel-ratio: 1.5)    and (max-width: 30em),
only screen and (                min-resolution: 192dpi) and (max-width: 30em),
only screen and (                min-resolution: 2dppx)  and (max-width: 27em) {

	body {
		z-index: 1337;
	}

	.Work article {
		width: 96%;
		width: calc(100% - 40px);
		margin: 1.2% 2%;
		margin: calc(12px) calc(20px);
		overflow: hidden;
	}



	header {
		width: 96%;
		width: calc(100% - 40px);
		margin: 0 2%;
		margin: 0 calc(20px);
		position: relative;
		height: 84px;
	}
	header h1 {
		float: left;
		width: 100%;
	}

	header nav {
		float: left;
		margin-top: 9px;
	}

	header nav ul li {
		margin: 0 2% 0 0;
		margin: 0 calc(20px) 0 0;
	}

	hgroup {
		display: inline-block;
		width: 100%;
		height: auto;
		padding-bottom: 5px;
		padding-top: 17px;
	}

	.Information h1 {
		width: 100%;
	}

	#headergroup h1{
		border-bottom: 2px solid black;
		padding-bottom: 3px;
	}

	#main-wrapper {
		width: 100%;
		margin: 1% auto;
		margin: calc(10px) auto;
	}
	.Single #main-wrapper {
		margin: 0 auto;
	}

	.Information #info, .Information #description, .Information #contact, .Information #details  {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-left: 0;
	}
}

@media
only screen and (min-width: 1180px),
only screen and (-webkit-min-device-pixel-ratio: 1.5)    and (min-width: 1180px),
only screen and (   min--moz-device-pixel-ratio: 1.5)    and (min-width: 1180px),
only screen and (     -o-min-device-pixel-ratio: 3/2)    and (min-width: 1180px),
only screen and (        min-device-pixel-ratio: 1.5)    and (min-width: 1180px),
only screen and (                min-resolution: 192dpi) and (min-width: 1180px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1180px) {


	#slideshow {
		width: calc(((100% / 3) * 2) - 20px);
		margin-right: 20px;
		float: left;

	}

	#firstnav {
		margin-right: 20px;
	}

	#secondnav {
		display: block;
	}

	/*
	SINGLE
	*/

	#title {
		display: none;
	}

	#details {
		padding-top: 0px;
	}

	#details, #description {
		width: calc(((100% / 3) * 1) - 20px);
		margin-left: 20px;
		float: left;
	}

}