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

@media only screen and (max-width: 1180px) {
	#home .left img { display: none; margin-bottom: -5px; }
	#home .right img { display: none; margin-bottom: -5px; }
	
	#home .left { 
		width: 300px;
		height: 535px;
		background-image: url('../img/kanye.png');
		background-position: right top;
		background-repeat: no-repeat;
	}
	
	#home .right { 
		width: 300px;
		height: 535px;
		background-image: url('../img/creativedirector.png');
		background-position: left top;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 1024px) {
	/* styles for narrow screens */
	
	.btn-container .wrapper.text p.or { display: none; }
	.btn-container { width: 100%; }
}

@media only screen and (max-width: 850px) {
	.btn { margin: 0 15px; }
	
}

@media only screen and (max-width: 800px) {
	/* styles for narrow screens */
	#home .left { display: none; }
	#home .right { display: none; }
	
	.btn { margin: 0 30px; }
	
	.btn-container { width: 720px; text-align: center; }
	.btn-container .text { width: 160px; display: none; }
	.btn-container  .wrapper { display: block; width: 325px; margin: 0px auto; padding: 2px; text-align: center; }
	.btn-container .wrapper.text p.or { display: none; }
	.btn-container.selected .wrapper.text p.response { width: 160px; margin-left: -9999; }
	
	.wrapper.kanye:hover, .wrapper.creativedirector:hover { background-image: none; height: 60px; }
	
	.btn-container.selected { height: 280px; }
	.selected .wrapper.kanye.active, selected .wrapper.creativedirector.active { height: 280px; }
	
	.btn-container.selected .wrapper { display: none; }
	.btn-container.selected .wrapper.active { display: block; }
	
	
	footer { background: rgb(235, 235, 235); Z-index: 1000; }
}

@media only screen and (max-width: 480px) {
	/* styles for narrow screens */
	#home .left { display: none; }
	#home .right { display: none; }
	
	.btn { margin: 0 30px; }
	
	.btn-container { width: 100%; text-align: center; }
	.btn-container  .wrapper { display: block; width: 325px; margin: 0px auto; padding: 2px; text-align: center; }
	.btn-container.selected .text {  display: block; }
	.btn-container.selected .text, .btn-container.selected .wrapper.text:hover { 
		width: 224px;
		left: 24%;
    	position: absolute;
    	top: 0;
		background-image: url('../img/response_bg_wide.png');
	}
	.btn-container .wrapper.text p.or { display: none; }
	.btn-container.selected .wrapper.text p.response { 
		width: 220px; 
		display: none; 
		background-image: url('../img/response_bg_wide.png');
	}
	
	.wrapper.kanye:hover, .wrapper.creativedirector:hover { background-image: none; height: 60px; }
	
	.btn-container.selected { height: 380px; }
	.btn-container.selected .wrapper.kanye, .btn-container.selected .wrapper.creativedirector { display: none; }
	.btn-container.selected .wrapper.active { display: block; }
	
	.btn-container.selected .wrapper.kanye.active, .btn-container.selected .wrapper.creativedirector.active { height: 380px; display: block; }
	.btn-container.selected .wrapper.creativedirector.active { background-position: center 190px; }
	
	.btn-standard:hover, .btn-standard:active {
		color: #FFFFFF;
		background: #e30d2b;
	}
	.btn-quote:hover {
		background: #e30d2b;	
	}
	
	.back { 
		width: 24px;
		heigth: 24px;
		background-image: url('../img/square.jpg');
		background-repeat: no-repeat;
		padding-top: 10px;
		padding-left: 10px;
		text-align: left;
		float: left;
		text-indent: -9999px;
		white-space: nowrap;
	 }
}