body
{
//  font-family: "Quintessential", serif;
//  font-family: "STIX Two Text", serif;
  font-family: "Lato", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: rgb(51, 74, 139);
  margin-left: 1em;
  margin-right: 1em;
}
.center_div
{
  border: 1px solid gray;
  margin-top: 0.5em;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #d0f0f6;
  text-align: left;
  padding: 8px;
}
h1 {
    font-size: 5vw;
}
p {
    font-size: 2vw;
}

@media all and (max-width: 1000px)
{
    h1 { font-size: 10vw; }
    p { font-size: 5vw; }
} /* @media */

#logo
{
    margin-top: 16px;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
//  background-color: #555;
  height: 500px;
//  color: white;
  border-radius: 10px;
}


.sub_heading
{
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1rem;
}

.hamburger-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
    margin-top: 16px;
}

}
.hamburger-text
{
    margin: -20px;
}

.add_to_cart
{
    box-shadow:0px 1px 0px 0px #fff6af;
    background:linear-gradient(to bottom,#ffec64 5%,#ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    color:#333333!important;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 16px;
    text-decoration:none;
    margin-left:1em
}

.align_right { float: right; margin-left: 15px; max-width: 100%; }
.align_left { float: left; margin-right: 15px; max-width: 100%; }
.align_center { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }

.page_name
{
    color: rgb(51, 74, 139);
    /* font-weight: 400; */
    font-size: 170%;
}

.events_on_day
{
    margin-top: 1em;
}

.event_image
{
    width: 100%;
    margin-top: 10px;
}

.event_image:hover
{
/*    -webkit-filter: brightness(50%);*/
}

.event_image_container
{
    position:relative;
}

.event_image_text
{
    position:absolute;
    text-align:center;
    top: 50%;
    transform: translateY(-50%); /* c.f. https://stackoverflow.com/questions/28455100/how-to-center-div-vertically-inside-of-absolutely-positioned-parent-div */
    width: 100%;
    color: white;
    display: none;
}

.event_image_text p
{
    font-size: 12pt;
}

.event_modal_content p
{
    font-size: 12pt;
}

.event_modal_content
{
    margin-top: 1em;
}

.navigation
{
/*    opacity: 1;*/
/*    visibility: hidden;*/
    background-color: paleturquoise;
}
.navigation.active /* Both classes */
                   /* cf https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css */
{
/*  opacity: 1;*/
/*  visibility: visible;*/
/*  max-height: 15em;*/
/*  transition: max-height 0.5s ease-in;*/
}
.navigation ul
{
    list-style-type: none;
    margin-left: 10px;
    padding: 0;
    max-height: 0;
    transition: opacity 0s, visibility 0s, max-height 0.2s ease-out;
    visibility: hidden;
    overflow: hidden;
}


.navigation.active ul /* cf https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css */
{
    visibility: visible;
    max-height: 15em;
    transition: max-height 0.3s ease-in;
}

.navigation li a
{
    display: block;
    text-decoration: none;
    color: rgb(51, 74, 139);
    font-size: 120%;
/*    margin-left:10px'*/
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.navigation li a:hover
{
    color: rgba(80, 164, 213);
}

.navigation .active {
  background-color: rgba(80, 164, 213);
  color: white;
}

.main_content p
{
    font-size: 1em;
}
.mailing-list-ajax-return p
{
    font-size: 1em;
}

/* Menu bar font size for different sized screens */
@media all and (min-width: 768px)
{ .navigation { font-size: 0.7em}}
@media all and (min-width: 850px)
{ .navigation { font-size: 0.8em}}
@media all and (min-width: 900px)
{ .navigation { font-size: 0.9em}}
@media all and (min-width: 1000px)
{ .navigation { font-size: 1.0em}}

@media all and (min-width: 768px)
{

.navigation li
{
    float: left;
/*    margin-right: 1em;*/
}
.navigation ul
{
    visibility: visible;
    max-height: 15em;
}
.hamburger-container
{
    visibility: hidden;
    max-width: 0;
}
.header
{
    justify-content: center;
    margin-top: 16px;
}
.navigation
{
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.modal-dialog
{
    max-width: 75vw;
}

} /* @media */

@media all and (max-width: 1000px)
{
    .friends
    {
      column-count: 1;
      margin-bottom: 1em;
    }
}

@media all and (min-width: 1001px)
{
    .friends
    {
      column-count: 3;
      margin-bottom: 1em;
    }
}