/*
  This css file is for individual users to restyle items for their personal site,
  or for the implementation of features specifically for their site. Anything that
  is an official part of the theme (ex. Pull Requests) should be included in main.css
  and follow the formatting and style given.
*/

a:hover {
    border-bottom-color: transparent;
    color: #771313; }

.button:hover {
        border: solid 1px #771313;
        color: #771313 !important; }

        input:hover,
            select:hover,
            textarea:hover {
              border-color: #771313; }

            input:focus, input:active,
            select:focus,
            select:active,
            textarea:focus,
            textarea:active {
              border: solid 1px #771313; }

/* Intro */
#site-intro {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  padding: 1em;
  text-align: center; }
  #site-intro a {
    border: 0; }
  #site-intro p {
    opacity: 0.6; }
  #site-intro header h1 {
    font-size: 1em;
    margin-bottom: 0;
    font-family: Verdana;
    font-weight: bold;
    color: #666666; }
  #site-intro main p {
    font-size: 0.7em;
    letter-spacing: 0.25em;
    line-height: 2.5;
    margin-bottom: 0;
    text-transform: uppercase; }
  #site-intro.hidden-single-column {
    display: none; }
    @media (min-width: 1024px) {
      #site-intro.hidden-single-column {
        display: flex; } }

/* Sidebar */
#site-sidebar header h1 {
  font-size: 0.9em; }

#site-sidebar > * {
  border-top: solid 1px rgba(160, 160, 160, 0.3);
  margin: 3em 2em 0 2em;
  padding-top: 3em; }

@media (min-width: 1024px) {
  #site-sidebar > *:first-child {
    margin-top: 0; } }

#site-sidebar footer {
  margin: auto;
  width: max-content; }

#mini-contacts p {
  opacity: 0.65;
  font-size: 0.9em;
  padding: 0; }

.home {
    margin: 1.5em auto;
    padding: 0;
    max-width: 55em; }
    .home > header {
      border-bottom: solid 1px rgba(160, 160, 160, 0.3);
      margin-top: 1em;
      text-align: center;
      word-break: break-word; }
      @media (min-width: 768px) {
        .home > header {
          display: flex;
          justify-content: space-between;
          text-align: left; } }
      .home > header div {
        padding: 0; }
        @media (min-width: 768px) {
          .home > header div {
            padding: 0; } }
      .home > header p {
        margin: -1em 0 0 0; }
      .home > header .title {
        font-size: 1.1em;
        width: 100%; }
        @media (min-width: 768px) {
          .home > header .title {
            width: 75%; } }
      .home > header .meta {
        display: flex;
        flex-direction: column;
        width: 100%; }
        @media (min-width: 768px) {
          .home > header .meta {
            border-left: solid 1px rgba(160, 160, 160, 0.3);
            text-align: right;
            width: 25%; } }
        .home > header .meta .published {
          font-family: "Raleway", Helvetica, sans-serif;
          font-size: 0.7em;
          font-weight: 800;
          letter-spacing: 0.25em;
          text-transform: uppercase; }
        .home > header .meta p,
        .home > header .meta .author,
        .home > header .meta .format {
          font-family: "Raleway", Helvetica, sans-serif;
          font-size: 0.6em;
          letter-spacing: 0.25em;
          text-transform: uppercase; }
    @media (min-width: 1024px) {
      .home > div,
      .home > p {
        margin: 1em; } }
    @media (min-width: 1440px) {
      .home > div,
      .home > p {
        margin: 1em; } }
    .home > div > p,
    .home > p {
      text-align: justify; }
    .home a.image {
      border: 0;
      display: block;
      margin: 1em -1em;
      overflow: hidden; }
      .home a.image:hover img {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05); }
      .home a.image img {
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
        -ms-transition: -ms-transform 0.2s ease-out;
        -o-transition: -ms-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
        width: 100%; }
    .home > footer {
      display: flex;
      flex-direction: column; }
      .home > footer .button {
        margin: 1em auto;
        width: 100%; }
      .home > footer .stats {
        display: flex;
        cursor: default;
        justify-content: space-around;
        list-style: none;
        margin: 0.5em 0;
        padding: 0; }
        .home > footer .stats li {
          display: flex;
          align-items: center;
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          max-width: 50%; }
          .home > footer .stats li:hover ul li, .home > footer .stats li:active ul li {
            visibility: visible;
            opacity: 1;
            line-height: 1;
            margin: 1em;
            width: auto; }
          .home > footer .stats li.categories:before {
            content: "\f07b";
            width: 20px; }
          .home > footer .stats li.tags:before {
            content: "\f02c";
            width: 20px; }
          .home > footer .stats li ul {
            display: flex;
            flex-wrap: wrap;
            border-left: solid 1px rgba(160, 160, 160, 0.3);
            margin: 0 0 0 1em;
            padding: 0 0 0 1em; }
            .home > footer .stats li ul li {
              visibility: visible;
              font-family: "Raleway", Helvetica, sans-serif;
              font-size: 0.6em;
              font-weight: 400;
              letter-spacing: 0.25em;
              line-height: 0;
              margin: 0;
              width: 0;
              opacity: 0;
              -webkit-transition: visibility 0s, opacity 0.5s linear, line-height 0.5s linear, margin 0.5s linear, width 0.5s linear;
              -moz-transition: visibility 0s, opacity 0.5s linear, line-height 0.5s linear, margin 0.5s linear, width 0.5s linear;
              -ms-transition: visibility 0s, opacity 0.5s linear, line-height 0.5s linear, margin 0.5s linear, width 0.5s linear;
              -o-transition: visibility 0s, opacity 0.5s linear, line-height 0.5s linear, margin 0.5s linear, width 0.5s linear;
              transition: visibility 0s, opacity 0.5s linear, line-height 0.5s linear, margin 0.5s linear, width 0.5s linear;
              text-transform: uppercase; }
              .home > footer .stats li ul li:nth-child(-n + 3) {
                visibility: visible;
                opacity: 1;
                width: auto;
                line-height: 1;
                margin: 1em; }
              .home > footer .stats li ul li a {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap; }

.inline-svg {
                  display: block;
                  height: 4.15rem;
                  width: 4.15rem;
                  top: 0.15rem;
                  position: relative;
                  margin: auto;
                }

.centered-text {
                display: block;
                text-align: center;
                color: #3c3b3b;
                font-family: raleway,Helvetica,sans-serif;
                letter-spacing: .25em;
                line-height: 1.65;
                text-transform: uppercase;
                font-weight: bolder;
}


/* Add rounded corners to the top left and the top right corner of the image */
.member-photo {
  border-radius: 5px 5px 0 0;
}

.header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.team {
  display: flex;
  flex-flow: row wrap;
  margin: 1.5em auto;
  max-width: 55em;
  text-align: center;
  justify-content: flex-start;
}

.team > header {
  flex: 0 0 100%;
}

.team > .card {
  border-radius: 3px;
  background-color: white;
  margin: 0.8em;
}

.team-member {
  flex: 1 0 30%;
  padding: 0.5em;
  max-width: 30%;
  min-width: 250px;
  margin-right:auto;
}


/* Member Container */
.member-container {
  display: flex;
  flex-flow: row wrap;
  margin: 1.5em auto;
  max-width: 55em;
  justify-content: flex-start;
  align-items: flex-end;
}

.member-container > .member-photo {
  max-width: 30%;
  padding: 10px;
  border-bottom: unset;
}

.member-container h3 {
  margin-bottom: 0em;
}

.member-container h5:first-of-type {
  margin-top: 15px;
}

.member-container h5 {
  margin: 0em;
  text-transform: lowercase;
}

.contact-info {
  margin: 15px;
}

.contact-info > .fab {
  margin: 10px;
}

.member-content {
  padding-left: 10px;
}

.member-content hr {
  margin: 0;
}

.contacts {
  display: flex;
  flex-flow: row wrap;
  margin: 1.5em auto;
  max-width: 55em;
  text-align: start;
  justify-content: flex-start;
}

.contacts > header {
  flex: 0 0 100%;
  margin: 1.5em auto;
  text-align: center;
}

#contacts-content {
  flex: 0 0 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.areas {
  display: flex;
  flex-flow: row wrap;
  margin: 1.5em auto;
  max-width: 55em;
  text-align: center;
  justify-content: flex-start;
}

.areas > header {
  flex: 0 0 100%;
}

.area {
  display: flex;
  flex-flow: row wrap;
  margin: 1.5em auto;
  max-width: 55em;
  text-align: center;
  justify-content: flex-start;
}

.area > area-content {
  flex: 0 0 100%;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 0px;
  border-radius: 5px;
  background: #fff;
  position: relative;
  width: 20%;
  transition: all 5s ease-in-out;
}


.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 2%;
  left: 98%;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #771313;
}
.popup .content {
  max-height: 30%;
}

@media screen and (max-width: 700px){
  .popup{
    width: 78%;
  }
}