@charset "utf-8";

.countup,
.hash,
.sep {
    letter-spacing: .1em
}

body {
    opacity: 1;
    -webkit-transition: .7s opacity;
    -o-transition: .7s opacity;
    transition: .7s opacity
}

body.fade {
    opacity: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

#pbd100x250,
.slgn,
.wrap1280 {
    margin: 0 auto
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box
}

body {
    font-family: Montserrat, sans-serif;
    font-weight:700;
    text-transform: uppercase;
}

.wrapper {
    width: 100%;
    position: relative;
    height: 120px;
    overflow: hidden;
    margin: 0 auto; 
    
    -webkit-perspective:1200px;
            perspective:1200px;
    background:  url(https://tvm.m24.ru/2023/i/shtuka1.gif);
}
.wrapper:before {
    content:'';
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:200%;
    background-image:url('https://www.m24.ru/special/tvm/2022/i/grid-pattern-stroke-dashed.svg');
    background-size:auto 50%;
    opacity: 1;
     -webkit-animation:6s SkewIt ease-in-out infinite;
             animation:6s SkewIt ease-in-out infinite;
    background-position:center;
    -webkit-transform-origin:left;
        -ms-transform-origin:left;
            transform-origin:left;
        background-color:rgba(0,0,0,0.5);
    animation:3.5s WGrid linear infinite }
@keyframes WGrid {
    0%,80% {top:0}
    100% {top:-120px};

}


@-webkit-keyframes SkewIt {
    0%,100% {-webkit-transform: rotateY(0deg);transform: rotateY(0deg)}
   50% {-webkit-transform:rotateY(-5deg);transform:rotateY(-5deg)}

 

}
@keyframes SkewIt {
    0%,100% {-webkit-transform: rotateY(0deg);transform: rotateY(0deg)}
   50% {-webkit-transform:rotateY(-5deg);transform:rotateY(-5deg)}

 

}

.wrapper .container {
    max-width: 980px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0)
}

.wrapper svg#squareLogo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: 10px;
    margin: -45px 0 0
}


ul#show {
    display: block;
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    top: 50%;
    left: 0;
    text-align: left;
    height: 100%;
    -webkit-perspective:120px;
            perspective:120px;
    -webkit-perspective-origin:0% 50%;
            perspective-origin:0% 50%
}

ul#show li {
    display: block;
    -webkit-transform: translate(-50%, -50%) scale(.1,1) rotateY(-45deg);
            transform: translate(-50%, -50%) scale(.1,1) rotateY(-45deg);
    font-size: calc(12px + 2vw);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0;
    line-height: 1.2em;
    padding: 0 106px 0 106px;
    width: auto;
    color: rgba(255, 255, 255, .85);
  -webkit-transform-origin:right;
      -ms-transform-origin:right;
          transform-origin:center;
    position:absolute;
    top:50%;
    left:50%;
    letter-spacing:-.75em;
    white-space: nowrap;
    text-align: center;
    background:#fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size:200% 200%;
    z-index: 90;
    background-position: 0 0;
    background-size: 100% auto;
    font-weight:900;
}

ul#show li.showing {
    opacity: 1;
        background-position: 50% 0;
   -webkit-transform: translate(-50%, -50%) scale(1,1);
       -ms-transform: translate(-50%, -50%) scale(1,1);
           transform: translate(-50%, -50%) scale(1,1);
    letter-spacing:0;

    transition: opacity .5s ease-in 0s, letter-spacing 1s ease-in-out .25s, transform .5s ease-in-out .5s, background-position 1s ease-in-out 1s;
 
}
a.hlink {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    display: block;
}
.nb {position: absolute;
color:#fff;
    bottom:2px;
    font-size:9px;
    text-align: center;
    z-index: 50;
    width:100%;
    font-weight:500;
    padding:0 106px;
}
.nowrap{white-space:nowrap}@media (max-width:520px){.wrapper svg#squareLogo{display:block;position:absolute;width:50px;height:50px;top:50%;left:10px;margin:-25px 0 0}ul#show li{padding:0 64px;white-space:nowrap;font-size:14px}.nb{padding:0}}
.yy svg path {
    fill: url(#tvmGradient5);
  }
  
  path.grad2022-1,
  path.grad2022-2 {
    -webkit-animation: 1.5s L2022 ease-in-out infinite;
            animation: 1.5s L2022 ease-in-out infinite;
  }
  @-webkit-keyframes L2022 {
    0%,
    50%,
    100% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
  }
  @keyframes L2022 {
    0%,
    50%,
    100% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
  }
  path.grad2022-2 {
    -webkit-animation-delay: 0.15s;
            animation-delay: 0.15s;
  }
.yy {position: absolute;right:-42px;top:50%;width:100px;height:auto;z-index:100;display: block;
background-color:#ff0;
    transform-origin:top;transform:rotate(90deg);
display: none;
}
.yy svg {display: block none;width:100%;position: absolute;top:0;left:0}