@import url("default.css");


#banner {width: 100%; position: relative;}
#banner img {width: 100%; display: block;}

#text_wrap {position: absolute; top:0; left:0; bottom:0; right:0; margin: auto; height: 90px; color: #ebebeb; text-align: center;}

#text_wrap h1 {height: 45px; font-size: 45px; margin-bottom: 20px;  background: url("../images/headline.png") 50% 100% no-repeat;}
#bg {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0;}

.about {float: left; width: 50%; padding: 25px; color: #989898;}
#section {background: #fff; padding: 20px 15px;}

.left {float: left; width: 5%; border-top: solid 3px #fcbc1c;}
.right {float: left; width: 95%; border-top: solid 1px #e6e6e6; margin-top: 1px;}

.about h1 {font-size: 35px; color: #000; padding: 10px 0 25px 0;}
.about h2 {background: url("../images/check.png") 0 50% no-repeat; padding-left: 30px; font-size: 15px; color: #000;}

#pics {width: 100%;}
#pics img {width: 100%;}


/*Mobile view*/
@media screen and (max-width: 75em) { 
#content h1 {font-size: 20px;}
}



@media screen and (max-width: 60em) { 

#text_wrap { height: 60px; }
#text_wrap h1 {font-size: 35px; height: 30px;}

}

@media screen and (max-width: 50em) { 

}

@media screen and (max-width: 48em) { 
.about {float: none; width: 100%; padding: 25px;}
}

@media screen and (max-width: 44em) { 

#message_wrap  h3 {font-size: 25px;}

}


@media screen and (max-width: 40em) { 
	.obj {width: 50%;}
	.photo img { width: 70%;}
}


@media screen and (max-width: 30em) { 

#text_wrap { height: 40px;}
#text_wrap h1 {font-size: 20px; height: 25px; margin-bottom: 5px;}
#message_wrap  h3 {font-size: 18px;}
#message_wrap  h2 {font-size: 18px;}
#laquo img, #raquo img {width: 10%;}

.obj {width: 100%;}
	.photo img { width: 50%;}
	
}

@media screen and (max-width: 25em) { 
#text_wrap {position: relative; height:100px; padding-top: 30px;}
#text_wrap h1 {font-size: 18px; height: 22px; margin-bottom: 0px;}

}