@charset "UTF-8";
/* CSS Document */

#rays-logo {
	/*width: calc(100% - 490px);*/
	width: calc(325px - 0px);
	height: 285px;
	float: left;
	margin-bottom: 9px;
}

#rays-logo a {
	height: 245px;
	background-image: url(../images/artwork/rays-texas-bbq/rays-texas-bbq.png);
}

		#rays-logo a:hover {
			height: 245px;
			background-image: url(../images/artwork/rays-texas-bbq/rays-texas-bbq-hover.png);
		}


#rays-alternative-logos {
	width: 160px;
	height: 285px; 
	float: right;
	margin: 0 0 9px 0;
}

#rays-alternative-logos a {
	height: 245px;
	background-image: url(../images/artwork/rays-texas-bbq/saucypig.png);
}

		#rays-alternative-logos a:hover {
			height: 245px;
			background-image: url(../images/artwork/rays-texas-bbq/saucypig-hover.png);
		}

#rays-business-cards {
	/*background-color: red;*/
	overflow: hidden;
	float: right;
	margin: 0 9px 0 9px;
}

#rays-business-cards div a { /*background-color: green;*/ }

		#rays-bizcard_front {
			width: 67px;
			height: 160px;
			margin-bottom: 9px;
			float: left;
			margin-right: 9px;
		}
		
		#rays-bizcard_back {
			width: 67px;
			height: 160px;
			float: right; 
		}
		
				#rays-bizcard_front a {
					height: 117px;
					background-image: url(../images/artwork/rays-texas-bbq/rays-biz-card-front.png);
				}
				
						#rays-bizcard_front a:hover {
							background-image: url(../images/artwork/rays-texas-bbq/rays-biz-card-front-hover.png);
						}
				
				#rays-bizcard_back a {
					height: 117px;
					background-image: url(../images/artwork/rays-texas-bbq/rays-biz-card-back.png);
				}
				
						#rays-bizcard_back a:hover {
							background-image: url(../images/artwork/rays-texas-bbq/rays-biz-card-back-hover.png);
						}

#doorhanger {
	/*width: calc(50% - 73px);*/
	width: 162px;
	height: 435px;
	float: right;
	margin-left: 9px;
	margin-bottom: 9px;
}

#doorhanger a {
	height: 395px;
	background-image: url(../images/artwork/rays-texas-bbq/doorhanger.png);
}

		#doorhanger a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/doorhanger-hover.png);
		}

#rays-about {
	width: calc(325px - 0px);
	/*width: calc(100% - 615px);*/
	min-height: 200px;
	float: left;
	line-height: 20px;
	margin: 20px 0 9px 0;
}


#rays-bw-logo {
	/*width: 260px;
	width: calc(25% - 0px);*/
	width: 160px;
	height: 285px; 
	float: right;
	margin-left: 9px;
}

#rays-bw-logo a {
	height: 245px;
	background-image: url(../images/artwork/rays-texas-bbq/saucypig-bw.png);
}

		#rays-bw-logo a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/saucypig-bw-hover.png);
		}

#sketch {
	width: calc(100% - 540px);
	/*width: 170px;*/
	height: 340px; 
	float: right;
	margin-left: 40px;
}

#sketch a {
	height: 300px;
	background-image: url(../images/artwork/rays-texas-bbq/saucypig_sketch.png);
}

		#sketch a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/saucypig_sketch-hover.png);
		}

.rays-desktop {
	/*width: 472px;*/
	width: calc(100% - 386px);
	height: 394px;
	float: left;
}

.rays-desktop a {
	height: 354px;
	background-image: url(../images/artwork/rays-texas-bbq/desktop4.png);
}

		.rays-desktop a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/desktop-hover.png);
		}

.rays-tablet {
	width: 205px;
	/*width: 20%;*/
	height: 290px;
	float: left;
	margin-left: 9px;
	margin-top: 30px;
}

.rays-tablet a {
	height: 250px;
	background-image: url(../images/artwork/rays-texas-bbq/tablet1.png);
}

		.rays-tablet a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/tablet-hover.png);
		}

.rays-phone {
	width: 120px;
	/*width: 10%;*/
	height: 226px;
	float: right;
	margin-left: 35px;
}

.rays-phone a {
	height: 186px;
	background-image: url(../images/artwork/rays-texas-bbq/phone.png);
}

		.rays-phone a:hover {
			background-image: url(../images/artwork/rays-texas-bbq/phone-hover.png);
		}


@media only screen and (max-width: 880px), only screen and (max-device-width: 880px) {
	
	#rays-bizcard_front {
			float: none;
		}
		
		#rays-bizcard_back {
			float: left;
		}
		
		#rays-alternative-logos {
			height: 330px;
		}
	
}

@media only screen and (max-width: 815px), only screen and (max-device-width: 815px) {
	
	#rays-logo {
		width: calc(100% - 427px);
	}
	
}

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

	#rays-about {
		width: calc(40% - 92px);
	}
	
	#sketch {
		width: calc(60% - 120px);
		height: 300px;
	}
}