/*=========================================================================================/
AWESOME SAUCE STYLEZ | AUTHOR: Ryan Howorth AGENCY: RAH DESIGN | UPDATED: 02/20/15
/=========================================================================================*/

/* iPads (portrait) ----------- */

@media screen and (max-width: 768px) {
	.title h2{
		font-size:6em !important;
	}
	.start {
		top: 200px !important;
	}
	.title p {
		font-size: 2.2em !important;
	}
	.title {
		right: 17% !important;
	}
	.shirtimg p {
		font-size:1.5em !important;
	}
	#shirtmockup {
		width:600px !important;
		height:646px !important;
	}
	#tshirts {
		width: 500px !important;
	}
	.shirtimg h2 {
		font-size: 2.75em !important;	
	}
	.shirtimg img {
		top: -105px !important;
		position: absolute;
	}
	.shirtinfo {
		right: -136px !important;
		top: 218px !important;
		z-index: 3;
	}
	#projectimg{
		width: 635px !important;
		height: 461px !important;
	}
	#casestudies{
		width:588px!important
	}
	.casestudyimg {
		top: 22% !important;
	}
	#subnav ul {
    	width: 627px !important;
	}
	#about .aboutimg {
		width:768px !important;
		height: 542px !important;
		left: -385px !important;	
	}
	#nametag {
		position: relative;
		right: -90px !important;
		bottom: -715px !important;
		z-index: 2 !important;
	}
	#nametag img {
		width:79px !important;
		height:60px !important;	
	}
	
}
@media screen and (min-width: 768px) and (max-height: 900px) {
	#projectimg{
		width:757px !important;
		height:550px !important;
		display:block;	
	}
	#casestudies {
		width: 730px !important;
	}
	.shirtimg img{
		top:-125px!important;
		left:57px!important;
		width:557px!important;
		height:600px!important;	
	}
	.title {
		top:29%!important;	
	}
	#about .aboutimg {
		width: 915px !important;
		height: 646px !important;
		left: -480px !important;	
	}
	#nametag {
		position: relative;
		right: -82px !important;
		bottom: -700px !important;
		z-index: 1;
	}
	#nametag img {
		width:96px !important;
		height:71px !important;	
	}
}
@media screen and (min-width: 1925px) {
	.title h2 {
		font-size: 11.5em !important;
	}
	.start {
		top: 337px !important;
	}
	.shirtimg img {
		width:882px !important;
		height:950px !important;	
		top: -175px !important;
	}
	.shirtinfo {
		right: -147px;
		position: absolute;
		top: 260px !important;
		z-index: 3;
	}
	.shirtimg h2 {
		font-size: 6em !important;
	}
	.casestudyimg img {
		width: 1170px !important;
		height: 850px !important;
		right: 106px;
		position: relative;
		display:block;
	}
	#about .aboutimg {
		position: absolute;
		left: -760px !important;
		bottom: 0px;
		width:1416px !important;
		height:1000px !important;
	}
	#nametag {
		position: relative;
		right: -114px !important;
		bottom: -639px !important;
		z-index: 1;
	}
	#nametag img{
		width:146px !important;
		height:107px !important;	
	}
	
}

.preloadimg {
	position:absolute;
	top:-2px;
	left:-2px;	
}
.preloadimg img{
	width:1px;
	height:1px;
}

.colourBkg {
	width:100%;
	height:100vh;
}
#header #logo a.homeActive {
	cursor:default !important;
}
.navActive{
	color:#ff000c !important;
	cursor:default !important;
}
.subnavActive{
	color:#00000c !important;
	cursor:default !important;
}
.start{
	color:#ff000c;
	position: relative;
	top: 261px;
}
.error {
	font-size: 16px;
	color: #ff000c;
	top: 25px !important;
	position: relative;
}
.errorFocus{
	background-color: #fec0bf;
	border: 1px solid #f03c2e;	
}
body {
	overflow:hidden;
}

p{
	font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;
}

#footer p {
	font-size: 12px;
	color: #aeaeae;
	margin: 8px 10px 0 28px;
}

#header {
	min-width:668px;
	width: 100%;
	height: 56px;
	position:relative;
	top: 0px;
	z-index: 99000;
	background:#58585b;
	border-bottom:1px solid rgba(15, 10, 15, 0.15);	
}
#footer {
	width: 100%;
	height: 30px;
	position: fixed;
	position: absolute;
	bottom: 0px;
	z-index: 99000;
	background:#58585b;
	border-top:1px solid rgba(15, 10, 15, 0.15);
	
}
#contact {
	padding:0;
	background: #262426 url('../img/raster-light.png');
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	top: 50%;
	position: absolute;
	margin: 0 auto;
	margin-top: -147px;
	width: 100%;
	z-index:4;
}
#contact .container {
	margin: auto;
	width: 680px !important;
	overflow: hidden;
	width: 100%;
	height: 334px;
}

label {	
		font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #aeaeae; 
	}
	
form { 
	float: left;
	padding: 25px 25px 0px;
	width: 100%;
	top: 14px;
	position: relative;
}	
	form h1{
		margin-left:10px;
		margin-bottom:10px;
	}
	
	fieldset { border: none; }
	
	#user-details { 
		float: left;
		width: 230px; 
	}
	
	#user-message {
		width: 385px;
		left: 20px;
		position: relative;
	}
	input, textarea { 		
		padding: 8px; 
		margin: 14px 0; 
		width: 200px; 
		border: 1px dotted #FFF;
		
		/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
		-webkit-transition: background 0.3s linear;							
	}
	
	textarea {
		width: 369px;
		height: 88px;
		resize: none;
	}
	
	textarea:hover { 
		background: #e9f3f6; 
	} 
		
	input.submit{
		 	 
		margin-top: 10px;
		border: none;
	} 
	.submit-btn {
    	padding:0px !important;
    	width:170px; 
    	height:40px; 
    	border:none;
    	cursor:pointer;
	}
	input.submit-btn:hover { 		
		background-color:#000000;
		cursor:  pointer; 
	} 
	form p{
		text-indent:-9999px;
		float:right;
	}

.contactclose {
	background: url('../img/close-btn.png') no-repeat;
	width: 41px;
	height: 40px;
	top: 0;
	right: 18px;
	position: relative;
	float: right;
	font-size:0;
}


form h2{
	font-family: 'ProximaNovaRgBold';
	font-size:2em;
}
#contact p {
	color:#FFF;
	font-size:13px;
}
#header #nav {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
#subnav {
	width: 100%;
	height: 35px;
	position: absolute;
	top: 57px;
	left: 0px;
	background: #999999 url('../img/raster.png');
	z-index:2;
}
#subnav ul{
	width:612px;
	margin: auto !important;
}
#subnav ul li {
	height: 30px;
	padding-top: 10px;
	display: inline-block;
	margin-left: 30px;
	font-size: 14px;
	text-transform:	uppercase;
	color: white;
}
#subnav ul li:first-child {
	margin-left:0px;	
}
#subnav ul li a {
	height: 100%;
	display: block;
	font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;
	letter-spacing:1.5px;
	color: #656565;
}
#subnav ul li a:hover {
	color:#bfbfbf;
}
#header #nav ul{
	width: 574px;
	margin: auto !important;
	padding: 0 18px 0 77px;
}
#header #nav ul li {
	height: 30px;
	padding-top: 20px;
	display: inline-block;
	margin-left: 30px;
	font-size: 14px;
	text-transform: uppercase;
	color: white;
}
#header #nav ul li a {
	height: 100%;
	display: block;
	font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;
	letter-spacing:1.5px;
	color: #aeaeae;
}
#header #nav #social a {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	text-indent: -1000;
	z-index: 1000;
}
#header #nav #social #twitter {
	width: 57px;
	height: 56px;
	position: relative;
	display: inline-block;
}
#header #nav #social #linkedin {
	width: 57px;
	height: 56px;
	position: relative;
	display: inline-block;
}
.title h2 span{
	letter-spacing: -0.04em !important;
}

#header #nav #social #twitter a {
	background:url('../img/twitter.png') no-repeat;
	width:57px;
	height:56px;
	border-left:1px solid rgba(15, 10, 15, 0.15);
	float:right;
	position:relative;
	display: inline-block;
}
#header #logo a:hover, #header #nav #social #twitter a:hover, #header #nav #social #linkedin a:hover {
	background-position:0 -56px;
}
#header #nav #social #linkedin a {
	background:url('../img/linkedin.png') no-repeat;
	width:57px;
	height:56px;
	border-left:1px solid rgba(15, 10, 15, 0.15);
	float:right;
	position:relative;
	display: inline-block;
}
#header #nav #social {
	position: absolute;
	top:0px;
	right:0px;
	font-size: 0;

}
#header #logo {
	position: absolute;
	left:0px;
	z-index:1;
}
#header #logo a {
	background:url('../img/RAH.png') no-repeat ;
	background-position:0 -56px;
	width:80px;
	height:56px;
	border-right:1px solid rgba(15, 10, 15, 0.15);
	float:right;
	position:relative;
	display: inline-block;
	text-indent:-999999px;
}
a {
	text-decoration: none;
}

@font-face {
    font-family: 'ProximaNovaRgBold';
    src: url('../fonts/ProximaNova-Bold-webfont.eot');
    src: url('../fonts/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ProximaNova-Bold-webfont.woff') format('woff'),
         url('../fonts/ProximaNova-Bold-webfont.ttf') format('truetype'),
         url('../fonts/ProximaNova-Bold-webfont.svg#ProximaNovaRgBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ProximaNovaLtLight';
    src: url('../fonts/ProximaNova-Light-webfont.eot');
    src: url('../fonts/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ProximaNova-Light-webfont.woff') format('woff'),
         url('../fonts/ProximaNova-Light-webfont.ttf') format('truetype'),
         url('../fonts/ProximaNova-Light-webfont.svg#ProximaNovaLtLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
	* { margin: 0; padding: 0; }
	
	#screen{
		position:absolute;
		z-index:0;
		overflow:auto;
		height:100%;width:100%;
		background: url('../img/raster.png');
		top: 0;
		left: 0;
	}
	#bg { position: fixed; top: 0; left: 0; }
	.bgwidth { width: 100%; }
	.bgheight { height: 100%; }
	body { font-family:Helvetica, Arial, sans-serif; background:#FFFFFF; }
	.transparent {
  		/* IE 8 */
  		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
		/* IE 5-7 */
  		filter: alpha(opacity=15);
		/* Netscape */
  		-moz-opacity: 0.15;
		/* Safari 1.x */
  		-khtml-opacity: 0.15;
		/* Good browsers */
  		opacity: 0.15;
	}
	.opaque {
  		/* IE 8 */
  		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		/* IE 5-7 */
  		filter: alpha(opacity=100);
		/* Netscape */
  		-moz-opacity:1;
		/* Safari 1.x */
  		-khtml-opacity: 1;
		/* Good browsers */
  		opacity: 1;		
	}
	.buttons {
		position:absolute;
		top:20px;
		left:20px;	
	}
	.title{
		text-align:right;
		position:absolute;
		right:20%;
		top:40%;
		color:#FFF;	
		z-index:2;
	}
	.title p{
		color:#888;	
		font-size:2.5em;
		font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;	
	}
	.title h2{
		font-size:8.5em;
		line-height:0.8em;
		letter-spacing:-1px;
		font-family: 'ProximaNovaRgBold',Arial, Helvetica, sans-serif;
		font-weight: normal;
	}
	#tshirts {
		margin-right:auto;
		margin-left:auto;
		width: 588px;	
	}
	.shirtimg{
		text-align: right;
		position: absolute;
		top: 30%;
		color: #FFF;
		z-index: 2;
		clear: both;
	}
	.shirtimg h2 {
		font-size: 4em;
		line-height: 0.8em;
		letter-spacing: 0;
		font-family: 'ProximaNovaRgBold',Arial, Helvetica, sans-serif;
		font-weight: normal;
	}
	.shirtimg p{
		color:#ff000c;	
		font-size:2.2em;
		font-family: 'ProximaNovaLtLight',Arial, Helvetica, sans-serif;
		top: 200px !important;	
	}

	.shirtinfo{
		right: -147px;
		position: absolute;
		top: 230px;
		z-index: 3;
	}

	.shirtinfo i{
		color:#555;
	}
	.shirtimg img{
		
		top:-175px;
		position:absolute;
	}
	.arrows {
		position:absolute;
		width:100%;
		top:47%;
		clear:both;	
		z-index:2;
	}
	.arrows a {
		position:absolute;
		background: url('../img/arrows-sprite.png') no-repeat;
		width:57px;
		height:56px;
		text-indent:-99999px;
		
	}
	#detailarrows{
		left:-57px;
		position:absolute;
		top:40%;	
		z-index:2;
	}
	#detailarrows ul li{
		height: 58px;	
	}
	#detailarrows ul{
		list-style: none;
	}
	#detailarrows ul li a {
		position:absolute;
		background: url('../img/details-arrows-sprite.png') no-repeat;
		width:56px;
		height:57px;
		text-indent:-99999px;
		display:block;
		
	}
	a.up {
		background-position:0 0;
	}
	a.info {
		background-position: 0 -57px !important;
	}
	a.down {
		background-position: 0 -114px !important;
	}
	a.up:hover {
		background-position:-56px 0 !important;
	}
	a.info:hover {
		background-position: -56px -57px !important;
	}
	a.down:hover {
		background-position: -56px -114px !important;
	}
	a.next {
		background-position:-56px 0px;
	}
	a.prev:hover{
		background-position:0px -56px;
	}
	a.next:hover{
		background-position:-57px -56px;
	}
	.title p a.view{
		position:absolute;
		display:block;
		margin-top:15px;
		overflow:hidden;
		background: url('../img/view-sprite.png') no-repeat;
		height:56px;	
		width:238px;
		font-size:0;
		right: 0;
		background-position:0px -56px;
		-webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        -ms-transition: opacity 0.5s ease-in-out;   
        transition: opacity 0.5s ease-in-out;
	}
	.title p a.view:hover {
		background-position:0px 0px;	
	}
	.rahlogo {
		position:absolute;
		right:57px;
		bottom:80px;	
	}
	#message h2 {
		font-family: 'ProximaNovaRgBold',Arial, Helvetica, sans-serif;
		font-size: 3em;
		text-align: center;
		color: #FFFFFF;
	}
	#message p {
		color: #ff000c;
		font-size: 20px;
		text-indent: 0px;
		float: none;
		text-align: center;
	}
	#casestudies {
		margin-right: auto;
		margin-left: auto;
		width: 970px;
	}
	.casestudyimg {
		z-index: 2;
		position: absolute;
		top: 19%;
	}
	.bkgimage img {
		top:0;
		left:0;
		position:absolute;	
	}
	#infobox {
		position: relative;
		width: 367px;
		height: auto;
		background: #FFFFFF;
		z-index: 3;
		left:0px;
		top: 35px;
		color:#58585b;
		overflow:hidden;
	}
	#infobox h3{
		font-family: 'ProximaNovaRgBold',Arial, Helvetica, sans-serif;
		font-weight:normal;
		margin-bottom:20px;	
		font-size: 2em;
	}
	.infocontainer {
		position: absolute;
		margin: auto;
		padding: 0 40px;
		top: 50%;
		transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	.infoclose {
		background: url('../img/close-info-btn.png') no-repeat;
		width: 41px;
		height: 40px;
		top: 0;
		right: 0;
		position: absolute;
		float: right;
		font-size:0;
	}
	.infoleft p, .inforight p{
		margin-bottom:10px;
	}
	.infoleft p {
		color:#FF000C;	
	}
	.infoleft{
		float:left;	
	}
	.inforight {
		float:right;
		width: 200px;	
	}
	.infochallenge {
		clear:both;
		padding-top:20px;	
	}
	.infochallenge p{
		margin-bottom:10px;	
	}
	#about {
		font-size:0;
		width:1150px;
		height:	812px;
		margin: 0 50%;
		position: absolute;
		bottom:30px;
	}
	#about .aboutimg {
		position: absolute;
		left: -550px;
		bottom: 0px;	
		z-index:1;
	}
	#nametag {
		position: relative;
		right: -160px;
		bottom: -671px;
		z-index: 2;
	}
	#detailarrows .up:hover, #detailarrows .info:hover,#detailarrows .down:hover, .infoclose:hover {
		cursor:pointer;	
	}
	#cssda {
		right: 0;
		position: absolute;
		z-index: 2;
		top: 63px;	
	}