body{
  margin: 0px;
  --bg : #121125;
  --menu : #00000061;
  --best : #ffee00;
  --flower : #00ff00;
  --super : #04a6ff;
  --vip : #be2242;
  --color: #ff0000;
  --color-text: #fff;
  height: 100%;
  width: 100%;
  background: var(--bg);
  left: 0px;
  top: 0px;
  background-size: 100% 100%;
  background-attachment: fixed;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}
.outer,
.inner {
  fill: none;
  stroke: var(--color);
  stroke-width: 8;
}

.outer{
  opacity: .4;
}

.inner {
  stroke-dasharray: 70 2000;
}
#preloader{
  position: fixed;
  left: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 1;
}
#preloader svg{width: auto !important; height: auto !important;position: absolute; left: 50%; transform: translate(-50%,-50%) scale(0.7); top: 50%;}
#app-v-page{
  height: 100%;
  width: 100%;
  padding: 20px;
  padding-bottom: 60px;
  padding-top: 140px;
}
#app-v-page .v-page-m{
  background: var(--menu);
  position: fixed !important;
  top: 50px;
  height: 80px;
  padding: 0px 20px;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px !important;
  border-radius: 20px;
}
#app-v-page .v-page-m .social{
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-v-page .v-page-m .buttons{
  display: flex;
}
#app-v-page .v-page-m h4{
  margin-right: 20px !important;
}
#app-v-page .v-page-m .buttons a{
  display: flex;
  align-items: center;
  color: #fff;
  text-align: center;
  font-size: 10px;
  text-decoration: none;
  flex-direction: column;
  cursor: pointer;
  font-size: 9px;
  padding: 16px 13px;
  font-weight: bold;
}
#app-v-page .v-page-m .buttons a:hover{
  background: #00000017;
}
#app-v-page .v-page-m .buttons a svg{
  width: 30px;
  margin-bottom: 5px;
  height: 30px;
}
#app-v-page .social-buttons{
  display: flex;
  margin: 0 -10px;
}
#app-v-page .social-buttons .button{
  display: flex;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  margin: 10px;
  transition: all ease-in 0.2s;
}
#app-v-page .social-buttons .button:hover{
  transform: scale(1.1);
}
#app-v-page .social-buttons .button.twitch {
  background: linear-gradient(-45deg, #6034b2, #6600ff, #6034b2, #6600ff);
  background-size: 1000% 1000%;
  animation: gradient 3s ease infinite;
}
#app-v-page .social-buttons .button.youtube {
  background: linear-gradient(-45deg, #ff0000, #db0000, #ff0000, #db0000);
  background-size: 1000% 1000%;
  animation: gradient 3s ease infinite;
}
#app-v-page .social-buttons .button.kick {
  background: linear-gradient(-45deg, #53FC18, #38d900, #53FC18, #38d900);
  background-size: 1000% 1000%;
  animation: gradient 3s ease infinite;
}
#app-v-page .social-buttons .button svg{
  margin-right: 10px;
}
#app-v-page .social-buttons .button path,
#app-v-page .social-buttons .button d,
#app-v-page .social-buttons .button svg{
  fill: #fff;
}

#app-v-page .clients {
  display: flex;
  flex-direction: column;
}
.row{
  display: flex;
  flex-wrap: wrap;
  margin: 0px -10px;
}
.col{
  padding: 0 10px;
}
.row.banner1 .col { width: 100%;}
.row.banner2 .col { width: 50%;}
.row.banner3 .col { width: 33.3333%;}
.row.banner4 .col { width: 25%;}
.row.banner5 .col { width: 20%;}
.row.banner6 .col { width: 16.6666%;}

#app-v-page .clients .cat1705880278930 .banner{
  border: 1px solid var(--flower);
}
#app-v-page .clients .cat1705880193110 .banner{
  border: 1px solid var(--best);
}
#app-v-page .clients .cat1705880238922 .banner{
  border: 1px solid var(--super);
}
#app-v-page .clients .cat1705880318362 .banner{
  border: 1px solid var(--vip);
}
#app-v-page .clients .cat1705880278930 .banner svg{
  width: 60px;
  height: 60px;
  animation: bestAnimate 3s infinite alternate forwards;
}
#app-v-page .clients .cat1705880193110 .banner svg{
  width: 60px;
  height: 60px;
  animation: bestAnimate 3s infinite alternate forwards;
}
#app-v-page .clients .cat1705880238922 .banner svg{
  width: 40px;
  height: 40px;
  position: relative;
  animation: superAnimate 0.5s infinite alternate forwards;
}
#app-v-page .clients .banner img{
  width: 170px !important;
  height: 50px !important;
  object-fit: contain;
}
#app-v-page .clients .cat1705880318362 .banner svg{
  width: 40px;
  height: 40px;
  position: relative;
  animation: vipAnimate 0.5s infinite alternate forwards;
}
#app-v-page .clients .banner{
  background: #00000061;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  height: 100px;
  border-radius: 10px;
  margin: 5px 0px;
  transition: all ease-in 0.2s;
  border: 1px solid #ffffff1f;
}
#app-v-page .clients .banner:hover{
  transform: scale(1.05);
}
#app-v-page .clients .banner1{
  background: #040404a3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: 90px;
  border-radius: 10px;
  margin: 5px 0px;
  transition: all ease-in 0.2s;
  border: 1px solid #ffffff1f;
}
#app-v-page .clients .banner:hover1{
  transform: scale(1.05);
}
svg{
  width: 24px;
  height: 24px;
}
*{
box-sizing: border-box;
}
#app-v-page .container {
width: 1100px;
margin: 0 auto;
}

@keyframes gradient {
  0% {
      background-position: 0 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0 50%;
  }
}
@keyframes superAnimate {
  from {
      margin-top: 5px;
  }

  to {
      margin-top: -5px;
  }
}
@keyframes vipAnimate {
  from {
      transform: scale(1);
  }

  to {
      transform: scale(1.1);
  }
}

@keyframes bestAnimate {
  O% {
  transform: scale(1) rotateY(0deg);
  }
  50%,75% {
  transform: scale(1.1) rotateY(360deg);
  }
  75%,100%{
  transform: scale(1.1) rotateY(360deg);
  }
}

@media (max-width:1310px) {
#app-v-page .fix-side{
  display: none !important;
}
}
@media(max-width:1500px) and (min-width:996px){
    #app-v-page .container{
        width: 800px !important;
    }
    #app-v-page .clients .banner img{
        width: 120px !important;
        margin: 0 20px !important;
    }
    #app-v-page .clients .banner {
    padding: 10px 5px !important;
    }
	    #app-v-page .clients .banner1 img{
        width: 120px !important;
        margin: 0 10px !important;
    }
    #app-v-page .clients .banner1 {
    padding: 0 10px !important;
    }
	 #app-v-page .clients .banner1 {
    padding: 0 20px !important;
    }
}


@media (max-height: 900px){
}
@media (max-height: 800px){
#app-v-page .fix-side .logo img{
  margin-top: 135px !important;
  margin-bottom: 35px !important;
  width: 250px !important;
}
}
@media (max-height: 700px){
#app-v-page .fix-side .logo img{

  margin-bottom: 35px !important;
  width: 180px !important;
}
}
#app-v-page .clients .row.normal,
#app-v-page .clients .row.cat1705880318362, 
#app-v-page .clients .row.cat1705880238922 {
  flex-flow: row wrap;
}

#app-v-page .footer-c {
  margin-top: 20px;
  display: flex;
  padding: 0 10px;
  width: 100%;
  justify-content: space-between;
}
#app-v-page .footer-c .licence {
  color: aliceblue;
  display: flex;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}
#app-v-page .footer-c .licence img {
  margin-left: 10px;
  width: inherit !important;
  height: 40px;
  margin-top: -5px;
}
#app-v-page .footer-c .cpyrght {
  display: flex;
  font-size: 11px;
  opacity: 0.85;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
#app-v-page .footer-c .cpyrght img {
  margin-left: 10px;
  width: inherit !important;
  height: 30px;
}

#app-v-page .fix-side {
  position: fixed;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.60);
  top: 53%;
  transform: translateY(-50%);
  height: 90%;
  background: #00000061;
  border: 1px solid #ffc100;
  width: 180px;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  text-decoration: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app-v-page .fix-side.left {
  left: 20px;
}
#app-v-page .fix-side.right {
  right: 20px;
}
#app-v-page .fix-side .logo {
  height: 340px;
}
#app-v-page .fix-side .logo img {
  margin-top: 130px;
  height: 70px;
  width: 330px;
  width: 300px;
  object-fit: contain;
  transform: rotate(-90deg);
}
#app-v-page .fix-side svg {
  width: 75px;
  height: 75px;
  animation: bestAnimate 3s infinite alternate forwards;
}
#app-v-page .fix-side .slogan {
  margin: 20px 0;
  color: #fff;
  text-align: center;
}
#app-v-page .fix-side .slogan h1 {
  color: #ffc100;
  font-weight: 700;
  margin: 0px;
  font-size: 18px;
}
#app-v-page .fix-side .slogan p {
  margin: 0px;
  font-size: 20px;
}
#app-v-page .fix-side .down {
  height: 40px;
}
#app-v-page .fix-side .button {
  width: 100%;
  text-align: center;
  margin: 10px 0;
  background: #ffc100;
  border-radius: 30px;
  padding: 10px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: var(--color-text);
  animation: boxShadow 1s infinite alternate forwards;
}
@keyframes boxShadow {
  from{
  box-shadow: 0px 0px 0 var(--fixed-color);
  }
  to{
  box-shadow: 0px 0px 30px var(--fixed-color);
  }
}


@media (max-width:996px) {

#app-v-page .v-page-m.container {
    flex-direction: column !important;
    left: 0px !important;
    height: auto !important;
    border-radius: 0px !important;
    margin: 0px !important;
}
#app-v-page .container{
    width: 100% !important;
}
#app-v-page .v-page-m .buttons a svg{
    width: 20px !important;
    height: 20px !important; 
}
#app-v-page .v-page-m .buttons a{
    padding: 10px 5px !important;
}
.swiper-slide{
    border-radius: 20px !important;
}
#app-v-page .social-buttons .button{
    font-size: 10px !important;
}
#app-v-page .clients .banner img{
    width: 110px !important;
}
#app-v-page .clients .banner{
  flex-direction: column;
}
#app-v-page .footer-c a {
    margin-top: 10px;
}
#app-v-page .footer-c {
    flex-direction: column;
}
#app-v-page .clients .banner{
  padding: 0 10px !important;
  height: auto !important;
}


.row.banner2 .banner {
  flex-direction: row !important;
}

.row.banner2 .banner svg {
  width: 16px !important;
  height: 16px !important;
}
.row.banner1 .banner{
  flex-direction: row !important;
} 
.row.banner1 .banner svg{
  width: 40px !important;
  height: 40px !important;
  margin: 10px 10px !important;
} 
#app-v-page .clients .row.banner5 .col,
#app-v-page .clients .row.banner4 .col,
#app-v-page .clients .row.banner3 .col{
  width: 33.333% !important;
}
#app-v-page .clients .row.banner5 img,
#app-v-page .clients .row.banner4 img,
#app-v-page .clients .row.banner3 img,
#app-v-page .clients .row.banner2 img{
  width: 85px !important;
}
#app-v-page .clients .banner .site {
    display: flex;
    align-items: center;
    justify-content: center;
}
}




@media (max-width:996px) {

#app-v-page .clients .row.cat1705880318362 .banner img,
#app-v-page .clients .row.normal .banner img{
    width: 80px !important;
    height: 40px !important;
}
#app-v-page .clients .row.cat1705880238922 .banner svg {
    top: 10px;
}
#app-v-page .clients .row.cat1705880238922 .banner svg:last-child,
#app-v-page .clients .row.cat1705880318362 .banner svg:last-child {
    display: none;
}

#app-v-page .clients .row.cat1705880238922 .banner svg,
#app-v-page .clients .row.cat1705880318362 .banner svg {
    margin-top: 5px;
}
}



      .bottom-fixed{
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.60);
        width: 800px;
        height: 90px;
        z-index: 9;
        background: rgba(0, 0, 0, 0.849);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        position: fixed;
        bottom: 0px;
        left: 50%;
        padding: 0px 40px;
        border: 1px solid #ccc;
        border-bottom: 0px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .bottom-fixed .button{
        position: fixed;
        right: 10px;
        cursor: pointer;
        top: 10px;
      }
      .bottom-fixed .center{
        text-align: center;
        font-size: 12px;
      }
      .bottom-fixed .center h1{
        font-size: 20px;
        margin: 0px;
      }
      .bottom-fixed .center p{
        font-size: 14px;
        margin: 5px;
        text-transform: uppercase;
        font-weight: 900;
      }
      .bottom-fixed a{
        padding: 12px 7px;
        width: 120px;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        border-radius: 30px;
        font-size: 10px;
      }
      .bottom-fixed .button svg{
        width: 30px;
        height: 30px;
        stroke: #fff;
      }

      @media (max-width:996px) {
        .bottom-fixed{
          width: 100% !important;
        }
        .bottom-fixed h1{
          font-size: 12px !important;
        }
        .bottom-fixed p{
          font-size: 12px !important;
        }
        .bottom-fixed img{
          width: 80px !important;
        }
          .slider {
  overflow: hidden;
  width: 100%;
  height: auto;
  border-radius:10px;
              padding-top: 40px;

}

.slides {
  display: flex;
}

.slides img {
  width: 100%;

  transition: transform 0.5s ease;
}
.slides a {
  width: 100%;

  transition: transform 0.5s ease;
}
/* Slider Animation */
.slide-next {
  transform: translateX(-100%);
}

.slide-prev {
  transform: translateX(100%);
}
      }

.slider {
  overflow: hidden;
  width: 100%;
  height: auto;
  border-radius:10px;

}

.slides {
  display: flex;
}

.slides img {
  width: 100%;

  transition: transform 0.5s ease;
}
.slides a {
  width: 100%;

  transition: transform 0.5s ease;
}
/* Slider Animation */
.slide-next {
  transform: translateX(-100%);
}

.slide-prev {
  transform: translateX(100%);
}