/* --- GLOBAL STYLES --- */
body { font-size:14px; line-height:20px; font-family:Arial, Verdana, sans-serif; margin:0; padding:0; background:#fff;  color:#444; text-align:left;}
img { display:block; border:0; }
p { padding:0 0 20px 0; margin:0; line-height:18px; color:#30201a; }
address { font-style:normal;}

/* --- GENERAL CLASSES --- */
.clear { clear:both;}
.photo { float:right; margin:0 0 10px 10px; border:2px solid #ccc;}
img.port { margin:0px 10px 10px 0px; border:1px solid #164D63; padding:5px;}
img.sidebarpic {margin-bottom:30px; width:295px;}

/* --- HEADINGS & PARAGRAPHS --- */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:12px; line-height:16px;  font-family: 'Average Sans',sans-serif; }
h1 { color:#30201a; font-size:27px;line-height:28px;  font-weight:700;  letter-spacing:0px;}
h1 span{ color:#30201a; font-size:26px; line-height:30px; font-weight:200; letter-spacing:-1px;}
h2 { color:#C69263; font-size:22px; line-height:26px;font-weight:normal; font-family: 'Average Sans',sans-serif;}
h3 { color:#fff; font-size:18px; line-height:20px;}
h4 { color:#CFC08B; font-size:17px;line-height:22px;  font-weight:700;  letter-spacing:0px;}
h5{ color:#C7B677; font-size:20px;  font-weight:600; }

/* ----- LINKS ----- */
a { color:#222; font-weight:100; text-decoration:underline;  }
a:hover { text-decoration:none; }
a:focus, a:hover, a:active { outline:none;}
 
 .container {width:70%; max-width:600px; margin-left:auto; margin-right:auto; text-align:center; }
 .container img { margin-left:auto; margin-right:auto; text-align:center;}
 
 #top_bar {width:100%; padding:10px 0px 10px 0px; background:#3c3c3b; margin-left:auto; margin-right:auto; text-align:center;}
 #be_more_bee {width:100%; height:371px; background:#eeeeee url('../images/be-more-bee.png') top center ; margin:4px 0px 0px 0px;}

 /* ------------------MEDIA QUERIES---------------------- */ 

/* ----------------------1010px------------------------ */
@media only screen and (max-width: 55em) {
 .container {width:80%;margin-top:3em;}
 #column1 {float:none; width:100%;  margin-right:0%;margin-bottom:2em; text-align:left;}
 #column2 {float:none; width:100%; text-align:left; }
}

/* ----------------------1010px------------------------ */
@media only screen and (max-width: 43em) {
 .container {width:88%; margin-top:2em;}
body { font-size:13px;}
}