html {margin: 0; padding: 0; width: 100%; height: 100%}
body {background-color: #fff; padding: 0; margin: 0; font-family: 'Grubhub Sans Light'; color:#000; width: 100%; height: 100%}

.self_clear:after {content: ""; clear: both; display: table;}
.bold{font-family: 'Grubhub Sans Bold';}
a{color: inherit; text-decoration: none;}
*{box-sizing: border-box}

header{width: 100%; height: 64px; background: #f63440; color: #fff}
	header .logo{position: absolute; width: 133px; top: 20px; left: calc(((100% - 1400px) / 2) + 48px)}
	
#hero_wrapper{position: relative; height: 513px; background: url("../images/hero.jpg") center center no-repeat; background-size: cover;}
#hero_wrapper img.hero{display: none}
#hero_wrapper img.feast{position: absolute; top: 35%; left: 23%; width: 315px; margin: -106px 0 0 -157px; }

#copy_head{text-align: center; color: #fff; background: #40c2de; padding: 35px 0; font-size: 24px}
	#copy_head p{margin: 0 10px 5px 10px;}
	
#container {max-width: 100%; min-height: 600px; margin: 15px auto 0 auto; position: relative; }
	#container img{max-width: 100%;}
	 
	 #fake_border{position: absolute; top: 0; left: 0; width: 100%; height: 597px; border: 2px solid #000; z-index: -1;}
	 
	 #copy{text-align: center; padding: 48px 0 30px 0;}
		#copy p {font-size: 24px; line-height: 24px; margin: 0 10px 7px 10px;}
		#copy p.bold{font-size: 28px; line-height: 30px; margin: 0 0 23px 0;}
		#copy p.legal{font-size: 14px; line-height: 14px; margin: 20px 10px 0 10px}
		
		#copy .hbo_link{display: inline-block; width: 220px; font-size: 20px; margin-top: 20px; text-align: center; border: 2px solid #000;  color: #000; background-color: white; border-radius: 4px; height: 40px; line-height: 40px; transition: all 0.3s}
			#copy .hbo_link:hover{background: #000; color: #fff;}
		
	#show_wrapper{text-align: center; position: relative;}
		#show_wrapper > div{position: relative; display: inline-block; margin: 10px 3px; color: #000; width: 268px; height: 492px; vertical-align: top;}
			#show_wrapper > div:first-of-type{margin-left: 0}
			#show_wrapper > div:last-of-type{margin-right: 0}
			
			#show_wrapper > div img{position: absolute; top: 0; left: 0}
			
			#show_wrapper > div div.show_content{background: #cacaca; position: absolute; bottom: 0; height: 122px; width: 100%;}
			#show_wrapper > div p{position: absolute; bottom: 71px; width: 100%; font-size: 19px; width: 100%; margin: 0;}
			#show_wrapper > div button.button{position: relative; top: 65px; width: 201px; background: #007aff; color: #fff; height: 40px; font-size: 18px; line-height: 40px; display: inline-block; font-family: 'Grubhub Sans Bold'; border-radius: 4px; transition: all 0.3s; border:0;	text-align: center; }
				#show_wrapper > div button.button:hover{background: #0062cc}
	#social{padding: 36px 0 51px 0; text-align: center;}
		#social p{display: inline-block; vertical-align: top; height: 38px; line-height: 38px; margin: 0; font-size: 28px; margin-bottom: 38px;}
		#social_icons{height: 38px; width: 154px; background: url("../images/social-icons.png") no-repeat; display: inline-block; vertical-align: top;}
			#social_icons a{display: block; float: right; width: 36px; height: 40px;}
			
footer{width: 100%; background: #f63440; color: #fff; font-size: 12px; text-align: center; padding: 15px}
	footer p{max-width: 1180px; margin: 0 auto 15px auto;}
	

@media all and (max-width: 1399px) and (min-width: 1300px) {

	#show_wrapper > div{width: 255px; margin: 10px 0px}
		#show_wrapper > div div.button{left: 27px;}
}

@media all and (max-width: 1299px) and (min-width: 1200px) {

	#fake_border{height: 562px}
	#show_wrapper > div{width: 235px; height: 455px; margin: 10px 0px}
		#show_wrapper > div div.button{left: 17px;}
}

@media all and (max-width: 1349px) {

	header .logo{left: 48px;}
	#hero_wrapper{background-size: auto;}
}




@media all and (max-width: 1199px) {

	#fake_border{display: none;}
	#show_wrapper > div{height: 500px; width: 292px;}
		#show_wrapper > div img{padding: 10px; border: 2px solid #000;}
		#show_wrapper > div div.show_content{width: 268px; left: 12px;}
			#show_wrapper > div div.button{left: 23px;}

}


@media all and (max-width: 767px) {


	header .logo{top: 20px; left: 10px;}
	
	#hero_wrapper img.feast{
		-ms-transform: scale(0.75,0.75);
		-webkit-transform: scale(0.75,0.75); 
		transform: scale(0.75,0.75);
		/*margin-left: -185px;*/
	}
	
	#copy_head.bold{font-family: 'Grubhub Sans Light';}
	
	#show_wrapper > div{margin-bottom: 60px;}
	
}

@media all and (max-width: 549px) {

	#hero_wrapper img.feast{
		-ms-transform: scale(0.6,0.6);
		-webkit-transform: scale(0.6,0.6); 
		transform: scale(0.6,0.6);
		margin-left: -145px;
		
	}
}

@media all and (max-width: 400px) {
#hero_wrapper{height: auto}
#hero_wrapper img.hero{display: block; max-width: 100%;}

	#hero_wrapper img.feast{
		-ms-transform: scale(0.4,0.4);
		-webkit-transform: scale(0.4,0.4); 
		transform: scale(0.4,0.4);
		margin-top: -95px;
	}


}

@media all and (max-width: 370px) {

	#hero_wrapper img.feast{
		-ms-transform: scale(0.3,0.3);
		-webkit-transform: scale(0.3,0.3); 
		transform: scale(0.3,0.3);
	}
}

@media all and (max-width: 349px) {

/*	#hero_wrapper img.feast{
		margin-left: -165px;
		margin-top: -103px;
	}*/
}



@font-face {
	font-family: 'Grubhub Sans Bold';
	src: url('Grubhub-Sans-Bold.eot#iefix');
	src: url('Grubhub-Sans-Bold.eot#iefix'), url('fonts/Grubhub-Sans-Bold.woff') format('woff'), url('fonts/Grubhub-Sans-Bold.otf') format('opentype'), url('fonts/Grubhub-Sans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Grubhub Sans Light';
	src: url('Grubhub-Sans-Light.eot#iefix');
	src: url('Grubhub-Sans-Light.eot#iefix'), url('fonts/Grubhub-Sans-Light.woff') format('woff'), url('fonts/Grubhub-Sans-Light.otf') format('opentype'), url('fonts/Grubhub-Sans-Light.ttf') format('truetype');
}

#fake {position: absolute; top: -715px; left: 0; width: 100%; height: 2200px; background: url('../images/hbo-latest.jpg') no-repeat; opacity: .5; display: none;}