@font-face {
 font-family: MyCustomFont;
 src: url("font/AvantGarGotItcTEE.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("font/AvantGarGotItcTEE.ttf") /* TTF file for CSS3 browsers */
}

#banners{
	width: 100%;
	position:relative;
	overflow:hidden;
}
.banner{
	position:relative;
	display:block;
	width:300px;
	height:389px;
	overflow:hidden;
	float:left;
	margin-right:10px;
	font:31px/30px MyCustomFont, Verdana, Arial, sans-serif;
	color:#fff;
	text-transform:uppercase;
} 
	.banner:hover{text-decoration:none;}
	.banner span{display:block; font:15px/19px MyCustomFont, Verdana, Arial, sans-serif; text-transform:none;}
	.banner img{position:absolute; left:0;}

.banner1{background:#b2aa94; margin-left:14px;}
	.banner1 .indents{padding:15px 15px 0; }
	.banner1 span{color:#eaeae4; padding:5px 0 0 5px;}
	.banner1 img{bottom:-100%;}
.banner2{background:#dc6e4a;}
	.banner2 img{top:-100%;}
	.banner2 span{color:#e8c2b7; padding:10px 0 0 5px;}
	.banner2 .indents{padding:250px 15px 0;}
.banner3{background:#e78225;}
	.banner3 .indents{padding:15px 15px 0;}
	.banner3 span{color:#f7d2ae; padding:5px 0 0 2px;}
	.banner3 img{bottom:-100%;}
@media only screen and (max-width: 995px){
	.banner{width:246px; height:330px; font-size:24px; line-height:24px;}
	.banner1 .indents, .banner3 .indents{padding:20px 20px 0;}
	.banner2 .indents{padding:215px 20px 0;}
	.banner1{background:#b2aa94; margin-left:0px;}
}
@media only screen and (max-width: 767px){
	.banner{width:134px; margin-right:5px; height:183px; font-size:12px; line-height:20px; }
	.banner span{display:none;}
	.banner1 .indents, .banner3 .indents{padding:15px 15px 0;}
	.banner2 .indents{padding:115px 15px 0;}
	
}
@media only screen and (max-width: 479px){
	.banner{width:96px; margin-right:6px; height:165px; font-size:12px; line-height:19px;}
	.banner1 .indents, .banner3 .indents{padding:15px 12px 0;}
	.banner2 .indents{padding:90px 12px 0;}
}