@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,700&subset=cyrillic,latin);
*{box-sizing: border-box;}
html{height:100%}
body{margin: 0px;height: 100%;font-family: 'Roboto', sans-serif;align-items: stretch;justify-content: center;position: relative;}
#video{width: 100%; height: 100%;}
.videobg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;right: 0;}
body {background:#fafafa;}

.pattern{position: absolute; width: 100%; height: 100%; top: 0;left: 0; opacity: 0.4;}
.wrapper {
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
 

.tg-install{font-size: 12px;opacity: 0.5;color:#fff;text-align: center;}.tg-install__link{width:42px;height:40px;display:inline-block;opacity:0.5}.tg-install__link:hover{opacity:1}.tg-install__link_android{background:url(/img/android.png) center no-repeat;background-size:21px 25px}.tg-install__link_apple{background:url(/img/apple.png) center no-repeat;background-size:21px 25px}
.tg-install a {font-size: 12px; opacity: 0.5;color:#fff;  text-decoration: none;}
.tg-install a:hover {color:#ff0; opacity: 1;}
.tg-install{margin:20px auto 0px auto}

.tgme_page_description {font-size: 12px;color:#fff;text-align: center;padding-bottom:10px;}

.logo{display:flex;align-items:center;color:#ffffff;text-decoration:none;font-size:14px;justify-content:center}.logo__image{width:20px;height:20px;border-radius:3px;margin-right:8px;position:relative;background:#7255de;background:linear-gradient(45deg, #7255de 0%, #3656a9 100%)}.logo__image-src{background:url(/img/ico.png) center no-repeat;background-size:12px;position:absolute;top:0px;left:0px;right:0px;bottom:0px}

a.red, a.card, a.qr, a.redy, a.youmoney, a.card-part, a.stars {
    flex: 1 0 auto !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-position: center center !important;
    background-size: contain, cover !important;
    background-repeat: no-repeat !important;
    background-clip: border-box !important;
    background-origin: content-box, border-box !important;
    transition: opacity 150ms linear 0s, filter 150ms linear 0s, background-color 150ms linear 0s !important;
    transform: translate3d(0px, 0px, 0px) !important;
    padding: 16px 36px;
    color: #fff;
    text-decoration: none; 
    width: 400px;
    border-radius: 10px;
margin-bottom:10px;
}

a.red, a.redy {    background: radial-gradient(340px 111px at center top, rgba(255, 92, 77, 0.5) 0%, rgba(235, 70, 159, 0.5) 10%, rgba(131, 65, 239, 0.18) 40%, rgba(63, 104, 249, 0) 52%) !important;
    background-color: #000 !important;
}
a.card {background: #6496dc!important;display: flex;
    align-items: center;
    justify-content: space-between;}

a.qr {background: #354a55 !important}

 a.card img {
background: #fff;
    border-radius: 10px;
    width: 44px;
    padding: 0 3px;margin-bottom: -7px;
}


a.youmoney img {
    background: #fff;
    border-radius: 10px;
    width: 35px;
    padding: 3px 5px;
    margin-left: 6px;
    margin-right: 3px;
}


.pay {
    display: flex;
    flex-direction: column;
}

a.red:hover, a.card:hover, a.qr:hover, a.card-part:hover, a.stars:hover {opacity: .8}
.dona img {
    opacity: .4;
    margin-top: -40px; 
  margin-bottom: 10px;
 max-width: 200px;
}

a.redy {     background: linear-gradient(to right, #494949, #241d1d, #26090e) !important;
    text-shadow: 0 0 20px black;
    font-family: system-ui;
}
a.redy:hover, a.youmoney:hover {  background:#000000!important;}

a.youmoney {background: #8b3ffd;display: flex;
    align-items: center;
    justify-content: center;}

hr {
    border: 1px solid #cccccc5c;
    width: 100%;
    margin-bottom: 1rem;
}

@media (max-width:768px){

.pays {margin:25px!important}

a.red, a.card, a.qr, a.redy, a.youmoney, a.card-part, a.stars {
 
    width: 100%;!important;}

.pay { 
    width: 90%;
}


}

.ipay {
    background: #000;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 1.2rem;
    font-family: system-ui;
    width: max-content;
    color: #fff;
    margin-top: -40px;
    margin-bottom: 15px;
}

.pays p {    font-size: .8rem;}
.pays b {   font-size: .9rem;}
.pays {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 18px 0px #0006;
    border-radius: 15px;
    padding: 10px 10px 16px;
}


a.stars {
    background: #0096fa;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: -1px 1px 2px #0000009e;
}

a.card-part {
    background: #41f358;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #242424;
    border: 0 !important;
}

a.card-part b {
    padding-right: 5px;
}

a.card-part img {margin-right:10px;margin-left:-40px;}

a.redy {
   width: max-content;
}