.journalWrapper {
  width: 100%; }

.customize-journal {
  width: 325px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around; }

.customize-journal h1 {
  font-size: 30px;
  margin-top: 0;
  opacity: 50%; }

.journalItem {
  padding-top: 50px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  min-width: 100%;
  margin: 0 auto; }

.journal-image .journalPic {
  width: 40px;
  margin: 0 auto;
  padding: 0px; }

.journal-entry {
  padding-right: 45px; }
  .journal-entry a {
    font-family: 'Radley', serif;
    text-decoration: none;
    line-height: 25px; }
  .journal-entry h3 {
    font-size: 25px; }
  .journal-entry h1 {
    color: gray;
    font-size: 25px;
    line-height: 20px;
    text-align: right; }

.journal-entry p {
  text-align: left;
  line-height: 15px;
  font-size: 25px;
  margin-top: 12px;
  font-size: 20px;
  opacity: 60%; }

.descItal {
  font-style: italic;
  color: #d64a06;
  font-weight: bold; }

.journal-entry .journalPic {
  width: 300px; }

hr {
  width: 95%;
  border-top: 1 solid gray; }

.journal-entry li {
  text-align: left;
  font-size: 15px;
  line-height: 7px; }

.customize-journal h1 {
  font-size: 18px;
  margin-top: 0;
  opacity: 50%; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.formWrapper {
  width: 80%;
  min-height: 800px;
  margin: 0 auto; }
  .formWrapper h1, .formWrapper h2, .formWrapper h3, .formWrapper h4, .formWrapper h5, .formWrapper h6, .formWrapper a {
    font-size: 30px;
    text-align: center;
    padding-bottom: 10px; }
  .formWrapper .formContainer {
    background-color: white;
    width: 80%;
    margin: 0 auto;
    min-height: 200px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 0px; }
    .formWrapper .formContainer p {
      font-size: 15px; }
    .formWrapper .formContainer h4 {
      font-size: 30px;
      line-height: -100px;
      margin-bottom: 5px;
      text-align: left; }
    .formWrapper .formContainer h1 {
      padding-top: 20px; }
  .formWrapper .formItemContainer {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: left; }
  .formWrapper .formItem {
    width: 80%;
    margin: 0 auto;
    padding: 20px; }
    .formWrapper .formItem h4 {
      text-align: left; }
  .formWrapper .formWrapper .label {
    width: 800px;
    margin: 0 auto; }
  .formWrapper input {
    width: 100%;
    margin: 0 auto;
    height: 30px;
    border: .5px solid gray;
    outline: none;
    background: #eeeeee;
    transition: background 0.2s, border-color .02s; }
  .formWrapper .label {
    margin: 0 auto;
    justify-content: center; }
  .formWrapper input:focus {
    border-color: gold;
    background: white; }

button {
  width: 100px;
  padding-top: 25px;
  padding-bottom: 25px;
  margin: 0 auto; }

#breweryFormBtn {
  height: 55px; }

#breweryLogoFile input {
  outline: none; }

#submitBtn {
  background-color: #fbb03b;
  padding: 10px; }

.glassItem {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  min-width: 100%;
  margin: 0 auto; }

.glassItem .glassPic {
  width: 100%;
  margin: 0 auto;
  margin-top: 25px; }

@media screen and (max-width: 525px) {
  .glassItem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto; }
  .glassItem .glassPic {
    width: 100%;
    margin: 0 auto;
    margin-top: 25px; }
  .source {
    font-size: 13px; } }

.styleItem {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  min-width: 100%;
  margin: 0 auto; }

.styleItem .stylePic {
  width: 100%; }

@media screen and (max-width: 525px) {
  .styleItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto; }
  .styleItem .stylePic {
    width: 100%;
    margin: 0 auto; }
  .source {
    font-size: 13px; } }

.breweryWrapper {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 28px; }
  .breweryWrapper hr {
    width: 95%;
    border-top: 1 solid gray; }

.breweryItem {
  padding-top: 50px;
  margin: 0 auto;
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  margin: 0 auto; }

.breweryItem img {
  width: 278px;
  margin-top: 100px; }

.entry {
  width: 90%;
  margin: 0 auto;
  padding: 15px; }
  .entry a {
    font-family: 'Radley', serif;
    line-height: 39px;
    text-decoration: none; }

.entry h3 {
  font-size: 28px; }

.entry p {
  font-size: 15px;
  margin-top: 12px; }

.breweryEntry {
  width: 50%;
  margin: 0 auto; }
  .breweryEntry a {
    font-family: 'Radley', serif;
    line-height: 39px;
    text-decoration: none; }

.breweryEntry h3 {
  font-size: 28px; }

.breweryEntry p {
  font-size: 15px;
  margin-top: 12px; }

.breweryItem .stylePic {
  width: 400px; }

hr {
  width: 95%;
  border-top: 1 solid gray; }

.entry .hours {
  width: 200px; }

.entry .hours li {
  font-size: 15px;
  line-height: 7px;
  width: 200px; }

#source {
  font-size: 15px; }

@media screen and (max-width: 525px) {
  #content {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 auto;
    background-color: white; }
    #content h1 {
      padding-top: 66px;
      font-size: 42px; }
    #content h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 15px;
      text-align: center;
      text-transform: uppercase;
      color: #565655; }
  .breweryItem {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto; }
    .breweryItem img {
      width: 300px; }
  .breweryEntry {
    padding-top: 10px; }
    .breweryEntry a {
      font-family: 'Radley', serif;
      line-height: 39px;
      text-decoration: none; }
  .breweryEntry h3 {
    font-size: 28px; }
  .breweryEntry p {
    font-size: 15px;
    margin-top: 12px; }
  #source {
    font-size: 15px; } }

@media screen and (max-width: 900px) {
  #content {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: white; }
    #content h1 {
      padding-top: 66px; }
    #content h4 {
      font-family: 'Oswald', sans-serif;
      font-size: 22px;
      text-align: center;
      text-transform: uppercase;
      color: #565655; }
  .breweryItem {
    padding-top: 100px;
    padding: 5px;
    display: flex;
    flex-direction: column; }
  .breweryEntry {
    padding-bottom: 10px; }
    .breweryEntry a {
      font-family: 'Radley', serif;
      line-height: 39px;
      text-decoration: none; }
  .breweryEntry h3 {
    font-size: 28px; }
  .breweryEntry p {
    font-size: 15px;
    margin-top: 12px; }
  .source {
    font-size: 13px; } }

.halfImageLogo {
  padding-top: 10px;
  margin: 0 auto; }

.headerContent-bg {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  margin-top: 0px; }

.header h3 {
  font-size: 30px;
  text-align: center;
  color: #565655; }

.header h1 {
  padding-top: 0;
  opacity: 60%; }

.profileContent-bg {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background-color: white;
  margin-top: 0px;
  display: flex;
  flex-direction: row; }

.header img {
  max-width: 420px;
  margin-top: 45px;
  margin: 0 auto;
  align-content: space-around;
  padding-right: 25px; }

li, a {
  text-align: center;
  list-style: none;
  margin-top: 15px;
  font-family: 'Radley', serif;
  color: #565655;
  margin-bottom: 10px; }

.columnLayout {
  padding: 70px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-items: center; }

.column {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-content: space-around;
  margin-right: 70px;
  margin-right: 70px;
  padding: 20px; }

.column h1 {
  font-size: 80px;
  text-align: center;
  opacity: 60%; }

.column h3 {
  font-size: 30px; }

.column p {
  font-family: 'Radley', serif;
  font-size: 15px;
  margin-top: 10px;
  text-align: left;
  color: #565655; }

.beerItem {
  padding-top: 20px;
  padding-right: 50px; }

.beerItem img {
  width: 450px; }

.journal-add {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  opacity: .75; }

.side-by-side li {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  padding-bottom: 30px; }

.myButton {
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #ffec64;
  border-radius: 6px;
  display: inline-block;
  cursor: pointer;
  color: #565656;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: bold;
  padding: 11px 50px;
  text-decoration: none;
  text-align: center; }

.myButton:hover {
  background-color: #565656;
  color: #ffab23; }

.myButton:active {
  position: relative;
  top: 2px; }

@media screen and (max-width: 994px) {
  .header h3 {
    font-size: 30px;
    text-align: center;
    color: #565655; }
  .header h1 {
    padding-top: 0;
    opacity: 60%;
    text-align: center; }
  .header img {
    width: 480px;
    align-content: space-around; }
  .columnLayout {
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-around; }
  .column {
    display: flex;
    flex-direction: column;
    align-content: center; }
  .beerItem img {
    width: 480px;
    padding-top: 20px;
    padding-bottom: 20px; } }

@media screen and (max-width: 675px) {
  .header h3 {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    color: #565655; }
  .header h1 {
    padding-top: 0;
    opacity: 60%;
    font-size: 37px; }
  .header h4 {
    padding-left: 20px;
    padding-right: 20px; }
  .header img {
    margin: 0 auto;
    width: 310px; }
  .beerItem img {
    width: 400px;
    padding-top: 20px;
    padding-bottom: 20px; } }

@media screen and (max-width: 400px) {
  .beerItem img {
    width: 400px;
    padding-top: 20px;
    padding-bottom: 20px; }
  .header h1 {
    padding-top: 0;
    opacity: 60%;
    font-size: 25px; }
  .header img {
    width: 300px; } }

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

h1, h2, h3, h4, h5, h6, a {
  margin-top: 12px;
  text-align: center; }

#signIn {
  z-index: 1; }

#signOut {
  z-index: 3; }

body {
  background-color: #565655;
  background-image: url("../images/background-image.png");
  background-size: cover;
  background-repeat: no-repeat; }

.auth {
  width: 100%;
  height: 18px;
  display: flex;
  flex-direction: column; }
  .auth h3 {
    font-family: 'Oswald', sans-serif;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    font-size: 25px;
    font-style: 700;
    color: white;
    text-align: right;
    padding-right: 100px; }
  .auth p {
    line-height: 25px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    text-align: right;
    padding-right: 100px; }
  .auth a {
    width: 100%;
    text-decoration: none;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    text-align: right; }

.logo {
  width: 200px;
  margin: 0 auto;
  position: relative;
  z-index: 1; }
  .logo a:hover {
    margin-bottom: 25px; }

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 55px;
  text-align: center;
  font-style: 700;
  text-transform: uppercase;
  color: #565655; }

.subtext {
  width: 400px;
  margin: 0 auto; }
  .subtext h2 {
    margin-bottom: 20px; }

.subtext h1 {
  font-size: 22px; }

.subtext p {
  margin-top: 12px; }

h2 {
  font-size: 36px;
  text-align: center;
  color: #565655; }

h3 {
  font-family: 'Radley', serif;
  font-size: 18px;
  color: #565655; }

p {
  font-family: 'Radley', serif;
  font-size: 15px;
  text-align: center;
  color: #565655; }

p .small {
  font-size: 9.2px; }

.navWrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: white; }

nav {
  margin-top: 110px;
  width: 100%;
  height: 65px;
  background-color: #556655;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center; }
  nav a {
    align-items: center;
    font-family: 'Radley', serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 39px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fbb03b; }
  nav a:hover {
    background-color: none;
    margin-bottom: 16px;
    margin-bottom: 16px; }

#content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 155px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: white; }
  #content h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    text-align: center;
    text-transform: uppercase;
    color: #565655; }

.homepageImage img {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 35px;
  padding-top: 35px; }

.source {
  display: block;
  height: 50px;
  color: #565655;
  padding-bottom: 15px; }
  .source a {
    text-decoration: none;
    color: gray; }

hr {
  margin-top: 10px;
  margin-bottom: 10px; }

/* On screens that are 399x or less */
@media screen and (max-width: 399px) {
  #content {
    background-color: white;
    padding-top: 70px; }
    #content h1 {
      padding-top: 70px; }
  .homepageImage img {
    width: 300px;
    margin: 0 auto;
    padding: 10px;
    padding-bottom: 55px; }
  .subtext {
    width: 250px; } }

/* On screens that are 700px or less */
@media screen and (max-width: 745px) {
  #content h1 {
    padding-top: 70px; }
  #signOut {
    padding-top: 40px;
    z-index: 4; }
  .navWrapper {
    padding-bottom: 28px; }
  .nav a {
    z-index: 2; }
  .homepageImage img {
    width: 450; }
  .subtext {
    width: 250px; } }

/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .breweryEntry {
    padding-left: 0px; }
  nav {
    width: 80%;
    margin: 0 auto;
    margin-top: 0px;
    background-color: white;
    flex-direction: column;
    padding-bottom: 150px; }
    nav .logo {
      width: 180px;
      padding-top: 185px;
      margin: 0 auto; }
    nav a {
      margin-bottom: 5px;
      line-height: 15px;
      font-size: 1.25rem;
      z-index: 2; }
    nav a:hover {
      color: #565655; }
  h1 {
    padding-top: 0px; }
  #content {
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: white; }
  .auth {
    background-color: #565656;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column; }
    .auth h3 {
      padding-right: 0px;
      font-family: 'Oswald', sans-serif;
      font-size: 25px;
      font-style: 700;
      color: white;
      text-align: center; }
    .auth p {
      padding-right: 0px;
      text-align: center;
      line-height: 30px;
      color: white;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); }
    .auth a {
      z-index: 2;
      padding-bottom: 70px;
      padding-right: 0px;
      margin: 0 auto;
      text-decoration: none;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } }

#breweryform {
  cursor: pointer; }

.auth {
  display: flex;
  flex-direction: row; }