@charset "UTF-8";
body {
  font-size: 20px;
  font-family: Arial;
}

#site {
  max-width: 1280px;
  margin: 0 auto;
}
#site .content {
  padding: 20px 30px;
}
@media only screen and (min-width: 768px) {
  #site .content {
    min-height: 500px;
  }
}
#site .footer {
  padding: 20px 30px;
  background: #eee;
}
#site .footer .footer__info {
  display: flex;
}
#site .footer .footer__info .footer__col.first {
  margin: 0 50px 0 0;
}
#site .footer .footer__info .footer__col.second {
  padding: 0 0 0 50px;
  border-left: 1px solid #777;
}
#site .footer .footer__info .footer__col div {
  font-size: 0.7em;
  color: #555;
}
#site .footer .footer__info .footer__col div a {
  text-decoration: underline;
  color: #555;
}
#site .footer .footer__info .footer__col div a:hover {
  color: #000;
}

.logo a {
  display: block;
  width: 100%;
  height: 145px;
  background: url("/img/top-bg.jpg") no-repeat 0 0;
  text-decoration: none;
}
@media only screen and (max-width: 360px) {
  .logo a {
    background-position-x: -40px;
  }
}

.topmenu {
  padding: 0px 0px 0px 30px;
}

.topmenu--desktop {
  display: flex;
  width: 100%;
  padding: 10px 0;
  flex-wrap: wrap;
  column-gap: 20px;
}
@media only screen and (max-width: 768px) {
  .topmenu--desktop {
    display: none;
  }
}
.topmenu--desktop div a {
  color: #000;
  text-decoration: none;
  font-size: 1.1em;
}
.topmenu--desktop div a:hover {
  text-decoration: underline;
}
.topmenu--desktop div a.active {
  text-decoration: underline;
}

.topmenu--mobile {
  display: none;
  position: fixed;
  top: 10px;
  left: 0;
  width: 500px;
  z-index: 990;
}
@media only screen and (max-width: 768px) {
  .topmenu--mobile {
    display: block;
  }
}
.topmenu--mobile .topmenu-mobile-switcher {
  position: relative;
  border: 1px solid #000;
  border-left-style: none;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 0 10px 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 992;
}
.topmenu--mobile .topmenu-mobile-switcher.active {
  border-radius: 0;
  border-right-color: #fff;
}
.topmenu--mobile .topmenu-mobile-block {
  position: absolute;
  display: none;
  top: 0;
  left: 39px;
  z-index: 991;
  border: 1px solid #000;
  width: 90%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 0 10px;
}
.topmenu--mobile .topmenu-mobile-block.active {
  display: block;
}
.topmenu--mobile .topmenu-mobile-block a {
  color: #000;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #eee;
  padding: 5px 0 5px 0;
}
.topmenu--mobile .topmenu-mobile-block a:hover {
  text-decoration: underline;
}
.topmenu--mobile .topmenu-mobile-block a:last-child {
  border-bottom-style: none;
}

.home__image img {
  border: 1px solid #000;
  height: 100%;
  max-height: 500px;
}

.home__text {
  margin: 20px 0;
}

.carousel-item {
  transition: transform 2s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2s;
}

.projects__menu {
  display: flex;
  column-gap: 10px;
  row-gap: 10px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 992px) {
  .projects__menu {
    min-width: auto;
  }
}
.projects__menu a {
  display: block;
  min-width: 250px;
  text-align: center;
  background: #c4dbfd;
  border: 1px solid #4e99ff;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  color: #000;
  font-size: 0.9em;
  padding: 2px 20px;
}
@media only screen and (max-width: 992px) {
  .projects__menu a {
    min-width: auto;
    padding: 2px 10px;
  }
}
@media only screen and (max-width: 768px) {
  .projects__menu a {
    width: 100%;
    border-radius: 10px;
  }
}
.projects__menu a:hover {
  background: #aaccfd;
}
.projects__menu a.active {
  background: #aaccfd;
}

.project__menu a {
  display: block;
  border-bottom: 1px solid #91b0e6;
  text-decoration: none;
  color: #5878b3;
  font-size: 0.9em;
  padding: 2px 10px;
}
.project__menu a:hover {
  background: #eee;
}
.project__menu a::before {
  content: "•";
  color: #002e76;
  margin: 0 10px 0 0;
}
.project__menu a.active {
  background: #eee;
}

.project__wrapper {
  display: flex;
  margin: 10px 0 0 0;
}
@media only screen and (max-width: 768px) {
  .project__wrapper {
    flex-direction: column;
  }
}
.project__wrapper .project__sidebar {
  min-width: 200px;
  margin: 0 20px 0 0;
}
@media only screen and (max-width: 768px) {
  .project__wrapper .project__sidebar {
    margin: 0 0 20px 0;
  }
}
.project__wrapper .project__content {
  flex-grow: 1;
}

.maininfo__wrapper {
  min-height: 500px;
}

.project__wrapper .project__images {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  row-gap: 34px;
}
@media only screen and (max-width: 1200px) {
  .project__wrapper .project__images {
    column-gap: 2%;
  }
}
@media only screen and (max-width: 768px) {
  .project__wrapper .project__images {
    column-gap: 4%;
    row-gap: 10px;
  }
}
@media only screen and (max-width: 576px) {
  .project__wrapper .project__images {
    column-gap: 0;
  }
}
.project__wrapper .project__images a {
  width: 23%;
}
@media only screen and (max-width: 1200px) {
  .project__wrapper .project__images a {
    width: 31%;
  }
}
@media only screen and (max-width: 768px) {
  .project__wrapper .project__images a {
    width: 48%;
  }
}
@media only screen and (max-width: 576px) {
  .project__wrapper .project__images a {
    width: 100%;
  }
}
.project__wrapper .project__images a img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.project__wrapper .project__files {
  margin-top: 20px;
}
.project__wrapper .project__files a.project__file {
  text-decoration: none;
  display: flex;
  border-bottom: 1px solid #eee;
  font-size: 0.8em;
  padding: 10px 0;
}
@media only screen and (max-width: 768px) {
  .project__wrapper .project__files a.project__file {
    font-size: 0.6em;
  }
}
.project__wrapper .project__files a.project__file:hover {
  background-color: #eee;
}
.project__wrapper .project__files a.project__file .project__file-image {
  margin: 5px 10px 0 0;
}
.project__wrapper .project__files a.project__file .project__file-image img {
  width: 35px;
}
.project__wrapper .project__files a.project__file .project__file-header .project__file-title {
  color: #555;
}
.project__wrapper .project__files a.project__file .project__file-header .project__file-sub-title {
  color: #aaa;
}
.project__wrapper .project__slideshow {
  width: 100%;
}
.project__wrapper .project__slideshow img {
  border: 1px solid #000;
  height: 100%;
  max-height: 500px;
}

.login {
  width: 500px;
  margin: 20px auto 100px auto;
}
@media only screen and (max-width: 768px) {
  .login {
    width: 100%;
    margin: 20px auto 50px auto;
  }
}
.login .login__form {
  margin-top: 20px;
  border: 1px solid #aaa;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px 10px #eee;
}

.contact {
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 768px) {
  .contact {
    display: block;
  }
}
.contact .contact__form {
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .contact .contact__form {
    width: 100%;
  }
}
.contact .contact__info {
  width: 50%;
  padding: 0 0 0 50px;
}
@media only screen and (max-width: 768px) {
  .contact .contact__info {
    width: 100%;
    padding: 50px 0 0 0;
  }
}

h2.category__header {
  margin: 0 0 20px 0;
}