body,
html {
  height:100%;
  width:100%;
  margin:0;
  padding:0
}
:root {
  --bg:#f9dfbb;
  --orange:#f78c27;
  --red:#f15d31;
    --grad: linear-gradient(100deg, #ea5b0d, #e62c3f);
  
}
* {
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;
  padding:0
}
.incut-wrapper {
  width:300px;
  height:600px;
  overflow:hidden;
  position:relative;
  margin:0 auto;
  background-position:center;
}
.incut-container {
  position:relative;
  width:300px;
  height:600px;
  margin:0 auto;
  max-width:1240px;
  z-index:1;
}
i {
  display:block;
  position:absolute;
  opacity:1;
  -webkit-transition:all .25s ease-in-out;
  -o-transition:all .25s ease-in-out;
  transition:all .25s ease-in-out
}
.ld i {

}
i,
i:after,
i:before {
  position:absolute;
  display:block;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
}
.incut-wrapper {
  background-position:center;
  background-repeat:repeat-x;
  background-size:contain;
  background-color:var(--bg);
}
.incut-container {
  opacity:0;
  visibility:hidden;
  transition:all .25s ease-in-out;
  width:600px;
  position:relative;
  margin:0 auto;
  max-width:100%;
  background-image: url(ptrn-lines-w.svg);
}
.incut-container:after,
.incut-container:before
{
  content:'';
  display: block;
  position: absolute;
  bottom:0;
  width: 100%;
  height:36px;
  background-color: #fff;
  clip-path:polygon(0% 20px, 100% 0, 100% 100%, 0% 100%);
  z-index: 2;
    
}

.incut-container:after {
  background:var(--grad);
  z-index: 3;
bottom:-4px;
}
.ld .incut-container {
  opacity:1;
  visibility:visible;
  transition:all .25s ease-in-out
}
.incut-link {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9999;
}
.dh-title {
  position:absolute;
  left:8px;
  top:16px;
  height:auto;
  background-color:var(--red);
   background: var(--grad);
  width:100%;
  margin:0;
  border-radius:16px;
  transform:translate(0,0);
  padding:12px 8px;
  max-width: calc(100% - 16px)
}
.dh-title .dh-logo,
.dh-title .dh-txt {
  position:relative;
  margin:0 auto;
  max-width:calc(100%)
}
.dh-title .dh-logo {
  height:54px;
}
.dh-title .dh-txt {
  height:20px;
}
.dh-title .dh-txt:before {
  background-image:url(route-txt.svg);
  background-size: contain;
  
}
.dh-title .dh-logo:before {
  background-image:url(den-hodby-white.svg)
}
.dh-date {
  position:absolute;
  left: 8px;
  bottom:48px;
  height:auto;
  background-color:var(--red);
  background: var(--grad);
  width:160px;
  margin:0;
  border-radius:16px;
  transform:translate(0,0);
  padding:12px 8px
}
.walkers {
  right:0;
  height:200px;
  width:175px;
  position:absolute;
  transform:translate(0,0);
  bottom:16px;
  z-index: 20
}
.walkers:before {
  background-image:url(walkers250.png)
}
.dh-date .date {
  position:relative;
  height:54px
}
.dh-date .date:before {
  background-image:url(0609.svg)
}
.dh-partner i {
  display:block;
  width:100%;
  height:100%;
  max-width:100px;
  max-height:80px;
  margin:0 auto;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain
}
.dh-partners {
  left:50%;
  position:absolute;
  display:block;
  width:300px;
  height:100px;
  max-width:calc(100% - 16px);
  transition:all .35s ease-in-out;
  opacity: 0;
  transform: translate(-50%,0);
  top:116px;
}
.ld .dh-partners {opacity: 1}

.dh-partners ul {
  list-style-position:outside;
  padding:0;
  margin:0;
  list-style-type:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  width:100%;
  height:100%;
  position:absolute;
  gap: 6px;
}
.dh-partners ul li {
  -webkit-box-flex:0;
  -ms-flex:0 1 calc(33.333% - 8px);
  flex:0 1 calc(33.333% - 8px);
  margin:0 4px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  height:100%;
  transition:all 1s cubic-bezier(.68,-.55,.27,1.55);
}
.prt00 i:before,
.prt01 i:before,
.prt02 i:before,
.prt03 i:before,
.prt04 i:before,
.prt05 i:before,
.prt06 i:before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
}
.prt00 i:before {
 background-image:url(Projekt-Mera-Moskvy.svg);
}

.prt01 i:before {
  background-image:url(new_league.svg);
    background-size:80% auto !important;
}
.prt02 i:before {
  background-image:url(partner02.svg);
}
.prt03 i:before {
  background-image:url(partner03.svg);

}
.prt04 i:before {
  background-image:url(partner04.svg);
}
.prt05 i:before {
  background-image:url(partner05.svg);
}
.prt06 i:before {
  background-image:url(partner06.svg);
}
/* Базовое скрытое состояние логотипов — плавное появление/скрытие при смене стадий и первой загрузке */
.dh-partners ul.dh-partner-logos li {
  transform:scale(.5);
  opacity:0;
  visibility:hidden;
  transition:all .5s ease-in-out;
}

.dh-partners ul.dh-partner-logos .dh-partner.prt00 {flex:0 1 30%}
.dh-partners ul.dh-partner-logos .dh-partner.prt06 {flex:0 1 30%}
.dh-partners ul.dh-partner-logos .dh-partner.prt02 {flex:0 1 40%}

/* Активные логотипы для стадий */
#show.stage01 ul.dh-partner-logos.logos01 li,
#show.stage02 ul.dh-partner-logos.logos02 li {
  transform:scale(1);
  opacity:1;
  visibility:visible;
}
.slogan {
  width:100%;
  height:100%;
  position:absolute;
  opacity:0;
  visibility:hidden;
  top:50%;
  left:50%;
  width:100%;
  transform:translate(-50%,0) scale(1,1.5);
  transition:all .5s ease-in-out;
  max-height: 96px;
max-width: calc(100% - 32px)
}
.stage03 .slogan {
  opacity:1;
  visibility:visible;
  transition:all .5s ease-in-out .5s;
  transform:translate(-50%,-50%) scale(1,1)
}
.slogan:before {
  background-image:url(slogan-backup.svg);
  background-position:center;
}
.dh-partners ul.dh-partner-logos li:nth-of-type(2n) {
  transition-delay:.25s
}
.dh-partners ul.dh-partner-logos li:nth-of-type(3n) {
  transition-delay:.5s
}
.dh-info {
  position: absolute;
  top:220px;
  left:50%;
  width:calc(100% - 48px);
  height: 200px;
  transform: translate(-50%,0)
}
.info01:before {
  background-image:url(info01.svg?v=2);
  background-position: top;

} 
.info02:before {
  background-image:url(info02.svg?v=2);
    background-position: top;

} 

.info03:before {
  background-image:url(info03.svg?v=2)
} 
.dh-info  i {
  opacity: 0;
  visibility: hidden;
  transition:all .5s ease-in-out .25s;
  transform: translate(0,10%)
}
.stage01 .dh-info .info01,
.stage02 .dh-info .info02,
.stage03 .dh-info .info03 {
  opacity: 1;
  visibility: visible;
    transform: translate(0,0)
}
.age {
  color:#fff;
  display: block;
  z-index: 50;
  position: absolute;
  right:7px;
bottom:7px;
font-size:10px;
  font-family: sans-serif;
  font-weight: 500;
padding: 3px 6px;
border:1px solid #fff;
border-radius: 6px 0 6px 0;
}
