* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html {
    height: 100%;
}



body {
  background-image:   url('/assets/images/rockywall.jpg');/* Background pattern from Toptal Subtle Patterns */
  background-size: 140px;

    color: #444;
    -webkit-font-smoothing: antialiased;
font-family: 'Montserrat', sans-serif;


    font-weight: 400;
  min-height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility;
    margin: 0 auto;
    //max-width: 1440px;
 position: relative;

}





header {
    background-color: #fff;
    height: 122px;
}



h1, h3 {
   font-family: 'Montserrat', sans-serif;

font-style: normal;
font-weight: 400;
}

h1 {font-size: 6vw;}

h2 {
      font-size: 30px;
    font-family: 'Bitter', serif;
    font-weight: 700;
    color: #357A89;
}

h3 {
  font-family: 'Bitter', serif;
  font-size: 24px;
  font-weight: 700;
  color: #86afb8;
}


h4 {
    padding: .5em 0;
    text-align: left;
font-size: 14px;
font-weight: 700;

background: transparent;
color: #fff;

}

.contact4 img{
        width: 100%;
    height: 100%;
    object-fit: cover;
}


.bugerImg{
    width:27px !important;
    height:21px !important;
    display:block !important;
    margin-right:0px !important;
}


a {color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}





a:hover, header a:hover {color: #86AFB8;}


.homepage-circles a {
  font-family: Bitter;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: center;
  color: #357a89;}

.homepage-circles a:hover {text-decoration: underline;}

.wrapper a:hover, .rapper a:hover, rap a:hover {text-decoration: underline;}




/*Add Stick to .sidenav */
.sidenav {
    color:#FFF;
    height:2em;
    z-index: 100;
    position:absolute;
    top:200px;
    width:100%;
    background-color: #fff;
    overflow: visible;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 122px;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    max-width: 1440px;
    position: fixed;
    width: 100vw;
    max-width: none;
}
.fixed {
    position:fixed;
    top:0;
}




















div#mySidenav > a:nth-child(8), div#mySidenav > a:nth-child(7), div#mySidenav > a:nth-child(3) {
    display: block!important;
    background-image: none;
    position: relative;

    }
#mySidenav > a:nth-child(3):after, #mySidenav > a:nth-child(7):after, #mySidenav > a:nth-child(8):after { background: none; }


/* Top Navigation Bar */
.sidenav {


}

/* Style the links inside the navigation bar */
.sidenav a {
    font-weight: 700;
    color: #474E51;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.3px;
  margin: 0;
  padding: 15px;
  align-items: center;
    justify-content: center;

}



.hamburger, .sidenav .fab, .hide, .closebtn  {

    display: none;
}




/* The dropdown container */
.dropdown {
  float: left;

}

.dropdown a {}

/* Dropdown button */
.dropdown .dropbtn {

    font-weight: 700;

    color: #fff;
    text-align: center;
  padding: 53px 0;

    text-transform: uppercase;
    font-size: 13px;



  border: none;
  outline: none;

  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {

  padding: 53px 0;
 margin: 0;
  align-items: center;
    justify-content: center;

}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background: url("/assets/images/dropdown.png") no-repeat bottom center / cover;   /* On bottom, like z-index: 1; */
  padding: 35px;
  z-index: 1;
          opacity: 0;
          -moz-animation: fadein .25s ease-in-out .05s forwards; /* Firefox */
          -webkit-animation: fadein .25s ease-in-out .05s forwards; /* Safari and Chrome */
          -o-animation: fadein .25s ease-in-out .05s forwards; /* Opera */
          animation: fadein .25s ease-in-out .05s forwards;

}



  @keyframes fadein {
    0% {
      -moz-transform: translate3d(0,5em,0);
      -webkit-transform: translate3d(0,5em,0);
      -ms-transform: translate3d(0,5em,0);
      transform: translate3d(0,5em,0);
      opacity: 0;
    }

    100% {
      -moz-transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      opacity: 1;
    }
  }



.dropdown-content:after {
  content: "";
  background: url("/assets/images/dropdown-arrow.png") top left no-repeat;
  position: absolute;

top: -25px;
  width: 17px;
  height: 51px;
}



/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 6px 16px;
  font-weight: 400;
  text-transform: capitalize;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
color: #fff;
border-bottom: 1px solid #fff;
 padding-bottom: 5px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}








/*Starting showing menu on iPad resolution */
@media only screen
and (max-width : 1100px) {


header a:hover {
  color: #474E51!important;}


.hamburger, .sidenav .fab, .hide, .closebtn  {

    display: block;
}

.active {display: none; }
/*div#mySidenav > div:nth-child(4) {margin-bottom: -5%;}*/
.hide {width: 80%; height: auto; margin: 0 auto;}

.hamburger {

    background-color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    font-size:30px;

}
    .hamburger a{
        width:107px;
        margin-left:15px;
            cursor:pointer;
    }

.hamburger span {
    position: absolute;
    margin-right: 5%;
    right: 0;
        cursor:pointer;
    }

.hamburger img {
    display: flex;
    align-items: center;
    justify-content: center;

}



.sidenav {
    height: 100%;
    width: 90%;
    max-width:382px;
    position: fixed;
    z-index: 1;
    top: 0;
  left: auto;
    background-color: rgba(134, 175, 184, 0.9);
    overflow-x: hidden;
    padding-top: 60px;
    flex-direction: column;
    align-items: flex-start;
        justify-content: flex-start;




}

.sidenav a {

display: none;
    text-decoration: none;
    display: block!important;
    transition: 0.3s;
    font-size: 14px;
color: #fff;
    letter-spacing: 0.5px;
    text-align: left!important;
    padding: 0 0 0 60px;

}

.sidenav a:hover {   padding: 0 0 0 60px;}

.sidenav .closebtn, .sidenav .closebtn a:hover {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.dropdown {
padding-bottom:15px;
  display: block;

overflow: visible;
}


.dropdown-content  {
  display: block;
padding: 0;


 background: none;
  position: relative;
  margin: 0 auto;
    margin-top:10px;
  border: 0;
}
    .dropdown-content2{
        padding-bottom:15px !important;
    }



.dropbtn a:active, #mySidenav a:active, .dropdown a:active {color: orange;}


.dropdown-content a:hover {padding: 0;}


.dropdown-content a {padding: 0 0 0 80px!important; border: 0;}
.dropdown-content a:hover {padding: 0; border: 0;}


.navbar a:hover, .dropdown:hover .dropbtn {padding: 0;}

.dropdown .dropbtn {padding: 0;}



.dropdown-content:after {display: none}

.fab{
  color: #fff;
  display: inline-block!important;
  margin: 2%;

}

#socialicons {padding: 0 0 0 60px;}
#socialicons a {display: flex; flex-direction: row;}


.homepage-circles {
  margin-top: 30px!important;
  margin-bottom: 50px!important;
}

.homepage-circles .main__stream__content__hp {
  margin: 30px 45px;
}



} /* End Media */

/* Mobile */
@media screen and (max-width: 450px) {

header {height: 101px;}

.homepage-circles .main__stream__content__hp {margin: 25px;}

.cols .col, .col:first-child h4 {margin-top: 25px!important;}

.hamburger img{
  margin-right: 250px;
width: 100px; height: 61.54px;
  }

.main__cover img {

    background-position: center;

margin-left: -100px;
padding: 0;
overflow: hidden;
max-width: 200%;
width: 543px; height: 182px!important;
}




}
















































.main__cover {
        margin: 0;
    background-position: center;
    background-size: cover;
    width: 100%;
    margin: 0 4%;

}



.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  font-size: 16px;
  font-family: 'Bitter', serif;
font-weight: 700;
color: #357A89;
}

.column {

    padding: 10px;
    margin: 10px;
    text-align: center;


}

div.row.hp { margin: 2% 15%;}
div.column.hpcircle {  margin: 0 3%; }
div.column.hpcircle img {margin: 8% 0;min-width: 120px;}
img {max-width:100%;}



.main {width: 100%;
display: flex;
justify-content: center;
}

.homepage-circles{
  width: 70%;
 /* height: 100%;*/
  display: flex;
  margin: 0;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;

  font-size: 16px;
  font-family: 'Bitter', serif;
font-weight: 700;
color: #357A89;
  text-align: center;

}

.main__stream__content__hp {
    width: 120px;
    height: auto;
    margin: 50px 0 140px 0;

}

.main__stream__content__hp img {
    width: 120px;
    height: 130px;
    margin-bottom: 18.8px;
}
















.noScroll{
    width:100vw;
    height:100vw;
    overflow:hidden;
}









/* Beer Page */



.wrapper {
  display: flex;
  flex-direction: row;
  margin: 3% 3%;
}


.top-left {
    position: absolute;
    top: 60px;
    left: 60px;
    font-size: 60px;
    color: #fff;
     font-family: Bitter;
  font-size: 60px;

  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
}

.beer__cover {
        margin: 0;
    background-position: center;
    background-size: cover;
    width: 100%;
margin-bottom: 4%;
position: relative;

}

p.beer__intro {
    color: #0C383F!important;
    font-size: 16px!important;
    font-weight: 500;
    line-height: 1.5em;
}


.sidebar {
  width: 25%;

  padding: 10px 0;
  min-height: 325px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar__menu {

  color: #FFF;
    font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  margin: 0 10px;
  padding: 12.5px;
  border-radius: 10px;
  text-align: left;
}

.sidebar__menu p {
    color: #474E51;
    font-size: 14px;
}



.thebeers-all {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px;
}

.thebeers {
  flex: 0 1 30%; /*grow, shrink, width */
  margin: 25px 0;
}

.thebeers-all h4 {
    color: #357A89;
    text-transform: uppercase;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-family: Montserrat;
    letter-spacing: 1.2px;
}


.beers-linebreak {
  height: 5px;
  width: 94%;
  background-color: #86afb8;
  margin: 100px 3%;
}

@media screen and (max-width: 900px) {

.thebeers {
  flex: 0 1 45%; /*grow, shrink, width */
  margin: 2%;
}

 .wrapper {
  flex-wrap:nowrap;
  flex-direction: column;
  margin: 0;
  padding: 3%;
}

.sidebar {
  width: 100%;
  padding: 0;
}

.top-left { font-size: 40px; top: 0; left: 0; right: 0; margin-top: 10px;}
}


@media screen and (max-width: 400px) {

.thebeers {
  flex: 0 1 100%!important; /*grow, shrink, width */
  margin: 6%;
}


}



/* Beer Page Modal Popup */



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 200; /* Sit on top */
    left:0px;
    top:0px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    position:absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    padding: 2px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    max-width:800px;
    overflow: hidden;
}

.modal-minusx {padding: 58px; height: 100%;    overflow-y: scroll;}
/* Button */

#myBtn {
  background: none;
  border: 0;
  cursor: pointer;
}

/* The Close Button */
.close {
    position:absolute;
    font-size: 36px;
    right: 15px;
        margin-top: 15px;
    background-color: #86afb8;
    color: #fff;
    border-radius: 50%;
    width:30px; height: 30px;
    text-align: center;
    line-height: 30px;

}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



.modal-left {
  float: left;
  width: 55%;
}

.modal-right {
  float: right;
  width: 40%;
  text-align:right;
}

.modal-linebreak {
  height: 5px;
  width: 100%;
  background-color: #86afb8;
  margin: 50px auto;

}

.modal-intro {
    color: #0C383F;
    font-size: 16px;
    font-weight: 500;
}



.modal-right h4 a, .modal-right h4 {
    color: #357A89;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    font-family: Montserrat;
    letter-spacing: 1.2px;
    text-align: right;
}


@media screen and (max-width: 900px) {

.modal-left, .modal-right {
  width: 100%;
}



}












/*
.sidenav a:active {color: blue!important;}
*/

/* STRUCTURE */


.wrap {
  max-width: 1440px;
  width: 100%;
  background-color: #0C383F;
  color: #fff;
  height: 214px;
margin: 0 auto;


  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
    font-family: 'Bitter', serif;
    font-size: 12px;
font-weight: 400;
line-height: 1.5em;
border-top:10px solid #1C4A54;
     box-shadow: -0 -5px #357A89;

  text-align: center;
}

.wrap h4 { text-align: center; }



.cols {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  background: #0C383F;
}

.col {
  flex: 1;
  border: 0;
  margin: 20px 0 10px 0;
  padding: 10px;
  background: #0C383F;
}
.col:first-child {
  margin-left: 0;
  text-align: left;
  padding-left: 60px;
}

.col:first-child h4 {text-align: left;}

.col:last-child {
  margin-right: 0;
    padding-right: 60px;
    text-align: right;
}

.fab {font-size: 20px;
    margin: .2em;}


footer {
  padding: 0;
}

#copyright,  footer {font-size: 9px!important;
   font-family: 'Montserrat', sans-serif;
    width: 100%;
background-color: #0C383F;
color: #fff;

  }


/*
@media screen and (max-width: 980px) {
  .cols .col {
    margin-bottom: 5px;
    flex-basis: 40%;
  }
  .cols .col:nth-last-child(2) {
    margin-right: 0;
  }
  .cols .col:last-child {
    flex-basis: 100%;
    margin: 0;
  }
}
*/
@media screen and (max-width: 680px) {
  .cols .col, .col:first-child h4 {
    flex-basis: 100%;
    margin: 0 0 5px 0;
    text-align: center;
    padding: 2%;
  }

  .copyright {padding: 5%;}
}
.copyright a {margin-bottom: 20px;}




/* Why Organic Page */

.rapper {
  width: 100%;
  margin: 0 auto;
}


.cols-allorganic {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;

}

.col-organic {
  flex: 1;
  border: 0;
  margin: 0 0px 10px 0;

  padding: 40px;
  flex-basis: 50%;
}

.col-organic p  {
  padding: 10px 0;
  color: #474E51;
  font-size: 14px;
}

.col-organic.img {
  flex-basis: 25%;
padding-right:0;
    width: 285px;
  height: 200px;
  margin: 0 auto;
}

.col-organic.text {
  flex-basis: 75%;

}

.col-organic:last-child {margin-bottom: 100px;}

p.title{
    color: #357A89;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 0;
}


@media screen and (max-width: 768px) {
.cols-allorganic {flex-direction: column;}
.col-organic.img {padding: 0;}
}


/* Contact Page */
/*
.col-organic:nth-child(2) {flex-basis: 25%;}
*/

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.col-allcontact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#col-contact {

  margin: 2%;
  flex-basis: 45%;
}

  .contact1 {
    flex-basis: 66%!important;}
  .contact2 {flex-basis: 25%!important;
      border-bottom: 3px solid #357A89 ;}
  .contact3 {flex-direction: column!important;}

div.contact2 img {margin: 0 auto;
    display: flex;
vertical-align: baseline;
}

.contact4 {  flex-basis: 47%!important;}


.col-allcontact h4 {
    color: #357A89;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    font-family: Montserrat;
    letter-spacing: 1.2px;
}


input {height: 50px; width: 100%;}
textarea {height: 250px; width: 100%;}
#send {  background: #86afb8;
  height: 60px;
  color: #fff;
  font-size: 24px;
  font-family: Bitter;
  font-weight: 700;
}


input.subscribe {width: 5%; float: left; }
div.contact3 form span {width: 95%; float: right; text-align: left; height: 50px; line-height: 50px; padding-left: 10px;}





/*
span {
  height:50px; }
*/

@media screen and (max-width: 900px) {


#col-contact {
  flex: 0 1 100%!important; /*grow, shrink, width */
  margin: 15px 0;
}

.contact2, div.contact2 h4 {text-align: center;}

}












/* The Brewery Page */

.rap {padding: 30px 60px 60px 60px;
margin-bottom: 60px 0;}

.thebrew-all {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.thebrew, #thebrew {
  flex: 0 1 23%; /*grow, shrink, width */
  margin: 15px 0;
}

.thebrew69 {flex: 0 1 74%!important;}
.thebrew29 {  flex: 0 1 24%!important;
margin-bottom: 100px!important;}

.thebrew-all h4 {
    color: #357A89;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    font-family: Montserrat;
    letter-spacing: 1.2px;
}

p {
  font-family: Montserrat;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #474e51;
}

b {
  font-family: Montserrat;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.3px;
  color: #357a89;
}

.thebrew-all h2 {width: 100%;}

.thebrewimg {
  height: 80px;
  width: auto;
  margin:  60px auto 15px auto;
  display: block;
  }


.linebreak {
  height: 5px;
  width: 100%;
  background-color: #86afb8;
  margin: 100px 60px;
}



@media screen and (max-width: 900px) {


.thebrew, #thebrew {
  flex: 0 1 48%; /*grow, shrink, width */
  margin: 15px 0;
}
 .thebrew69, .thebrew29 {
  flex: 0 1 100%!important;
 }

}

@media screen and (max-width: 400px) {


.thebrew, #thebrew {
  flex: 0 1 100%!important; /*grow, shrink, width */
  margin: 15px 0;
}


}




/*footer p white */

.col p {color: #fff!important;}



/* Taproom Page */


.rap2 {
  padding: 30px 0px 60px 0px;
  margin-bottom: 60px;
}


#thetaproom-all {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}


.thetaproom {
  position: relative;
}

@media screen and (max-width: 900px){
    .thetaproom img{
        margin:auto;
        display:block;
    }
}

.thetaproom a {
  color: #357A89;
  font-size: 14px;
  font-weight: 700;
}



.thetaproom h4 {
    color: #357A89;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    font-family: Montserrat;
    letter-spacing: 1.2px;
    text-align: left;
}

#thetaproom-all h2 {width: 100%;}


.thetaproom-child {
  float: left;
  }

  /*
.thetaproom-child2 {
display: flex;
    margin-left: 2%;
flex-direction: column;
  }
*/



 .article {
   display: flex;
 }
 .article .item,
 .article .price {
   flex: 1 0 auto;
 }
 .article .dots {
   flex: 0 1 auto;
 }
 .dots::before {

   overflow: hidden;
   text-overflow: clip;
   content:
     ". . . . . . . . . . . . . . . . . . . . "

 }



div.thetaproom a h4 {text-align: center!important;}
div.thetaproom .thetaproom-child.thetaproom-beers a h4 {text-align: left !important;}
div#thetaproom-all > h2 {
  padding: 60px;
}


h5 {
  height: 60px;
  font-family: Montserrat;
  font-size: 25px;
  font-weight: bold;

  letter-spacing: 0.6px;
  text-align: center;
  color: #474e51;}


.center {text-align: center;}



.centered-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
color: #fff;
display: flex;
flex-direction: column;
    justify-content: space-between;
    padding: 7%;
}


.centered-text h2, .centered-text p, .centered-text a, .centered-text b {

color: #fff;
text-align: center;
}





.events-all {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.events-left {
  display: flex;
  align-items: center;
  width: 10%;


}
.events-right {
  text-align: left;
width: 90%;
margin: 10px;
margin-left: 20px;
padding-left:10px;
}

.events-right h4 {padding: 0;}



.wrapper2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  margin-left: 60px;
  margin-right: 60px;
}


.event-img {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
    border: 6px solid #86AFB8;
}

.person div{
    width:100%;
    padding-bottom:100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
    border: 6px solid #86AFB8;
}

.brewHistory{
        padding-left: 30px;
}
@media screen and (max-width: 900px) {
.brewHistory{
        padding-left: 0px;
}

.thetaproom {
  width: 100%!important;
  margin: 2.5% 5%;
  padding: 0!important;
}
.thetaproom-child {width: 100%!important; float: none; text-align: center }

.thetaproom-child h4 {text-align: center;}

.wrapper2 {flex-direction: column; margin: 0; padding: 2.5% 5%;
}

  .linebreak { margin: 10%; }

  h2 {text-align: center;}

.event-img {
        width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
    border: 6px solid #86AFB8;
    }



.centered-text h2 {font-size: 20px;}

.centered-text p, .centered-text a {
  font-size: 11px;
  padding: 0;
}
}


.bodyContainer{
    max-width:1440px;
    margin:0px auto;
}
/* Footer */

.footer-wrap {
  //max-width: 1440px;
  width: 100%;
  background-color: #0C383F;
  color: #fff;
  height: 214px;
margin: 0 auto;
  right: 0;
  bottom: 0;
  left: 0;
    font-family: 'Bitter', serif;
    font-size: 12px;
font-weight: 400;
line-height: 1.5em;
border-top:10px solid #1C4A54;
     box-shadow: -0 -5px #357A89;

  text-align: center;
}

.footer-wrap p {font-size: 12px;}
.footer-wrap h4 {text-align: center;}

.footer-wrap cols{
    max-width:1440px;
    margin:auto;
}

#modal_screen{
    position:fixed;
    top:0px;
    left:0px;
    height:100vh;
    width:100vw;
    z-index:1000;
    background-color:rgba(0,0,0,0.8);
}
#modal_content{
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:90%;
    max-width:800px;
    min-height:425px;
    padding:3em;
    background-position:center 3em;
    background-size:125px auto;
    font-size:16px;
    position:fixed;
    z-index:1010;
    margin:0px auto;
    background-color:white;
    background-repeat:no-repeat;
    background-image:url(/assets/images/scmb-wave.png);
}
#modal_content .content_wrapper{
    padding-top:100px;
    margin:3em auto 0px;
    text-align:center;
}
#modal_content .content_wrapper h2{
    padding:40px 0px;
    border-top:5px solid #86afb8;
    margin:0 5%;
    font-size:30px;
    font-family:'Bitter', serif;
    font-weight:700;
    color:#357A89;

}
.gridBeer{
    cursor:pointer;
    max-width: 285px;
    width: calc(((100vw - 325px) / 3) - 60px);
    display:block;
    flex:none;
}
.gridBeer img{
    width: calc(((100vw - 325px) / 3) - 60px);
    height: calc(((100vw - 325px) / 3) - 60px);
    max-width: 285px;
    max-height: 285px;
    object-fit: cover;
    border-radius: 100%;
    border: 6px solid #86AFB8;
    display: block;
    flex:none;
}

@media only screen and (max-width:1050px){
    .gridBeer{
        width: calc(((100vw - 325px) / 2) - 60px);
    }
    .gridBeer img{
        width: calc(((100vw - 325px) / 2) - 60px);
        height: calc(((100vw - 325px) / 2) - 60px);
    }
}
@media only screen and (max-width:745px){
    .gridBeer{
        width: calc(((100vw) / 2) - 60px);
    }
    .gridBeer img{
        width: calc(((100vw) / 2) - 60px);
        height: calc(((100vw) / 2) - 60px);
    }
}
@media only screen and (max-width:400px){
    .gridBeer{
        margin:0px auto;
        margin-bottom:30px;
    }
    .gridBeer img{
        width: calc((100vw) - 60px);
        height: calc((100vw) - 60px);;
    }
}
#modalImg{
    object-fit:contain;
    object-position:top;
    display:block;
}
@media only screen and (max-width:900px) and (min-width:500px){
    #modalImg{
        margin:0px 0px;
        margin-top:40px;
        max-height:300px;
        width:40%;
    }
    .modal-left .modal-left, .modal-left .modal-right{
        width: 45%;
    }
    .modal-right h4{
        position:relative;
        top:-83px;
    }
    .modal-right{
        max-height:340px;
    }
}
@media only screen and (max-width:500px){
    #modalImg{
        margin:0px 0px;
        margin-top:40px;
        max-height:300px;
        width:100%;
    }
    .modal-left .modal-left, .modal-left .modal-right{
        width: 45%;
    }

}
.tourBlock{
    background-color:#357A89;
}
.kegBlock{
    background-color:#0C383F;
}
.tourBlock img, .kegBlock img{
    opacity:.2;
}


#modal_content .content_wrapper nav{
    width:100%;
    display:flex;
    font-size:16px;
    justify-content:space-around;
}
#modal_content .content_wrapper nav .av_btn{
    padding: 16px 2em;
    margin: 0 16px;
    background: #86afb8;
    height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: 'Bitter', serif;
    font-weight: 700;
    display: block;
    width:100%;
    cursor:pointer;
    text-align: center;
}
#modal_content .content_wrapper nav .av_btn:hover{
    background:#1e0924;
}

/* this fixes the messed-up spacing on the burger menu socials */
#socialicons {
  display:flex;
}
#socialicons a {
  padding: 0 0 0 20px;
}

/* this fixes the age modal's font issue on mobile */
#modal_content .content_wrapper nav .av_btn {
  padding: 10px 0;
}

/* this centers the header out on desktop */
@media screen and (min-width: 1100px) {
  #socialicons a {
    display:none;
  }
}

/* this makes the contact input look nice */
input[type=text] {
  font-family:Montserrat;
  padding-left:10px;
  color:#474e51;
  font-size:14px;
  letter-spacing:0.3px;
  font-weight:700;
}

/* this corrects the dropdown arrow */
.dropdown-content:after {
    content: "";
    background: url(/assets/images/dropdown-arrow.png) top left no-repeat;
    position: absolute;
    top: -25px;
    width: 17px;
    height: 51px;
    background-size:cover;
}

/* this fixes the contact form Submit button on Firefox */
input[type=submit] {
  border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
  border-top-color: rgb(216, 216, 216);
  border-right-color: rgb(209, 209, 209);
  border-bottom-color: rgb(186, 186, 186);
  border-left-color: rgb(209, 209, 209);
  border-style: solid;
  border-width: 1px;
}

/* this fixes the anchor tags by compensating for the fixed header */
.anchor {
  height:122px;
  margin:-122px 0 0;
}

/* this fixes the last flex items */
.gridBeer.thebeers:last-of-type {
  margin-right:auto;
  margin-left:65px;
}
@media only screen and (max-width:1050px) and (min-width:900px) {
  .gridBeer.thebeers:last-of-type {
    margin-right:0;
  }
}
@media only screen and (max-width:745px) {
  .gridBeer.thebeers:last-of-type {
    margin-right:0;
    margin-left:0;
  }
}
.thebrew.person:last-of-type {
  margin-right:auto;
  margin-left:30px;
}
@media only screen and (max-width:900px) {
  .thebrew.person:last-of-type {
    margin-right:0;
    margin-left:0;
  }
}

/*top banner in home page*/
.top-banner{display:none;}
.top-banner{background-color:#86afb8;padding-top:27px;padding-bottom:27px;}
.top-banner .container{max-width:1080px;padding:0px 15px;margin:0px auto;}
.top-banner .top-content h2{text-align:left;font-size:30px;font-weight:700;font-family:'Bitter', serif;margin-top:0px;margin-bottom:0px;}
.top-banner .top-content h4{font-size:18px;font-weight:700;letter-spacing:1.24px;font-family:'Montserrat', sans-serif;font-weight:700;margin-top:3px;margin-bottom:0px;    padding: 0px;text-transform:uppercase;}
.top-banner .top-content p{font-size:16px;line-height:26px;font-family:'Montserrat', sans-serif;font-weight:500;margin-top:12px;margin-bottom:0px;}
.top-banner .top-content h4,.top-banner .top-content h2,.top-banner .top-content p{color:#fafafa;}
.top-banner .top-content{display: flex;justify-content: center;align-items: center;}
.top-banner .top-content .top-image{margin-right: 20px;margin-top: -25px;}
@media screen and (max-width:767px)
{
	.top-banner .top-content h2{font-size:27px;}
}
@media screen and (max-width:600px)
{
	.top-banner .top-content .top-image{margin-top: -13px;    width: 50px; }
.top-banner{margin-bottom:20px;}
	.top-banner .top-content h2{font-size: 25px;}
	.top-banner .top-content h4{font-size: 16px;}
	.top-banner .top-content p{font-size: 15px;}
.top-banner .top-content h4,.top-banner .top-content h2{text-align:center;}
.top-banner .top-content{flex-direction: column;text-align: center;}
.top-banner .top-content .top-image{margin-right: 0px;margin-bottom: 10px;}
}
