/* Author: Christiana Basham */
/* dark ocre: #ab8d3a light ocre: #b9a05a 
   dark orange #e45d31 light orange #f58343 
   dark red: #9e1e20 light red: #a72022 
   dark green: #12301f light green: #706F40 */



section, header, footer, nav, html, body, p, h1, h2, h3, div, img, a, ul, li {
	  margin: 0;
	  padding: 0;
}

@font-face {
   font-family: KremlinMinister;
   src: url(../fonts/KremlinMinister.ttf);
}

html {
    background: #706F40;
}

body {
    width: 80%;
    max-width: 1280px; 
    min-width: 350px;
    margin: 0 auto; 
    padding: 2% 3.8% 2% 2%;
    background: #fff; 
    font-family: 'Lucida Console', Monaco, monospace;
}

header {
    width: 100%;
    position: relative;
}


h1, h2, h3, h4 {
   color: #9e1e20;    
   font-family: KremlinMinister, 'Lucida Console', Monaco, monospace;
   line-height: 125%;
   
}

h2 {
   line-height: 115%; 
   font-size: 200%; 
}

p {
  
    line-height: 21px; 
    font-size: 14px;
    letter-spacing: 0;
}

a {
  text-decoration: none;  
}

ul {
   list-style-type: none; 
}

.breadcrumbs {
   font-size: 80%;
   margin: 20px 2.04081690%; 
}

.breadcrumbs h2 {
    color: #ab8d3a; 
}

.breadcrumbs a {
   text-decoration: underline;
   color: #b9a05a; 
   
}
/* -------BEGIN masthead styles------------------------------------ */


.masthead { 
    width: 71.428571%;
    margin-left: 30%; 
    position: absolute;
    top: 6em; 
    z-index: 5;
}

.masthead h1 {
    font-size: 395%;
    display: inline-block;
    margin-bottom: 5.2%;
    
}

.masthead p {
    text-align: center;
    display: inline-block;
    margin-right: 1%;
    margin-left: 1%;
    position: relative;
    float: left;
}

img.logo  {
    margin-left: 1.3%;
    margin-right: 2.040816%; 
    width: 98.7%; 
   
}

div.social {
    display: inline-block;
    margin-top: -2.5%;
    margin-left: 9.5%;
    max-height: 30px;
    width:20%;
    position: relative;
    
}

.social img {
    max-height: 35px;
    margin: 0 1%;
}

/* -------END masthead styles----------------- */

/* -------OLD NAV STYLES--------------------------------------------------- */


nav {
    clear: both;
    width: 95.255%;
    margin: 20px 2.04081690%;
    padding: 1.2405%;
    border: 1px solid #9e1e20;
    border-width: 1px 1px 3px 3px;
} 

nav ul {
    margin: 0 auto;  
}

nav li {
   display: inline-block; 
   margin-left: 9%;
}

nav a {   
   font-family: KremlinMinister;
   font-size: 180%;      
   line-height: 115%;
}

nav a:link { 
    color: #9e1e20;
}
    
nav a:visited { 
    color: #00ff00;
}
    
nav a:hover::before { 
    content: "\2605";
    color: #9e1e20;
    margin-left: -1em;
}
    
nav a:active { 
    color: #ccc;
}

/*-------END OLD NAV STYLES-----------------------------------------------*/


/* -------BEGIN main content styles--------------------------- */

.mainContent {
    width:100%;
    position:relative;
    margin-bottom: 20px;
}

.mainContent img.hero {
    box-sizing: border-box;
    width: 100%; 
    margin: 10px 2.04081690% 40px 2.04081690%;
    padding: 0 2% 0 0;
}

.mainContent div {
    position:relative;
    float: left;
    box-sizing: border-box;
    width: 29.932%; 
    margin: 20px 2.04081690% 40px 2.04081690%;
    padding: 1.2405% 2%;
    border: 1px solid #9e1e20;
    border-width: 1px 1px 3px 3px;
}

.mainContent div:last-of-type {
    margin-right: 0;
    margin-bottom: 0;
}

.mainContent h2 {
    margin-bottom: 10px;
    font-weight: normal;
}

.mainContent p {
    display: block;
    margin-bottom: 10px;
}

.mainContent a {
    word-spacing: -.5em;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    float: right;
    color: #e45d31;
}

.mainContent li {
    line-height: 175%;
}

.events ul {
    padding-bottom: 1em;
}

/* -------BEGIN Beer and Staff page styles ------------ */
div.infoBox{
    width: 94%;
    margin: 20px 2% 20px 0;
    padding: 2%;
    border: 1px solid #9e1e20;
    border-width: 1px 1px 3px 3px;
    position:relative;
    overflow:auto;
    
}



div.infoBox img {
    width: 30%;
    position: relative;
    float:left;
    
}


div.infoBox h3 {
    margin: 0 0 10px 3%;
    display: inline-block;
    position: relative;
    float:left;
    font-size: 130%;
}

div.infoBox h3::before { 
    content: "\2605 ";
    color: #9e1e20;
   
}

div.infoBox p {
    width: 66%;
    margin: 0 0 10px 3%;
    display: inline-block;
    position: relative;
    float:left;
    text-align: justify;
}

/* -------END Beer and Staff page styles ------------ */

/* --------BEGIN Taproom styles ------------ */
.main {
    margin: 20px 2%;
}
.taproom {
    width: 98%;
    margin: 20px 2% 20px 0;
    padding: 2% 2% 2% 0;
    }

 .taproom p {
    margin: 0 0 10px 0;
    text-align: justify;
}

.main img.hero {
    box-sizing: border-box;
    width: 100%; 
    margin: 10px 2.04081690% 20px 0;
    padding: 0 2% 0 0;
}

/* -------- END Taproom styles ------------ */

/* --------BEGIN History styles ------------ */

.history {
    width: 98%;
    margin: 20px 2% 20px 0;
    padding: 2% 2% 2% 0; 
}

.history p {
    margin: 0 0 20px 0;
    text-align: justify;
}

.history img {
    width: 30%;
    position: relative;
    float: left;
    margin-right: 3%;
    margin-bottom: 2%;
}

.history h3 {
   margin-bottom: 10px; 
}

/* --------END History styles ------------ */

/* --------BEGIN About styles ------------ */

.about {
    width: 98%;
    margin: 20px 2% 20px 0;
    padding: 2% 2% 2% 0;
}

.about p {
    margin: 0 0 10px 0;
    text-align: justify;
}

.about img {
    width: 30%;
    position: relative;
    float: left;
    margin-right: 3%;
    margin-bottom: 2%;
}

.about h3 {
    margin-bottom: 10px; 
 
}

/* --------END About styles ------------ */

/* --------Blog page styles ---------------------*/

.blogContent {
    
    margin: 20px 2% 20px 0;
    padding: 1.2405%;
}

.facebook {
    width: 30%;
    position: relative;
    float: left;
}

.leftBlog {
    position: relative;
    float: left;
    width: 63.5%;
    margin: 20px 2% 20px 0;
    text-align: justify;
}
    
 .leftBlog h3 {
    margin: 10px 2%; 
 }

.leftBlog p {
    margin: 20px 2%; 
}


/* --------END Blog page styles ---------------------*/

/* -------Start Event page styles ------------------- */

.events {
    
    margin: 20px 2.04081690%;
    padding: 1.2405%;
}

.events .embed-container {
    
    margin-bottom: -25%;
}

/* -------END Event page styles ------------------- */

/* -------Start Contact styles ----------------------*/

.contact{
    margin: 20px 2.04081690% 20px 0;
    padding: 1.2405%;
}

.contact .embed-container {
    width: 73%;
    position: relative;
    float:left;
}

.contactInfo {
    width: 26%;
    position: relative;
    float:left;
}
/* -------END Contact styles ----------------------*/

/* -------End main content styles----------------------------- */



/* -------BEGIN site map styles---------- */

section.siteMap {
    clear: both;
    margin: 20px 0 20px 2.04081690%;
    padding: 20px 2%;
    border-top: 3px solid #9e1e20;
    /*background: #b9a05a; */
    
}

section.siteMap a:link { 
    color: #9e1e20;
}

section.siteMap a:visited { 
    color: #a72022;
}

section.siteMap a:hover {
   color: #9e1e20; 
}
   
section.siteMap a:hover::before { 
    content: "\2605";
    color: #9e1e20;
    margin-left: -1em;
}

section.siteMap a:active { 
    color: #a72022;
}
    

.mainSiteMap li {
    display: inline-block;
    vertical-align:text-top;  
    margin-left: 2%;
}

.mainSiteMap li:first-of-type {
    margin-left: 0;
}

.subSiteMap li {
   display: block; 
}

.socialFooter {
    clear:both;
    position: relative;
    float:right; 
    margin-top: -35px;
}
/* -------END site map styles---------- */

/* -------BEGIN footer styles---------- */

footer {
    clear: both;
    display: inline-block; 
    width: 100%;
    margin-top: 20px;
    margin-left: 2.04081690%;
}


/* -------END footer styles---------- */


/* ----START responsive styles for calendar and map --------------------------*/
	div.embed-container { 
		position: relative; 
		padding-bottom: 56.25%; 
		height: auto; 
		overflow: hidden; 
		max-width: 100%; 
		}
	 
	div.embed-container iframe { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 95%; 
		height: 100%; 
		margin: 5px;
	}
	/* END responsive styles for youtube, calendar and map */

/* -------BEGIN responsive styles: ----------------------------------------------------- */



@media all and (max-width:800px) {
/*  body {
	  background-color:fuchsia;
	  }   */
  
 h2 {
   font-size: 1.15em; 
}
    
 .masthead { 
    margin-left: 31%; 
    top: 3.2em;  
}
    
 .masthead h1 {
    font-size: 2.4em;
    margin-bottom: 10px;
}
    
  .masthead p {
    text-align: center;
    display: inline-block;
    margin-right: 1%;
    margin-left: 1%;
    position: relative;
    float: left;
    font-size: .5em;
}  
    
  div.social {
    clear:both;
    display: inline-block;
    margin-left: 79%;
    max-height: 20px;
    width: 20%;
    position: relative;
    top: -20px; 
    
}

.social img {
    max-height: 16px;
    margin: 0 1%;
}  
    
    
 /*.mainContent div {
    min-height: 610px;
}   */
    
    
nav {
  margin-top:0;  
}

    .infoBox img {
      display:none;  
    }
    
div.infoBox p {
    width: 98%;
    margin: 10px;
    display: inline-block;
    position: relative;
    float:none;
    text-align: justify;
}   
    
.facebook {
    width: 98%;
    position: relative;
    float: none;
}

.leftBlog {
    position: relative;
    float: none;
    width: 98%;
    margin: 10px;
    text-align: justify;
}
  
.breadcrumbs {
   display: none; 
}
    
}

/*
/* -------BEGIN responsive styles: Max 700px ---------- */


@media all and (max-width:700px) {
 
    body {
	/*  background-color:lightblue;  */
      width: 100%;
      padding: 0 1.5% 0 0;
}
    
 header{
  width:auto;    
 }
    
 h2 {
   font-size: 1.25em; 
}
    
 .masthead { 
    margin-left: 32%; 
    position: absolute; 
    top: 4.3em;  
    z-index: 5;
}
    
 .masthead h1 {
    font-size: 2.7em;
    display: inline-block;
    margin-bottom: 5.4%;
    
}
    
 .masthead p {
    display: none;
    
}
    
img.logo  {
    margin-left: 1.3%;
    margin-right: 2%; 
    width: 96.7%; 
   
}
    
  nav {
    clear: both;
    width: 94%;
    margin: 15px 0;
    padding: 1.2405%;
    border: none;
} 

nav li {
   display: inline-block; 
   margin-left: 9%;
}
    
  img.hero  {
    display: none; 
}

   div.social  {
    display: none; 
}
    
   .mainContent div {
    position:relative;
    float: none;
    box-sizing: border-box;
    width: 94%; 
    margin-bottom: 10px;
    padding: 1.2405% 2%;
    border: 3px solid #9e1e20;
    border-width: 3px 0px 0px 0px;
}
    
  .mainContent h2 {
    margin-bottom: 10px;
    font-weight: normal;
}

  .mainContent p {
    display: block;
    margin-bottom: 10px;
}

  .mainContent a {
    word-spacing: -.5em;
    display: inline-block;
    margin: 0;
    position: relative;
    float: right;
    bottom: .5em;
    color: #e45d31;
}
    
  line-height: 125%; {
}

  .events ul {
    padding-bottom: 0;
}
    
  .siteMap {
    display: none;  
  }
    
  .socialFooter {
    display: none;  
  }
    
  footer {
    width: 94%;  
  }
  
}
   

/* -------END responsive styles: Max 700px ---------- */
















/* -------BEGIN responsive styles: Max 680px ---------- */


@media all and (max-width:680px) {
	 
  /*body {
    background-color:brown;
} */
    
 h2 {
   font-size: 1.15em; 
}
    
 .masthead {
  margin-left: 32%;
  top: 3.9em;  
}
    
 .masthead h1 {
    font-size: 2.6em;  
    
}
   
}

/* -------END responsive styles: Max 680px ---------- */

/* -------BEGIN responsive styles: Max 640px ---------- */


@media all and (max-width:640px) {
	 
 /* body {
    background-color:aqua;
}  */
    
 h2 {
   font-size: 1.15em; 
}
    
 .masthead { 
    margin-left: 35%; 
    top: 3.6em;  
}
    
 .masthead h1 {
    font-size: 2.1em;
    
}
   
}

/* -------END responsive styles: Max 640px ---------- */

/* -------BEGIN responsive styles: Max 580px ---------- */
@media all and (max-width:580px) {
   
 /* body {
    background-color:darksalmon;
}  */
 .masthead { 
    margin-left: 34%; 
    top: 3.1em; 
}
    
 .masthead h1 {
    font-size: 2em;
}
  
}
 
/* -------END responsive styles: Max 580px ---------- */

/* -------BEGIN responsive styles: Max 535px ---------- */


@media all and (max-width:535px) {
	 
  /*body {
    background-color:darkorange;
}*/
    
 .masthead { 
    margin-left: 34%;  
    top: 2.95em; 
}
    
 .masthead h1 {
    font-size: 1.8em;
    
}
   
}

/* -------END responsive styles: Max 535px ---------- */

/* -------BEGIN responsive styles: Max 480px ---------- */
@media all and (max-width:480px) {
   
 .masthead { 
    margin-left: 32%; 
    top: 2.3em; 
}
    
 .masthead h1 {
    font-size: 1.6em;
}
  
}
	
/* -------END responsive styles: Max 480px ---------- */

/* -------BEGIN responsive styles: Max 415px ---------- */
@media all and (max-width:415px) {
	 
 /* body {
    background-color:chartreuse ; 
  }  */
  
 h2 {
   font-size: 1.15em; 
}
    
 .masthead { 
    margin-left: 31%;
    top: 2.25em;  
}
    
 .masthead h1 {
    font-size: 1.4em;
    
}
   
}
	
/* -------END responsive styles: Max 415px ---------- */


}