@import url('https://fonts.googleapis.com/css2?family=Comme:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');
:root { 

  --bg-1:  rgb(139, 69, 19); 
  --bg-2: rgb(128, 128, 0);  
  --bg-3: rgb(151, 103, 62);
  --bg-4:  rgb(204, 78, 92); 
  --overlet-color:linear-gradient(rgba(34, 34, 34, 0.95), rgba(34, 34, 34, 0.75));    

 --bright-color-1:#ffa500;
 --bright-color-2:#ff0000;
 --bright-color-3:#40e0d0;

 --bg-gradient-1: linear-gradient(0deg, rgba(3,166,64,0.999964951801033) 29%, rgba(22,235,65,0.9831582291119573) 79%);
 --bg-gradient-2:linear-gradient(0deg, rgba(22,235,65,0.9831582291119573) 29%,rgba(3,166,64,0.999964951801033) 79%);

 --warm-color: rgba(128, 0, 32, 0.669);
  --color-1:rgb(0, 0, 255);
  --color-2:rgb(0, 128, 0);
  --color-3: rgb(255, 255, 0);
  --white: #fff;
  --black: #180707;
  --white-section:#f8f5f1;
  --accent-color:var(--bright-color-1);
  --hover-tranzitipn: all .5s cubic-bezier(.3,1,.35,1) 0s;  
}

body{
   
    direction: ltr;
    font-family: 'Comme', sans-serif !important;
    font-size:  17px;
    margin: 0;
    padding: 0px;  
    color: var(--col-main-text);
   
}
        

h1,
h2,
h3,
h4,
h5,
p{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--hover-tranzitipn);
}
a:hover,a:focus{
    color: var(--accent-color);
}
img{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.btn-1 {
 
  padding:  12px 22px;
  display: block;
  width: fit-content; 
  text-align: center;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight:  900;
  color: white;
  transition: .5s cubic-bezier(.22,.61,.36,1);
  -webkit-box-shadow: 0px 0px 18px 10px rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 18px 10px rgba(0, 0, 0, 0.35);
  background-color: #b93a27;
}

.btn-1:hover,.btn-1:focus {
  -webkit-filter: drop-shadow(3px 3px 18px rgba(158, 31, 11, 0.703));
  filter: drop-shadow(3px 3px 18px rgba(158, 31, 11, 0.703));
  color:#ecd19a;
}





.btn-2 {
  padding: 12px  22px;
  display: block;
  width: fit-content;
  text-align: center;
  font-size: 18px;
  border: none;
  outline: none;
  color:#e1e4a8;
  background: #01a201f0;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 8px;
}

.btn-2:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #8c97cf, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity .3s ease-in-out;
 border-radius: 8px;
}

.btn-2:hover {
color: #fff;
}

.btn-2:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
background: #01a201f0;
  left: 0;
  top: 0;
  border-radius: 8px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

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



.btn-3{
  text-align: center;
  display: block;
  padding: 14px 26px;
  width: fit-content;
  text-transform: uppercase;
  outline: none;
  background-color:#B2AB2E;
  color: #111;
  border-radius: 8px;
  border:2px solid #037b11d6;
  -webkit-transition: all .5s cubic-bezier(.3,1,.35,1) 0s;
  transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
} 
.btn-3:hover{
  color:#e1e4a8;
  background: #464545;
  border: 2px solid #898a89d6;

}

.btn-4 {
  text-align: center;
  display: block;
  padding:  14px 29px;
  width: fit-content;
  color: #fff;
  text-transform: uppercase;
  background-color: #111;
  box-shadow: 0px 0px  18px 10px rgba(0, 0, 0, 0.35);
  background-image: linear-gradient(to bottom, #b93a27, #9e1e0b);
 -webkit-transition: all .5s cubic-bezier(.3,1,.35,1) 0s;
  transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
  border-radius: 0px;
  font-weight: 900;
  color: #f3aa55;
  border: 2px solid #b93a27;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);

  
  
}

.btn-4:hover,
.btn-4:focus {
  background-image: -webkit-linear-gradient(top, #b93a27, #9e1e0b);
color: #ffcb8d;
}


.btn-5 {
  padding: 12px 18px;
  border: none;  
  display: block;
  font-style: italic;
  width: fit-content;
  background: #0e1721;
  text-align: center;
  border-radius:  5px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid #fff; 
  transition:all .5s cubic-bezier(.3,1,.35,1) 0s;
  font-size:  17px; 
  overflow: hidden;
  cursor: pointer;
  outline: 2px solid #fff;
  box-shadow: rgba(229, 223, 143, 0.4) 0px 7px 29px 0px;
}

.btn-5:hover {
  color: #464545;
  background: #f3aa55;  
  outline: 2px solid #fff;
  

}
.contact-map{
   
    width: 100%;
    height:377px;
    display: flex; 
    overflow: hidden;  
    align-items: center;
    justify-content: center;
}
.contact-map iframe{
    height: 100%;
    width: 100%;  

}
.YpContent-privacy,.page-content{
    color:  rgba(255, 255, 255, 0.817);
}
.YpContent-privacy p{
  margin-bottom: 8px;
  text-indent: 2ch;
  font-size: 17px;
 
}
.YpContent-privacy{
     word-break: break-word;
}
.YpContent-privacy h1{
    font-weight: 900;
    text-align: center;
    margin-bottom:  26px;
}
.YpContent-privacy h2{
    font-weight: 700;
    text-align: center;
    margin-bottom:16px ;
}
.YpContent-privacy table,.YpContent-privacy a{
    word-break: break-word;
    color: inherit;
}
.YpContent-privacy ul li,
.YpContent-privacy ol li {
  margin-bottom: 4px;
}
.YpContent-privacy ul,
.YpContent-privacy ol {
  margin-bottom: 12px;
  padding-left:  18px;
  list-style: inside;
}
.grup-form{
    display: flex;
    flex-direction: column;
    gap:  18px;
    margin-top:  18px;
}
.contact-form-check{
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--white-section);
}
.pos{
    position: relative;
}
.YpkPage-img{
    max-height: 377px;
    object-fit: cover;
    border-radius: 5px;
    float: right;
    width: 36%;
    margin: 16px;
    margin-top: 0;
    margin-right: 0;
}
.YpkAbout-content{
    color: var(--white-section);
}
.flex-boxHJ{
    display: flex;
    flex-direction: column-reverse;
}
.gapTY{
    gap:  45px;
}

.YpWrapper-playing{
    height: 100vh;
    width: 100%;   
    margin-left: auto;
    margin-right: auto;
    border-radius:  8px;
    border: 0px solid var(--color-3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   
}
.YpWrapper-playing iframe{
    height: 100%;
    width: 100%;
    border-radius:  8px;
}
.wrapper-home523{
   position: relative;
    top: 0;
    left: 0;
    background-image:  url( mediamansion/dir-bg/bg-light-068fa22c208135.jpg);
    background-position: top center;
    background-repeat: no-repeat;   
    background-size: cover;
    padding: 40px 16px  40px;
    width: 100%;
    height: 100%;
}
.wrapper-home523::before{
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75));
}
.container-main{
    position: relative;   
    max-width: 1224px;
    margin: 0 auto;
    border-radius: 8px;
    background:  var(--bg-2);
    height: 100%;
}
.logo-wrapper{
    display: block;
    margin: 0 auto;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 29px;
    justify-content: center;
}
.logo-wrapper img{
    width: auto;
    height:  111px;
    object-fit: contain;
}
.logo-title{
    color: rgb(255,255,255);                 
    line-height: 80px;
    text-shadow: rgb(0,0,0) 3px 2px 5px;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 75px;
    border-color: rgb(0,0,0);
    transform-origin: 50% 50% 0;
    text-transform: uppercase;
}
.navbar{
    border-radius: 8px;
    border-bottom: 2px solid #ffffff3b;
    background: linear-gradient(0deg, rgba(3,166,64,0.999964951801033) 29%, rgba(22,235,65,0.9831582291119573) 79%);
}
.nav-link{
    color: var(--white);
    font-weight:700;
}
.YpSection{
    padding: 53px 0;
}
.YpSection_inter{
   padding-bottom: 53px;
}
.TzxBenefit{
    display: flex;
    flex-wrap: wrap;
    gap:  22px;
}
.TzxBenefit-item{
    flex-grow: 1;
    transition: var(--hover-tranzitipn);
    flex-basis: 338px;
    
}
.TzxBenefit-item:hover{
   transform: translateY(-5px);
}
.TzxBenefit-blok{
    position: relative;
    padding: 18px 18px 31px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    height: 100%;
    background-color:#18070791;
    color: var(--white-section);
    border-radius: 14px;
    border:2px solid var(--color-3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    clip-path: polygon(0% 0%, calc(100% -  0px) 0%, 100%  0px, 100% 100%, 0 100%, 0% calc( 0px));   

}
.centet-content{
    justify-content: center;
}
.TzxBenefit-blok::before,.Ypgambla-blok::before,.YpForm-main::before,.RyuLiders-grup::before{
    position: absolute;
    content: '';
    height: 20px;
    width: 50%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background: var(--color-3);
    clip-path: polygon(24% 0, 76% 0, 100% 50%, 100% 100%, 0 98%, 0% 50%);
}
.TzxBenefit-img{
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}
.TzxBenefit-img img{
    width: 111px;
    height: 111px;
    object-fit: contain;
    transition: transform 0.5s;
}
.TzxBenefit-blok:hover .TzxBenefit-img img{
     transform: rotateY(180deg);
}
.YpAbout{
    display: flex;
    gap: 25px;
    align-items: center;
}
.YpAbout_img{
    width: 100%;
    height: 377px;
}
.YpAbout_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.YpkPage-img{
    max-height: 377px;
    object-fit: contain;
    border-radius: 5px;
    float: right;
    width: 36%;
    margin: 16px;
    margin-top: 0;
    margin-right: 0;
}
.YpTitle-blok{
    position: relative;
    text-shadow: 1px 1px 0 var(--black), -1px 1px 0 var(--black), 1px -1px 0 var(--black), -1px -1px 0 var(--black);
    color: var(--white);
    text-align: center;
    margin-bottom:  31px;
  
}

.RunContainer-section{
  padding-left: 18px;
  padding-right: 18px;
}
.YpWrapper-section-grup{
    display: flex;
    gap: 25px;
    flex-direction: row;
    
}
.YpGame-wrapper{
    width: 70%;
    height: 100%;
    
}
.YpOther-grup{
    width: 30%;
    height: 100%;
}
.YpGrup-title{
    text-align: center;
    color: var(--white);
    font-weight: 900;
    margin-bottom: 45px;
    width: 100%;
    padding:  14px;
    border-radius: 8px;
    border-bottom: 2px solid #ffffff3b;
    background:var(--bg-gradient-1);
    box-shadow: 0px 0px  14px 0px #dcc1c1;
}
.YpGames-list{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.YpGame-item{
    display: flex;
    transition: var(--hover-tranzitipn);
    flex-direction: row-reverse;
    box-shadow: 0px 0px 14px 0px #dcc1c1;
    border-radius: 8px;
    
}
.YpGame-item:nth-child(2n){
    flex-direction: row-reverse;
}
.YpGame-item:hover{
    box-shadow: 0px 0px 25px 0px #000000;
}
.YpGame-img{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.YpGame-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.YpGame-content{
    width: 70%;
    padding: 18px;
    color: #1d1a01d6;
    display: flex;
    gap:  14px;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bright-color-2);
    border-radius: 8px; 
    

}
   
.YpGame-content a h4{
    text-align: center;
    margin-bottom: 14px;
    text-shadow: 
    1px 1px 0 #fff, 
    -1px 1px 0 #fff, 
    1px -1px 0 #fff, 
    -1px -1px 0 #fff;
}
.YpBackgOpac{
    background-repeat: no-repeat;    
    background-position: center center;
    background-size: cover;
    overflow: hidden;    
    background-image: url(mediamansion/dir-bg/opacity_bg-068fa22c2081df.png);
}


.Ypgambla-blok{
    position: relative;
    padding: 40px 28px 45px;
    color: var(--white);
    text-align: center;
    font-size: 17px;
    box-shadow: 0px 0px 25px 0px #000000;
    border-radius: 8px; 
    background-color: #06060691; 
    border: 3px solid var(--color-3);

}
.Ypwrapper-page-main{
    display: flex;
    gap: 18px;
    flex-direction: column-reverse;
}
.Ypwrapper-page_imgBlok{
    display: flex;
    align-items: center;
    justify-content: center;
}
.Ypwrapper-page_imgBlok img{
    width: 100%;
    height:  377px;
    object-fit: contain;    
}
.YpContact-wrapper{
    display: flex;
    gap: 36px;
    flex-direction: column-reverse;
}
.YpForm-main{
    position: relative;
    width: 75%;
    margin: 0 auto; 
    padding: 31px;
    background: #0009;
    border-radius: 8px;
    clip-path: polygon(0% 0%, calc(100% -  0px) 0%, 100%  0px, 100% 100%, 0 100%, 0% calc( 0px));   
    border: 2px  solid var(--color-3);
}
.ind-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-input,.form-textarea,.input-input_section--element,.textarea-input_section--element{
    width: 100%;
    padding: 16px 13px;
    font-size:  18px;
    font-weight: 300;
    line-height: 150%;
    border:  2px  solid var(--color-3);
    letter-spacing: 0.32px;
    color: #FAFAFA;
    background:  #18070791;
    border-radius: 8px;
    
}

.ind-form {
    label{
        color: var(--white-section);
    }
}

    

.RopVideo-blok{
    margin-top: 45px;
    margin-bottom: 45px;
    width: 100%;
    height: 449px;
}
.RopVideo-blok video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:  8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 14px;
}
.RyuLiders-grup{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 45px;
    padding: 40px  14px 40px;
    
    border:2px  solid var(--color-3);
    border-radius: 8px;
    background: #0009;  

}
.RyuLider-item{
    display: flex;
    gap: 16px;
    align-items: center;
    text-align: center;
    justify-content: start;
    color: var(--white-section);
   
}

.RyuLider-nik{
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}
.RyuLider-nik{
    h5{
       font-size: 14px;    
    }  
    span{
        color: #ffa500;
    }  
    
}

.RyuLider-awards{
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}
.RyuLider-awards img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    
}
.RyuLider-item:hover .RyuLider-avatar img{
    transform: rotateY(180deg);
}
.RyuLider-avatar{
    width:53px;
    height:53px;
     
}
.RyuLider-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius:0%;
    transition: var(--hover-tranzitipn);
}
.RtFooter{
    padding: 31px 0;
    background: var(--warm-color);
    color: var(--white-section);
    ul{
    display: flex;
    gap: 45px;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom:  18px;
    } 
}

.RtFooter-button{
    display: flex;
    gap: 14px;
    align-items: center;
    flex-direction:column-reverse;
}
.RtFooter-button{
    img{
        width: 60px;
        height: 60px;
        object-fit: contain;
    }
}
.RtFooter-copyright{
    display: flex;
    align-items: center;
    font-size:  14px;
    justify-content: center;  
    gap:14px;
    flex-wrap: wrap;

}

.badge-list {
    margin-top: 45px;
    display: flex;
    flex-wrap: wrap;
    gap: 66px;
    justify-content: center;

    li{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    li img{
        width: 90px;
        height: 90px;
        object-fit: cover;

    }

}
.YpStep{
    display: flex;
    flex-direction: column;
    gap: 40px;
    
}
.YpStep-item{   
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    border-radius: 8px;
    border:2px  solid var(--color-3);
    background: var(--warm-color);
    p{
        word-wrap: break-word;   
        font-size:  17px;
        color: var(--white-section);
        text-align: center;        
    }  
    span{
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
    }
    span img{
        width: 60px;
        height: 60px;
        object-fit: contain;
        transition: transform 0.5s;
    }
}
.YpStep-item:hover span img{
    transform: rotateY(180deg);
}

.mask-list{
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
    justify-content: space-between;

    li{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    li img{
        width: 100%;
        height: 144px;
        object-fit: contain;
    }
}
        
.YuWrapper-grup-section{
    display: flex;
    gap: 40px;
    flex-direction:  column-reverse;
    
}
    
.Qtcart-btn,.YpGame-bt{
    width: 100%;
} 
.step-Box{
    display: block;
}  
.new-number{
    font-size: 25px;
    color: #ff0000;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}
.gamer-card{
    padding: 13px;
    padding-right: 0;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #962723
} 
.img-block{
    position: relative;
    width: 100%;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 5px 8px  18px 0px rgba(0, 0, 0, 0.15), 21px 30px 37px 0px rgba(0, 0, 0, 0.13), 48px 68px 50px 0px rgba(0, 0, 0, 0.08), 84px 121px 59px 0px rgba(0, 0, 0, 0.02), 132px 189px 65px 0px rgba(0, 0, 0, 0);
} 
.img-block img{
    max-width: 100%;
    width: 100%;
    height: 229px;
    object-fit: cover;
    vertical-align: middle;
}
.unstyled {
  writing-mode: vertical-rl; 
  text-orientation: mixed; 
  white-space: nowrap; 
  width: 1.5em;  
  color: #fff; 
}
@media (max-width: 450px){
  .RyuLiders-grup{
    justify-content: start;
  }
}
@media (max-width: 575px){
   .YpGame-item {
    flex-direction: column !important;
   }
  
   .YpGame-img img{
    height: 250px;
   }
   .YpGame-content,.YpGame-img{
    width: 100%;
   }
   .YpForm-main{
       padding: 31px 8px;
   }
   .RtForm{
    padding: 0;
   }
   .mask-list{
   
    li img{
        width: 100%;
    }
   }
   .YpForm-main{
    width: 100%;
   }
   .Ypgambla-blok{
    padding:  40px 18px 45px;
   }
   
   
}

@media (max-width: 768px){
   .wrapper-home523{
    padding: 53px 0px 0px;
   }
   .YpkPage-img{
    float: none;
    width:100%;
    margin: 0 0  18px 0; 
    max-height: 377px; 
   }


   
  
}
@media (min-width: 575px) and (max-width: 992px){  
   .mask-list{
    
    li img{
        width: 150px;
    }
   }
    
}

@media (max-width: 992px){ 
   .logo-title{
    font-size: 25px;
    line-height: 25px;
   }
   .navbar-toggler{
    color: var(--white);
    border: none;
    font-weight:700;
    margin-left: 18px;
   }
   .navbar-toggler svg{
    width: 22px;
    height: 22px;
   }
   .logo-wrapper{
    margin-bottom:  31px;
   }
   .offcanvas{
        background: linear-gradient(0deg, rgba(3,166,64,0.999964951801033) 29%, rgba(22,235,65,0.9831582291119573) 79%);
   }
   .RTulogo-mob img{
        width:  60px;
        height:  60px;
        object-fit: contain;
   }
   .nav-link{
     text-align: center;
     font-weight: 700;
   }
   .offcanvas-header{
        border-bottom: 2px  solid #ffffff3b;
   }
   .YpWrapper-section-grup{
    flex-direction: column;
   }
   .YpGame-wrapper{
    width: 100% !important;
   }
   .YpOther-grup{
    width: 100% !important;
   }
   .RyuLiders-grup{
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
   }
   .mask-list{
    flex-direction: row;
    
   }
   .img-block img {
    height: 449px;
   }
   .YpWrapper-playing{
    width: 100%;
   }

   
}
@media (min-width: 992px){
   .nav-item:not(:last-child){
    position: relative;
   }
   .nav-item:not(:last-child)::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 100%;
    background: rgb(112 242 12 / 39%);;
    top: 0;
    right: 0;
    bottom: 0;
   }
   .navbar{
    padding: 0;
   }
   
   
}    

.pt-50{
    padding-top: 50px;
}


.footer-logos {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 20px;
  padding: 20px;
  flex-direction: row;
  flex-wrap: wrap;

  a img {
    max-height: 50px;
    width: 100%;
    display: block;
    max-width: none;
    transition: 0.3s linear;
    
    &:hover,
    &:hover{
      transform: scale(0.96);
      opacity: 0.8;
    }
  }
}