* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:focus {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
/* zen-kurenaido-regular - latin_cyrillic */
@font-face {
  font-family: "Zen Kurenaido";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/zen-kurenaido-v5-latin_cyrillic-regular.svg#ZenKurenaido") format("svg");
  /* Legacy iOS */
}
/* manrope-200 - latin_cyrillic */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/manrope-v8-latin_cyrillic-200.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/manrope-v8-latin_cyrillic-200.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/manrope-v8-latin_cyrillic-200.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-200.woff") format("woff"), /* Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-200.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/manrope-v8-latin_cyrillic-200.svg#Manrope") format("svg");
  /* Legacy iOS */
}
/* manrope-300 - latin_cyrillic */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/manrope-v8-latin_cyrillic-300.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/manrope-v8-latin_cyrillic-300.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/manrope-v8-latin_cyrillic-300.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-300.woff") format("woff"), /* Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-300.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/manrope-v8-latin_cyrillic-300.svg#Manrope") format("svg");
  /* Legacy iOS */
}
/* manrope-regular - latin_cyrillic */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/manrope-v8-latin_cyrillic-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/manrope-v8-latin_cyrillic-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/manrope-v8-latin_cyrillic-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/manrope-v8-latin_cyrillic-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/manrope-v8-latin_cyrillic-regular.svg#Manrope") format("svg");
  /* Legacy iOS */
}
/* dotgothic16-regular - latin_cyrillic */
@font-face {
  font-family: 'DotGothic16';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dotgothic16-v10-latin_cyrillic-regular.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/dotgothic16-v10-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/dotgothic16-v10-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/dotgothic16-v10-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/dotgothic16-v10-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/dotgothic16-v10-latin_cyrillic-regular.svg#DotGothic16') format('svg');
  /* Legacy iOS */
}
/* press-start-2p-regular - latin_cyrillic */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/press-start-2p-v9-latin_cyrillic-regular.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/press-start-2p-v9-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/press-start-2p-v9-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/press-start-2p-v9-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/press-start-2p-v9-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/press-start-2p-v9-latin_cyrillic-regular.svg#PressStart2P') format('svg');
  /* Legacy iOS */
}
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'DotGothic16', sans-serif;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  background-color: black;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  /* cursor: default; */
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button;
  /* for input */
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
body::-webkit-scrollbar {
  width: 0 !important;
}
button,
select,
input,
textarea {
  font-family: 'DotGothic16', sans-serif;
  font-family: 'Oswald', sans-serif;
}
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/
a {
  text-decoration: none;
  color: inherit;
}
.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  background-color: #9c9c89;
  background-image: url("../image/back3.png"), url("../image/muka.png");
  background-position: top, center;
  background-size: contain, 120%;
  background-repeat: no-repeat;
}
.main.hovered {
  background: black;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.top-menu.hovered {
  display: none;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 15px;
}
.menu-btn,
.burger-nav {
  display: none;
}
.top-menu {
  display: block;
  opacity: 1;
  height: 80px;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;
}
.top-menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  list-style-type: none;
  margin: 0;
  padding: 20px;
  /* position: relative; */
}
.top-menu li {
  font-size: 30px;
  cursor: pointer;
  -webkit-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}
.top-menu li:hover {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
  color: white;
}
.logo img {
  width: 60px;
  margin-right: 10px;
  -webkit-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}
.logo img:hover {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}


.sobaka {
  height: 500px;
  width: 1000px;
  margin: 0 auto;
  padding: 0px 15px;
  position: fixed;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  background: url(../image/transdog.svg);
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  right: 0;
  -webkit-filter: drop-shadow(3px 15px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(3px 15px 2px rgba(0, 0, 0, 0.4));
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


.sobaka-white {
  background: url(../image/transdogwhite.svg);
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-6%);
  -ms-transform: translateY(-6%);
  transform: translateY(-6%);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/* .sobaka-img {   
    height: 100%;
    width: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.6s;
    transition-delay: 0.3s;
    filter: drop-shadow(3px 15px 2px rgb(0 0 0 / 0.4));   
} */
.btn {
  background-color: red;
}
.klesh {
  display: block;
  position: absolute;
  top: 22%;
  left: 27%;
  width: 50px;
}
.klesh-text {
  top: 9%;
  left: 20%;
  opacity: 0;
  display: block;
  position: absolute;
  color: rgb(0, 0, 0);
  background-color: #fff700;
  border-radius: 10px;
  padding: 20px;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}
.klesh-text:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 23px solid transparent;
  border-top-color: #fff700;
  border-bottom: 0;
  border-right: 0;
  margin-left: -11.5px;
  margin-bottom: -23px;
}
.klesh-text-hover-1 {
  opacity: 1;
}
.generator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  opacity: 0;
  position: absolute;
  height: calc(100% - 80%);
  width: calc(100% - 72%);
  top: calc(100% - 72%);
  left: calc(100% - 62%);
}
.generator p {
  display: block;
  font-size: 26px;
  text-align: center;
  font-style: normal;
  /*  -webkit-transition: ease-in-out 0.3s;
    -o-transition: ease-in-out 0.3s;
    transition: ease-in-out 0.3s; */
}
.generator input {
  color: white;
  background-color: #fd2626;
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
  border-style: none;
  font-size: 18px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.generator input:active {
  padding: 5%;
}
.sobaka-mobile,
.generator-mobile,
.klesh-mobile {
  display: none;
}
.sobaka-mobile {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  padding: 0px 15px;
  position: fixed;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.sobaka-mobile p {
  display: block;
  font-size: 26px;
  text-align: center;
  font-style: normal;
  position: absolute;
  bottom: 75%;
  opacity: 1;
  transform: scale(1);
  color: white;
}
.sobaka-mobile-background {
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  background: url(../image/transdog.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-filter: drop-shadow(3px 15px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(3px 15px 2px rgba(0, 0, 0, 0.4));
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  /* transition-delay: 0.3s; */
}
.sobaka-mobile-background.clicked {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
  background: url(../image/transdogwhite.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.klesh-mobile {
  position: absolute;
  top: 20%;
  left: 27%;
  width: 30px;
}
.generator-mobile {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  opacity: 1;
  height: auto;
  width: 100%;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin-bottom: 20%;
  position: relative;
}
.generator-mobile input {
  opacity: 0;
  height: 80px;
  color: white;
  background-color: #fd2626;
  padding: 10px;
  border-radius: 10px;
  border-style: none;
  font-size: 18px;
  cursor: pointer;
}
.generator-mobile input:active {
  /*  background: #fd2626; */
  color: grey;
}
.sidebar {
  padding: 0;
  width: 100px;
  background-color: black;
  position: fixed;
  height: 100vh;
  overflow-y: scroll;
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.sidebar::-webkit-scrollbar {
  width: 10px;
  /* height: 1em; */
}
.sidebar::-webkit-scrollbar-track {
  background: #302f2f;
  border-radius: 50px;
  margin-block: 0.5em;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border: 3px solid #302f2f;
  border-radius: 50px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #757575;
  cursor: pointer;
}
.sidebar a {
  /* ховер в адаптиве */
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 600;
  display: block;
  color: white;
  padding: 12px;
  margin-right: 5px;
  text-decoration: none;
  text-align: center;
  -webkit-transition: ease-in-out 0.4s;
  -o-transition: ease-in-out 0.4s;
  transition: ease-in-out 0.4s;
}
.active {
  background-color: #ffffff;
  border-radius: 15px;
  color: black !important;
}
.content-frazes {
  overflow-y: hidden;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: black;
}
.frazes-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  margin-top: 75px;
}
.frazes {
  height: auto;
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* padding: 1px 16px; */
  /* background-color: #000000; */
  color: white;
  /* span{
 /*  -webkit-box-shadow: -1px 1px 8px 38px rgb(191 187 252 / 10%);
  box-shadow: -1px 1px 8px 38px rgb(191 187 252 / 10%); */
  position: relative;
}
.frazes:first-child {
  margin-top: 0;
}
.frazes h2 {
  font-size: 70px;
}
.frazes p {
  font-family: 'DotGothic16', sans-serif;
  font-size: 28px;
  padding: 2% 5%;
  letter-spacing: -5px;
  /* transition: .3s; */
  z-index: 3;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #5271ff, 0 0 0.5em #52ff7d, 0 0 0.1em #5271ff, 0 10px 3px #000;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.frazes-null {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  height: 300px;
  max-width: 800px;
  width: 100%;
  margin-top: 75px;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 10px;
}
.frazes-null div {
  width: 2766px;
  background: url(../image/sobakabit2.png);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.frazes-null p {
  text-align: center;
  text-transform: capitalize;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 0;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  /* font-family: 'VT323', monospace; */
  font-family: 'Press Start 2P', cursive;
  font-size: 18px;
  text-shadow: none;
  margin-bottom: 10px;
}
.certlastdig {
  opacity: 0;
  display: inline-block;
  -webkit-animation: blink-dig 0.5s linear infinite alternate;
  animation: blink-dig 0.5s linear infinite alternate;
}
@keyframes blink-dig {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* .fr-null-scroll {
  height: 150px;
  position: fixed;
  z-index: 20;
  margin: auto;
  top: 100px;
  transition: 0.3s;
} */
.mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
/* .mov-1-scroll {
  height: 100px !important;
  background-size: 200px !important;
} */
@keyframes moveSlideshow {
  100% {
    transform: translateX(-66.6666%);
  }
}
.viveska {
  text-align: center;
  width: 65%;
  height: auto;
  z-index: 13;
  position: fixed;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: black;
  -webkit-box-shadow: 0px 0px 10px 10px #000000;
  box-shadow: 0px 0px 10px 10px #000000;
}
.viveska h1 {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-size: 50px;
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #5271ff, 0 0 0.5em #5271ff, 0 0 0.1em #5271ff, 0 10px 3px #000;
  /* span{
        animation: blink linear infinite 2s;
        &:first-child{
          animation: blink linear infinite 3s;
        }
      } */
}
.viveska h2 {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fee;
  text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #ff0000, 0 0 0.5em #ff005e, 0 0 0.1em #ff005e, 0 10px 3px #000;
  width: 80%;
  text-align: right;
}
.an-1st-let {
  -webkit-animation: blink linear infinite 3s;
  animation: blink linear infinite 3s;
}
.an-let {
  -webkit-animation: blink linear infinite 2s;
  animation: blink linear infinite 2s;
}
.anim-off {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.kl-anim-h3 {
  position: absolute;
  left: -32px;
  bottom: -100px;
  color: #00ff00;
  text-align: center;
  font-family: "Zen Kurenaido", sans-serif;
}
.kl-anim-btn {
  position: fixed;
  bottom: 20%;
  right: 10%;
}
.kl-anim-btn-border {
  float: left;
  background-color: black;
  width: 48px;
  height: 58px;
  position: absolute;
  border-radius: 3px;
  margin: 5px 3px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 3px 2px rgba(44, 44, 44, 0.4);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 3px 2px rgba(44, 44, 44, 0.4);
}
.kl-anim-btn-border-gradient {
  background: -webkit-gradient(linear, 0% 90%, 0% 53%, from(#26292b), to(#0e0b0a));
  width: 42px;
  height: 52px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-top: 1px solid #3d3b3a;
  border-right: 1px solid #1b1d1e;
  border-left: 1px solid #1b1d1e;
  border-bottom: 1px solid #1b1d1e;
  border-radius: 2px;
}
.kl-anim-btn-rim {
  background: red;
  width: 28px;
  height: 28px;
  position: absolute;
  left: 6.25px;
  top: 10px;
  border-radius: 15px;
  border: 1px solid red;
  -webkit-box-shadow: 0px 0px 10px rgba(250, 0, 0, 0.9), inset 0px 0px 10px #fac8c8;
  box-shadow: 0px 0px 10px rgba(250, 0, 0, 0.9), inset 0px 0px 10px #fac8c8;
}
.kl-anim-btn.anim-on .kl-anim-btn-rim {
  background: -webkit-gradient(linear, 0% 0%, 0% 87%, from(#a80000), to(#400000), color-stop(0.6, #6a0101));
  width: 30px;
  height: 30px;
  position: absolute;
  left: 6.25px;
  top: 10px;
  border: red;
  border-radius: 15px;
  -webkit-box-shadow: 0px 4px 2px #000000, 0px 3px 4px rgba(44, 44, 44, 0.7);
  box-shadow: 0px 4px 2px #000000, 0px 3px 4px rgba(44, 44, 44, 0.7);
  opacity: 0.7;
}
.kl-anim-btn-fill {
  background: -webkit-gradient(radial, 15 20, 5, 14 30, 30, from(#870000), to(#ea0000));
  width: 26px;
  height: 26px;
  position: absolute;
  border-radius: 13px;
  left: 1px;
  top: 1px;
  -webkit-box-shadow: 0px 0px 10px rgba(250, 0, 0, 0.9), inset 0px 0px 10px #f73f3f;
  box-shadow: 0px 0px 10px rgba(250, 0, 0, 0.9), inset 0px 0px 10px #f73f3f;
  -webkit-transition: opacity ease-in 0.2s;
  -o-transition: opacity ease-in 0.2s;
  transition: opacity ease-in 0.2s;
}
.kl-anim-btn.anim-on .kl-anim-btn-fill {
  background: -webkit-gradient(radial, 15 20, 5, 14 30, 30, from(#ea0000), to(#870000));
  width: 26px;
  height: 26px;
  position: absolute;
  border-radius: 13px;
  left: 2.25px;
  top: 2px;
  -webkit-box-shadow: 0px 1px 1px #850000;
  box-shadow: 0px 1px 1px #850000;
  opacity: 1;
}
@-webkit-keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #333;
  }
  80% {
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #333;
  }
  80% {
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
.grain:not(.anim-off):after {
  content: "";
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  opacity: 0.11;
  background: url("../image/grain.jpg") repeat center center;
  -webkit-animation: grain 0.5s steps(1) infinite;
  animation: grain 0.5s steps(1) infinite;
}
.grain.anim-off {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes grain {
  0%,
  100% {
    -webkit-transform: translate(0, 0, 0);
    transform: translate(0, 0, 0);
  }
  10% {
    -webkit-transform: translate(-1%, -1%);
    transform: translate(-1%, -1%);
  }
  20% {
    -webkit-transform: translate(1%, 1%);
    transform: translate(1%, 1%);
  }
  30% {
    -webkit-transform: translate(-2%, -2%);
    transform: translate(-2%, -2%);
  }
  40% {
    -webkit-transform: translate(3%, 3%);
    transform: translate(3%, 3%);
  }
  50% {
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
  }
  60% {
    -webkit-transform: translate(4%, 4%);
    transform: translate(4%, 4%);
  }
  70% {
    -webkit-transform: translate(-4%, -4%);
    transform: translate(-4%, -4%);
  }
  80% {
    -webkit-transform: translate(2%, 2%);
    transform: translate(2%, 2%);
  }
  90% {
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
  }
}
@keyframes grain {
  0%,
  100% {
    -webkit-transform: translate(0, 0, 0);
    transform: translate(0, 0, 0);
  }
  10% {
    -webkit-transform: translate(-1%, -1%);
    transform: translate(-1%, -1%);
  }
  20% {
    -webkit-transform: translate(1%, 1%);
    transform: translate(1%, 1%);
  }
  30% {
    -webkit-transform: translate(-2%, -2%);
    transform: translate(-2%, -2%);
  }
  40% {
    -webkit-transform: translate(3%, 3%);
    transform: translate(3%, 3%);
  }
  50% {
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
  }
  60% {
    -webkit-transform: translate(4%, 4%);
    transform: translate(4%, 4%);
  }
  70% {
    -webkit-transform: translate(-4%, -4%);
    transform: translate(-4%, -4%);
  }
  80% {
    -webkit-transform: translate(2%, 2%);
    transform: translate(2%, 2%);
  }
  90% {
    -webkit-transform: translate(-3%, -3%);
    transform: translate(-3%, -3%);
  }
}
/* .menu-btn-frazi {
  display: block;
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
}

  .lines-frazi,
  .lines-frazi:after,
  .lines-frazi:before {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 2px;
    background-color: white;
  }

  .lines-frazi:after,
  .lines-frazi:before {
    content: "";
    display: block;
    transition: 0.2s;
  }

  .lines-frazi {
    &:after {
      transform: translateY(5px);
    }
    &:before {
      transform: translateY(-5px);
    }
  }

  .lines-active-frazi {
    height: 0;
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
 */
.video-preview-mobile {
  display: none;
}
.top-menu-inside {
  background-color: black;
}
.container-video,
.container-video-sector {
  background: #000000;
  height: 100%;
  width: 100vw;
  /*  overflow-y: scroll;
  scroll-behavior: smooth; */
  /* scroll-snap-type: y mandatory; */
}
.video-sidebar {
  position: fixed;
  right: 2%;
  bottom: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.video-sidebar a {
  display: block;
  padding: 0 12px;
  color: white;
  text-decoration: none;
  margin: 20px;
  font-size: 20px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.video-sidebar a:hover {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}
.video-a-active {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}
.video-preview {
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 80vh;
  width: 80vw;
  margin: 120px auto;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  /* scroll-snap-align: end; */
}
.videoid {
  position: absolute;
  top: 6%;
}
.background-video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
}
.video-description {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  width: 50%;
  height: 100%;
  z-index: 2;
  border-radius: 10px 0 0 10px;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(75%, #0c0c0c), color-stop(rgba(12, 12, 12, 0.5)), to(rgba(31, 31, 31, 0)));
  background-image: -o-linear-gradient(left, #0c0c0c 75%, rgba(12, 12, 12, 0.5), rgba(31, 31, 31, 0));
  background-image: linear-gradient(90deg, #0c0c0c 75%, rgba(12, 12, 12, 0.5), rgba(31, 31, 31, 0));
}
.video-description h2,
.video-description p,
.video-description div {
  color: white;
  margin-left: 10%;
  font-family: "Manrope", sans-serif;
}
.video-description h2 {
  margin-bottom: 2%;
  font-size: 30px;
  font-weight: bold;
  color: black;
  background-color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}
.video-description p {
  margin-top: 2%;
  margin-bottom: 50px;
  font-size: 16px;
  width: 60%;
  line-height: 30px;
}
.vid-desc-div {
  width: 130px;
}
.vid-desc-div:hover .play {
  width: 70px;
  /* margin-left: 70px; */
}
.vid-desc-div:hover span {
  opacity: 0;
  -webkit-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
}
.vid-desc-div:hover .play:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
.play {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fd8f3b;
  color: white;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10%;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  width: 130px;
  overflow: hidden;
}
.play:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 20px;
  border-color: transparent transparent transparent white;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.play span {
  opacity: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
/* .container-video-sector {
  background: url('https://cdn.pixabay.com/photo/2017/09/12/11/56/universe-2742113_960_720.jpg');
  background-size: contain;
  background-repeat: no-repeat;

} */
.sector-description h2 {
  font-size: 25px;
}
.top-menu-music {
  height: auto;
  background: #00000061;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.container-music {
  height: 100%;
  width: 100vw;
}
.iframe-container {
  width: 70vw;
  margin: 120px auto;
  z-index: 1;
}
.background-video-music {
  position: fixed;
  border-radius: 0;
}
.backvideoplay {
  position: fixed;
  bottom: 20px;
  color: white;
  width: 100px;
  z-index: 10;
  background-color: rebeccapurple;
}
.page404 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.page404 h1 {
  font-size: 60px;
  color: #e489ef;
  font-weight: 200;
}
.chats {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  flex-direction: row;
  position: fixed;
  z-index: 10;
  background: white;
  /* width: 90px; */
  height: 42px;
  border-radius: 50px;
  bottom: 10px;
  right: 10px;
  transition: 0.3s;
}
.chats a {
  margin: 6px;
}
.chats img {
  width: 30px;
}
/* .chats-moveleft {
  justify-content: start;
  width: 42px;
  transform: translateX(-45px);
}

.chat-1, .chat-2 {
  display: block;
  transition: .3s;
} */
.chat-item-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.chat-item-burger a {
  margin: 0 20px;
}
.chat-item-burger img {
  width: 30px;
}

.devlink {
position: fixed;
font-size: 10px;
color: red;
bottom: 5px;
left: 5px;
}