body {
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased !important;
  font-smoothing: antialiased !important;
}

/* Лоадер «4 точки» (lds-ellipsis). Подхватывают все блоки с классом
   .lds-ellipsis, у которых внутри 4 пустых <div> (см. index.tpl: лоадер
   featured-навигации и portfolio-loader). Снимается через $.removeClass
   из featuredSlider/portfolioLayout в media/js/cubabranding.js. */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  background: #000;
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) { left: 8px;  animation: lds-ellipsis1 .6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px;  animation: lds-ellipsis2 .6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 .6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 .6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); }    100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); }    100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }

button[tabindex] {
  outline: none !important;
}

.featured-slider-wrap .tns-outer, .featured-slider-wrap .tns-ovh, .featured-slider-wrap .tns-inner {
  position: relative !important;
  width: 100%;
  height: 100% !important;
}
.tns-nav {
  text-align: center;
  margin: 10px 0;
}
.tns-nav button{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 6px;
  height: 6px;
  padding: 0;
  margin: 0 5px;
  border-radius: 3px;
  background: rgba(0,0,0,.25);
  border: 0;
}
.tns-nav button.tns-nav-active{
  width: 68px;
}

.portfolio-layout {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(23.5%, 1fr));
  grid-auto-rows: minmax(24.1vw, auto);
  grid-auto-flow: dense;
  grid-gap: 0.5vw;
  padding: 0.5vw;
}
.portfolio-item {
  flex: none !important;
  width: auto;
  height: auto;
  -webkit-transition: opacity 800ms ease, -webkit-transform 800ms ease;
  transition: opacity 800ms ease, -webkit-transform 500ms ease;
  transition: opacity 800ms ease, transform 500ms ease;
  transition: opacity 800ms ease, transform 500ms ease, -webkit-transform 500ms ease;
}
.horiz-portfolio-item {
  grid-column-end: span 2;
  grid-row-end: span 1;
}
.vert-portfolio-item {
  grid-column-end: span 1;
  grid-row-end: span 2;
}
.double-portfolio-item {
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.portfolio-layout-wrap .w--current .portfolio-item-cover {
  transform: none !important;
}

.portfolio-layout-wrap .w--current .portfolio-item-overlay {
  opacity: 0.7 !important;
}

.portfolio-layout-wrap .w--current .portfolio-item-content {
  opacity: 1 !important;
}
.work-slider {
  display: block;
  overflow: visible;
}
.work-slider-image {
  padding: 2.5px;
  width: auto;
  height: 60vh;
  max-height: 640px;
}
.work-slider-image img{
  height: 100%;
  width: auto;
}

.work-team h1, .work-team h2, .work-team h3, .work-team h4, .work-team h5, .work-team h6, .work-team p {
  margin: 0px;
  font-size: 13px;
  line-height: 20px;
  color: #777777;
  font-weight: 500;
  margin-bottom: 8px;
}

.work-team p {
  color: #000000;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
}

.a2a_svg { padding: 3px !important; background-color: #000000 !important; border-radius: 100px !important; }
.a2a_svg.a2a_s_vk { padding-left: 2px !important; }
.a2a_kit a { padding-left: 4px !important; padding-right: 10px !important; }
.a2a_mini_services .a2a_i, .a2a_more, .a2a_full_services a { color: black !important; line-height: 32px !important; font-size: 16px !important; font-weight: 500 !important; }
.a2a_menu_find_container { border-radius: 0px !important; }
.a2a_menu_find_container .a2a_svg{ padding: 0px !important; background-color: transparent !important; }
.a2a_menu { border-radius: 0px !important; margin-top: 6px !important; border: none !important; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) !important; }
.a2a_menu.a2a_full { height: 294px !important; }
.a2a_full_footer { display: none !important; }

@media (max-width: 991px) {
  .portfolio-layout {
    grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
    grid-auto-rows: minmax(32.5vw, auto);
  }
  .safari-navmenu {
    -webkit-backdrop-filter: blur(3px);
    background-color: rgba(0,0,0,0.9);
  }
}
@media (max-width: 767px) {
  .epda-about {
    mix-blend-mode: multiply;
  }
  .portfolio-layout {
    grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
    grid-auto-rows: minmax(49vw, auto);
  }
  .work-slider-image {
    width: auto;
    height: auto;
    max-height: none;
  }
  .work-slider-image img{
    height: 50vw;
    width: auto;
  }
  .a2a_kit a {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

@media (max-width: 479px) {
  .portfolio-layout {
    grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
    grid-auto-rows: minmax(49vw, auto);
  }
  .work-slider-image img{
    height: 90vw;
    width: auto;
  }
}

/* Изображения в описании проекта.
   Из БД удалены Webflow-обёртки <figure>/<div>, картинки хранятся как голый <img>.
   Единый вид: блок на всю ширину текстовой колонки, адаптивно по высоте. */
.work-rich-text img {
  display: block;
  width: 100%;
  height: auto;
  margin: 30px auto;
}

/* Адаптивная пара изображений (десктоп/мобайл) в описании.
   Виджет вставляется из TinyMCE как <figure class="dual_image"> с двумя <img>.
   На фронте редакторская обвязка (табы) скрыта, нужная картинка выбирается по
   ширине экрана. Брейкпоинт — 479px (мобильная картинка для экранов < 480px). */
.work-rich-text .dual_image {
  margin: 30px auto;
}
.work-rich-text .dual_image img {
  margin: 0; /* отступ задаёт сама figure, а не внутренние картинки */
}
.work-rich-text .dual_image_tabs {
  display: none; /* редакторские табы на фронте не показываем */
}
.work-rich-text .dual_image_mobile {
  display: none; /* по умолчанию показываем десктопную картинку */
}
@media (max-width: 479px) {
  .work-rich-text .dual_image_desktop {
    display: none;
  }
  .work-rich-text .dual_image_mobile {
    display: block;
  }
}

/* Односторонние адаптивные картинки (только десктоп / только мобайл): набор
   картинок в desktop- и mobile-версии описания различается, поэтому часть фигур
   содержит лишь одну сторону. На «чужом» устройстве такая figure скрывается
   целиком, чтобы не оставлять пустой отступ. В TinyMCE обе вкладки видны, просто
   одна сторона пустая. */
@media (min-width: 480px) {
  .work-rich-text .dual_image.is_mobile_only {
    display: none;
  }
}
@media (max-width: 479px) {
  .work-rich-text .dual_image.is_desktop_only {
    display: none;
  }
}