/** @format */
/** @format */
html,
body {
  font-family: Avenir, serif;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  color: #323232;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
img {
  margin: 0;
  padding: 0;
}

li,
button {
  cursor: pointer;
}

textarea {
  resize: none;
}

/** @format */
@font-face {
  font-family: "Avenir";
  src: url("../assets/Font/AvenirNextLTPro-Regular.otf"), url("../assets/Font/Alternativefiles/AvenirNextLTPro.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Avenir";
  src: url("../assets/Font/AvenirNextLTPro-Demi.otf"), url("../assets/Font/Alternativefiles/AvenirNextLTProDemi.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Avenir";
  src: url("../assets/Font/AvenirNextLTPro-Bold.otf"), url("../assets/Font/Alternativefiles/AvenirNextLTProBold.ttf");
  font-weight: 700;
  font-style: normal;
}
/** @format */
/* media query for mobile */
/* media query for tablet */
/* media query for landscape, desktop pixel density desktops */
/* media query for high pixel density desktops */
/** @format */
.navbar {
  background-color: #323232;
}
.navbar__header {
  margin: 0 auto;
  max-width: 1020px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .navbar__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.navbar__brand {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  padding: 1rem 0 0.5rem 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
}
@media only screen and (min-width: 768px) {
  .navbar__brand {
    padding: 0.5rem 1rem 0 2.25rem;
  }
}
.navbar__logo {
  max-height: 3rem;
  max-width: 8rem;
}
.navbar__menu {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .navbar__menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
.navbar__content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .navbar__content {
    padding: 0.5rem 0 0 0;
  }
}
.navbar__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  list-style: none;
  text-align: center;
  width: 100%;
  -webkit-text-decoration-style: none;
          text-decoration-style: none;
  transition: 0.5s;
  position: relative;
}
.navbar__item--inactive {
  border-bottom: 0.25rem solid #323232;
}
.navbar__item--active {
  border-bottom: 0.25rem solid #fafafa;
}
.navbar__item::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  border-bottom: 0.25rem solid #fafafa;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s;
}
.navbar__item:hover::after {
  transform: scaleX(1);
  transform-origin: center;
}
@media only screen and (min-width: 768px) {
  .navbar__item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    margin: 0 1.75rem;
  }
}
.navbar__link {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
  color: #e1e1e1;
  padding-bottom: 0.5rem;
}
.navbar__link--active {
  font-weight: bold;
  color: #ffffff;
}
.navbar__link:hover {
  color: #ffffff;
}
@media only screen and (min-width: 768px) {
  .navbar__link {
    padding: 1.25rem 0;
  }
}

/** @format */
.footer {
  background-color: #323232;
  color: #ffffff;
}
.footer__details {
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
  .footer__details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: space-between;
    flex-wrap: wrap;
    padding: 1.75rem 2.25rem;
  }
}
@media only screen and (min-width: 1280px) {
  .footer__details {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
}
.footer__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.75rem 0;
}
@media only screen and (min-width: 768px) {
  .footer__content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-basis: 31%;
    padding: 1.5rem 0 1rem 0;
  }
  .footer__content:nth-child(1) {
    order: 1;
    justify-self: center;
  }
  .footer__content:nth-child(2) {
    order: 2;
  }
  .footer__content:nth-child(3) {
    order: 4;
  }
  .footer__content:nth-child(4) {
    order: 5;
  }
  .footer__content:nth-child(5) {
    order: 6;
  }
  .footer__content:nth-child(6) {
    order: 3;
    align-items: flex-end;
    justify-items: center;
    padding: 0;
  }
  .footer__content:nth-child(7) {
    order: 7;
    flex-grow: 2;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 1280px) {
  .footer__content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
  }
  .footer__content:nth-child(1) {
    flex-basis: 25%;
    order: 1;
  }
  .footer__content:nth-child(2) {
    flex-basis: 25%;
    order: 2;
  }
  .footer__content:nth-child(3) {
    flex-basis: 25%;
    order: 4;
  }
  .footer__content:nth-child(4) {
    flex-basis: 25%;
    order: 5;
  }
  .footer__content:nth-child(5) {
    flex-basis: 50%;
    flex-grow: 2;
    order: 6;
  }
  .footer__content:nth-child(6) {
    flex-grow: 2;
    flex-basis: 50%;
    order: 3;
  }
  .footer__content:nth-child(7) {
    flex-basis: 100%;
    flex-grow: 1;
  }
}
.footer__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 0 0 0;
}
@media only screen and (min-width: 768px) {
  .footer__title {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.75rem;
    padding: 0;
    font-size: 2.15rem;
  }
}
.footer__icon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .footer__icon {
    padding: 0 0 0.25rem 0;
  }
}
.footer__img {
  padding-right: 1.75rem;
  height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__img {
    height: 1.75rem;
  }
}
.footer__name {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding: 0 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .footer__name {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 600;
    padding: 0 0 1.5rem 0;
  }
}
.footer__address, .footer__text {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  padding: 0 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .footer__address, .footer__text {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    padding: 0 0 1.5rem 0;
  }
}
.footer__email {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  color: #ffffff;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .footer__email {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.footer__logo {
  max-height: 3rem;
  max-width: 8rem;
}
@media only screen and (min-width: 768px) {
  .footer__logo {
    max-height: 3rem;
    max-width: 8rem;
  }
}
.footer__copyright {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  font-size: 0.68rem;
}
@media only screen and (min-width: 768px) {
  .footer__copyright {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/** @format */
.about {
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
  .about {
    padding: 0 2.25rem;
  }
}
.about__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.about__heading {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1.5rem 0 0.5rem 0;
}
@media only screen and (min-width: 768px) {
  .about__heading {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.75rem;
    padding: 3rem 0 2.25rem 0;
  }
}
@media only screen and (min-width: 768px) {
  .about__content {
    padding: 0 3.5rem;
  }
}
@media only screen and (min-width: 1280px) {
  .about__content {
    padding: 0 5rem;
  }
}
.about__img {
  width: 100%;
}
.about__quote {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding: 0.5rem 0;
}
@media only screen and (min-width: 768px) {
  .about__quote {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 2.5rem 0 1rem 0;
  }
}
.about__text {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding: 0 0 1.5rem 0;
}
@media only screen and (min-width: 768px) {
  .about__text {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 600;
    padding: 0 0 3rem 0;
  }
}

.main {
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
  .main {
    padding: 0 2.25rem;
  }
}
@media only screen and (min-width: 768px) {
  .main__head {
    padding: 0 3.5rem;
  }
}
@media only screen and (min-width: 1280px) {
  .main__head {
    padding: 0 5rem;
  }
}
.main__title {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  font-weight: 500;
  padding: 0 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .main__title {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 0 0 1rem 0;
  }
}
@media only screen and (min-width: 768px) {
  .main__content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: top;
  }
}
.main__text {
  padding: 0 0 1.5rem 0;
}
@media only screen and (min-width: 768px) {
  .main__text:nth-child(odd) {
    padding-right: 1rem;
  }
  .main__text:nth-child(even) {
    padding-left: 1rem;
  }
}
.main__para {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  .main__para {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}

.gallery {
  background-color: #fafafa;
}
.gallery__content {
  margin: 0 auto;
  max-width: 1020px;
  padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
  .gallery__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 2.25rem;
  }
}
.gallery__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1.5rem 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .gallery__title {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.75rem;
    padding: 3rem 0 2.25rem 0;
  }
}
@media only screen and (min-width: 768px) {
  .gallery__photo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0 2rem 0;
  }
}
.gallery__img {
  width: 250px;
  height: 180px;
  filter: grayscale(100%);
  padding: 0.5rem 0;
}
@media only screen and (min-width: 768px) {
  .gallery__img {
    width: 31%;
  }
}
.gallery__img:hover {
  filter: grayscale(0%);
  transition: all 1s ease-in-out;
}

.display {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  padding: 0 1rem;
  margin: 0 auto;
  max-width: 1020px;
}
@media only screen and (min-width: 768px) {
  .display {
    padding: 0 2.25rem;
  }
}
.display__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1.5rem 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .display__title {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.75rem;
  }
}
.display__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: left;
  padding: 1rem 0;
}
@media only screen and (min-width: 768px) {
  .display__content {
    padding: 1.5rem 3.5rem;
  }
}
@media only screen and (min-width: 1280px) {
  .display__content {
    padding: 1.5rem 15rem;
  }
}
.display__picture {
  width: 20%;
  background-image: url("../assets/Images/login-icon.jpg");
  background-position: -0.25rem;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 2.25rem;
  max-height: 2.25rem;
  border-radius: 50%;
  margin-top: 1.625rem;
}
@media only screen and (min-width: 768px) {
  .display__picture {
    max-width: 3rem;
    max-height: 3rem;
    margin-top: 1.563rem;
  }
}
.display__form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  width: 100%;
  padding: 0 1rem;
}
.display__label {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  color: #afafaf;
  padding-bottom: 0.25rem;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  .display__label {
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 600;
  }
}
.display__name, .display__comment {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  font-family: Avenir, "Roboto";
  min-height: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;
  padding: 0.75rem;
  margin: 0 0 1rem 0;
}
@media only screen and (min-width: 768px) {
  .display__name, .display__comment {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    min-height: 3rem;
    padding: 1rem;
  }
}
.display__name:active, .display__comment:active {
  border: 1px solid #323232;
}
.display__name--error, .display__comment--error {
  border: 1px solid #d22d2d;
}
.display__name::-moz-placeholder, .display__comment::-moz-placeholder {
  color: #323232;
}
.display__name:-ms-input-placeholder, .display__comment:-ms-input-placeholder {
  color: #323232;
}
.display__name::placeholder, .display__comment::placeholder {
  color: #323232;
}
.display__comment {
  height: 6rem;
  vertical-align: text-top;
}
.display__btn {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  background-color: #323232;
  color: #ffffff;
  height: 2.5rem;
  min-width: 9.375rem;
  padding: 0 2rem;
  margin-top: 0.5rem;
  text-transform: uppercase;
  border-radius: 4px;
  border: 0;
}
.display__btn:hover {
  background-color: #000000;
}
@media only screen and (min-width: 768px) {
  .display__btn {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    width: 25%;
    align-self: flex-end;
  }
}

.comment {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  padding: 0 1rem 1rem 1rem;
  margin: 0 auto;
  max-width: 1020px;
}
@media only screen and (min-width: 768px) {
  .comment {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    padding: 0 5.75rem;
  }
}
@media only screen and (min-width: 1280px) {
  .comment {
    padding: 0 17.25rem;
  }
}
.comment__tile {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: left;
  border-bottom: 2px solid #e1e1e1;
  width: 100%;
  padding: 0.5rem 0 1rem 0;
}
.comment__tile:nth-child(1) {
  border-top: 2px solid #e1e1e1;
}
@media only screen and (min-width: 768px) {
  .comment__tile:last-child {
    margin: 0 0 2rem 0;
  }
}
.comment__picture {
  width: 20%;
  background-image: url("");
  background-color: #e1e1e1;
  background-position: -4px;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 2.25rem;
  max-height: 2.25rem;
  border-radius: 50%;
  margin-top: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .comment__picture {
    max-width: 3rem;
    max-height: 3rem;
    margin-top: 0.625rem;
  }
}
.comment__content {
  padding: 0 1rem;
  width: 100%;
}
.comment__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
.comment__name {
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.25rem;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  .comment__name {
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
}
.comment__date {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  color: #afafaf;
}
@media only screen and (min-width: 768px) {
  .comment__date {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.comment__text {
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.125rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .comment__text {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.comment__icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 0 0 0;
}
.comment__delete, .comment__like {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}
.comment__like, .comment__delete {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  background-color: #ffffff;
  height: 2rem;
  margin-left: 0.5rem;
  border: 0;
}
@media only screen and (min-width: 768px) {
  .comment__like, .comment__delete {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.comment__delete {
  width: 2rem;
}
.comment__like {
  width: 4rem;
}

/** @format */
.hero {
  background: url("../assets/Images/hero-bio.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(50, 50, 50, 0.5);
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  margin: 0 auto;
  max-width: 1020px;
  padding: 21vw 1rem;
}
@media only screen and (min-width: 768px) {
  .hero__content {
    padding: 21vw 2.25rem;
  }
}
.hero__title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #ffffff;
  padding: 1rem 0;
}
@media only screen and (min-width: 768px) {
  .hero__title {
    font-weight: 700;
    font-size: 3.75rem;
    line-height: 4.25rem;
    padding: 1rem 0 2rem 0;
  }
}

/** @format *//*# sourceMappingURL=bio.css.map */