html {margin: 0; padding: 0; width: 100%; height: 100%}
body {background-color: #fff; padding: 0; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color:#000; width: 100%; height: 100%}

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

header{width: 100%; height: 64px; color: #c80117}
	header .logo{position: absolute; top: 14px; width: 103px; left: calc(((100% - 1400px) / 2) + 53px)}

#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: 221px; background: #c80117; color: #fff; height: 40px; line-height: 38px; font-size: 18px; display: inline-block; font-family: 'Museo-Slab'; font-weight: bold; border-radius: 4px; transition: all 0.3s;border:0; text-align: center;}
				#show_wrapper > div button.button:hover{background: #8c0010}
	#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;}
			#social_icons a{display: block; float: right; width: 36px; height: 40px;}
			
footer{width: 100%; background: #333333; 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: 16px;}
}

@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: 7px;}
}

@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{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-weight: normal}
	
	#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;
	}
	
	#copy .hbo_link{width: 260px; }

}

@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) {

}

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