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

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

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

.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;}

.btns {float: none; margin: 0 auto; margin-top: 15px; width: 60% !important;}
.btn_more {float: none; margin: 0 auto; margin-top: 35px; width: 100px !important;}

.obj {width: 33%; float: left; margin-bottom: 70px;  text-align: center;}
.photo {width: 100%;}
.photo {color: #fff; font-size: 35px; padding: 15px;}
.obj  h2 {font-size: 25px; padding: 5px; line-height: 1.2em; margin: 0;}
.obj  h1 {font-size: 14px; padding: 0; }
.photo img { width: 200px;}

#content {padding: 60px 10px 60px 10px; background: #fff; color: #676f7c; text-align: center; }
#content .wrap {position: relative;}
#content h1 {color: #000; font-size: 14px; padding: 0;}
#content h2 {color: #000; font-size: 25px; padding: 5px; line-height: 1.2em; margin: 0;}
#content p {padding: 5px 15px 0 15px; text-align: center;}

#photo {max-width: 200px;margin: 0 auto;}
#photo img {width: 90%;}

#message_wrap {background: #222; text-align: center; padding: 60px 15px;} 
#message_wrap  h3 {color: #fff; font-size: 35px; padding: 15px;}
#message_wrap  h2 {color: #fcbc1c; font-size: 25px; padding: 5px; line-height: 1.2em; margin: 0;}
#message_wrap  h1 {color: #ececec; font-size: 14px; padding: 0; }

#laquo {text-align: left; margin-top: 20px;}
#raquo {text-align: right;}
#message_wrap  p {padding: 5px 50px; color: #fff; font-size: 14px;}

#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;}

}