@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');

* {
	font-family: 'Inter', sans-serif;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: none;
}

a {
	text-decoration: none;
	color: black;
}

nav ul {
	list-style-type: none;ProductBuy Buy1
	display: flex;
}

ul {
	margin:0 0 30px 0;
	padding:0;
}

body{

padding:0;
margin:0;
height:auto;
min-height:100%!important;
font-weight:400;
font-style:normal;
min-width:320px;
line-height: 30px;
overflow-x: hidden;
background: url('../img/bgbody.webp') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

/* Стилизация скроллбара */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb { background-color:  #333333;}


h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.h1,.h2,.h3,.h4,.h5,.h6{
color: #23ead2;
text-transform:uppercase;
margin:0 0 20px 0;
padding:0;
font-weight:600;
}
h1,.h1{
font-size:20px;
line-height:24px;
}
h2,.h2{
font-size:18px;
line-height:24px;
}
h3,.h3{
font-size:16px;
line-height:32px;
}
h4,.h4{
font-size:16px;
line-height:30px;
}
h5,.h5{
font-size:16px;
line-height:28px;
}
h6,.h6{
font-size:16px;
line-height:28px;
}

p{
font-size:17px;
line-height:28px;
color:#304748;
padding:0;
margin:0 0 30px 0!important;
text-align:justify;
}

table {
	border-collapse: collapse;
}

div.Header {
	padding: 0px 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

a.Logo {
	display: flex;
	line-height: 25px;
	animation: blink 1s ease infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 0.3;
    }
    
    50% {
        opacity: 0.6;
    }
    
    100% {
        opacity: 1;
    }
}

a.Logo img {
	width: 170px;
	margin-left: 20px;
}


div.logo_title {
	color: white;
	font-size: 18px;
	align-self: center;
}

.Gplayimg {
	width: 200px;
	margin-right: 20px;
}


.Central {
	padding: 0 10px;
	max-width: 1200px;
	margin: 0 auto;
	/*border-right: 1px solid green;
	border-left: 1px solid green;*/
}


header {
	background-color: rgba(0,0,0,0.7);
}


.HeaderLink {
	color: white;
}



div.FastEntry {
	-webkit-user-select: none;
	padding: 10px 0px;
	background: url('../images/blueline.png');
	color: white;
	font-size: 18px;
}

div.Infoline {
	background-color: #1779b8;
	text-align: center;
	color: white;
	font-size: 15px;
}

div.FastEntry div.Central {
	display: flex;
	justify-content: center;
	align-items: center;
}

span.line-text {
	margin-right: 30px;
}



div.line-button {
	cursor: pointer;
	position: relative;
	padding: 10px;
	text-align: center;
	background: url('../images/button.png') no-repeat;
	background-size: 100%;
	width: 380px;
}

div.line-button span {
	vertical-align: middle;
}

div.line-button:hover {
	background: url('../images/button-hover.png') no-repeat;
	background-size: 100%;
	width: 380px;
}

div.BgHead {
	background: url('../img/background.webp') center;
	height: 300px;
	width: 100%;
	animation: gray 2s ease infinite forwards;
}

div.BgHead img { width: 100%; height: 100%; object-fit: cover; opacity: 0;
    animation: glitch 2s ease infinite forwards;
    
}

@keyframes gray {
    0% {
        filter: grayscale(0);
    }
    
    35% {
        filter: grayscale(0);
    }
    
    40% {
        filter: grayscale(1.5);
    }
    
    52% {
        filter: grayscale(0);
    }
    
    100% {
        filter: grayscale(0);
    }
}


@keyframes glitch {
    0% {
        opacity: 0;
        transform: translateX(0px);
    }
    
    35% {
        opacity: 0;
        transform: translateX(0px);
    }
    
    40% {
        opacity: 0.1;
        transform: translateX(-5px);
    }
    43% {
        opacity: 0.1;
        transform: translateX(5px);
    }
    
    46% {
        opacity: 0.1;
        transform: translateX(-5px);
    }
    
    49% {
        opacity: 0.1;
        transform: translateX(5px);
    }
    
    52% {
        opacity: 0;
        transform: translateX(0px); 
    }
    
    100% {
        opacity: 0;
        transform: translateX(0px); 
    }
    
}



/* Products */
.ctitle { color: white; font-size: 20px; text-transform: uppercase; font-weight: 600; }
div.Products {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

div.Product {
	background-color: rgba(58,103,178,1);
	border: 1px solid white;
	border-radius: 10px;
	color: white;
	padding: 20px 0px;
	width: 250px;
	margin: 0 20px 20px 20px;
}

div.ProductImg {
	margin: 0 auto;
	/*border: 1px solid black;*/
	width: 250px;
	height: 250px;
	
	background-size: contain;
	background-position: center;
}

.img1 { background: url('../img/120.webp') no-repeat; }
.img2 { background: url('../img/280.webp') no-repeat; }
.img3 { background: url('../img/560.webp') no-repeat; }
.img4 { background: url('../img/1480.webp') no-repeat; }
.img5 { background: url('../img/3000.webp') no-repeat; }
.img6 { background: url('../img/osobaja postavka zolota na 7 dnej.webp') no-repeat; }
.img7 { background: url('../img/1050 samocvetov.webp') no-repeat; }
.img8 { background: url('../img/2200 samocvetov.webp') no-repeat; }
.img9 { background: url('../img/4600 samocvetov.webp') no-repeat; }
.img10 { background: url('../img/12000 samocvetov.webp') no-repeat; }
.img11 { background: url('../img/25000 samocvetov.webp') no-repeat; }
.img12 { background: url('../img/fond rosta.webp') no-repeat; }
.img13 { background: url('../img/Postavka uskorenij issledovanij na 30 dnej.webp') no-repeat; }
.img14 { background: url('../img/Postavka materialov na 7 dnej.webp') no-repeat; }
.img15 { background: url('../img/Postavka%20samocvetov%20na%20180%20dnej.webp') no-repeat; }
.img16 { background: url('../img/Mercajushhaja raspiska III.webp') no-repeat; }
.img17 { background: url('../img/Mercajushhaja raspiska IV.webp') no-repeat; }
.img18 { background: url('../img/Mercajushhaja raspiska V.webp') no-repeat; }
.img19 { background: url('../img/Mercajushhaja raspiska VI.webp') no-repeat; }
.img20 { background: url('../img/Mercajushhaja raspiska VII.webp') no-repeat; }
.img21 { background: url('../img/10x Mercajushhih raspisok III.webp') no-repeat; }
.img22 { background: url('../img/Mercajushhaja raspiska Ⅸ.webp') no-repeat; }




div.ProductTitle {
	font-weight: 600;
	text-align: center;
}

div.ProductTitle span:first-child {
	color: rgba(255,255,255,0.2);
	font-size: 15px;
	text-decoration: line-through;
	padding-right: 5px;
}

div.ProductTitle span:nth-child(2) {
	font-size: 20px;
	color: #23ead2;
}

div.ProductPrice {
	font-weight: 600;
	text-align: center;
}

div.ProductBuy {
	margin: 0 auto;
	width: 80%;
	background-color: #FAC60B;
	color: white;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
}

div.BuyArticle {
	margin: 0 auto;
	margin-top: 10px;
	width: 30%;
	background-color: #23ead2;
	color: white;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
}

/* End Products */

/* Popup */

.popup-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0,0.6);
	display: none;
}

.popup1, .popup2, .popup3, .popup4, .popup5, .popup6, .popup7, .popup8, .popup9, .popup10, .popup11, .popup12, .popup13, .popup14, .popup15, .popup16, .popup17, .popup18, .popup19, .popup20, .popup21, .popup22, .popup23, .popup24, .popup25, .popup26, .popup27, .popup28, .popup29, .popup30, .popup31, .popup32, .popup33, .popup34 {
	display: none;
	position: fixed;
	z-index: 1000;
	width: 500px;
	background-color: white;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 20px;
	top: 0;
	left: 50%;
	padding: 20px;
	transform: translate(-50%,50%);
	-webkit-box-shadow: 0px 0px 22px 0px rgba(34, 60, 80, 0.53);
	-moz-box-shadow: 0px 0px 22px 0px rgba(34, 60, 80, 0.53);
	box-shadow: 0px 0px 22px 0px rgba(34, 60, 80, 0.53);
}
.popupopen { cursor: pointer; }
.popupclose {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 18px;
	background-color: red;
	color: white;
	padding: 4px 6px;
	border-radius: 15px;
	cursor: pointer;
}

.popupclose:hover {
	transition: .3s;
	color: #d24747;
}

.popup1 p, .popup2 p, .popup3 p, .popup4 p, .popup5 p, .popup6 p, .popup7 p, .popup8 p, .popup9 p, .popup10 p, .popup11 p, .popup12 p, .popup13 p, .popup14 p, .popup15 p, .popup16 p, .popup17 p, .popup18 p, .popup19 p, .popup20 p, .popup21 p, .popup22 p, .popup23 p, .popup24 p, .popup25 p, .popup26 p, .popup27 p, .popup28 p, .popup29 p, .popup30 p, .popup31 p, .popup32 p, .popup33 p, .popup34 p  {
	font-weight: 800;
	text-align: left;
	font-size: 20px;
	color: black;
}

div.popup1 form, div.popup2 form, div.popup3 form, div.popup4 form, div.popup5 form, div.popup6 form, div.popup7 form, div.popup8 form, div.popup9 form, div.popup10 form, div.popup11 form, div.popup12 form, div.popup13 form, div.popup14 form, div.popup15 form, div.popup16 form, div.popup17 form, div.popup18 form, div.popup19 form, div.popup20 form, div.popup21 form, div.popup22 form, div.popup23 form, div.popup24 form, div.popup25 form, div.popup26 form, div.popup27 form, div.popup28 form, div.popup29 form, div.popup30 form, div.popup31 form, div.popup32 form, div.popup33 form, div.popup34 form {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

div.popup input {
	font-size: 16px;
	padding: 7px;
}
input#PopupName::placeholder, input#PopupTel::placeholder { color: black; font-weight:200; }
input#PopupName, input#PopupTel { 
	padding: 10px 5px;
	margin-bottom: 5px;
	border-radius: 5px;
	outline: none; 
	border: none;
	width: 90%;
	color: black;
	align-self: center;
	background-color: rgba(0,0,0,0.1);
}
.PopupSend {
	width: 90%;
	text-align: center;
	text-transform: uppercase;
	background-color: #1779b8;
	color: white;
	margin-top: 20px;
	padding: 10px;
	font-size: 16px;
	font-weight: 600;
	margin: 0 auto;
	border-radius: 10px;
}

/* Popup end */

footer {
	background-color: rgba(0,0,0,0.7)
}

div.Footer {
	margin-top: 50px;
	padding: 40px 0px;
	display: flex;
	color: white;
	justify-content: space-between;
}

div.Footer img {
	width: 150px;
	height: 150px;
}

div.Footer .logo_text {
	color: white;
}


div.FooterInfo {
	padding: 0px 30px;
}

div.Content p {
	font-size: 14px;
}

div.OrderInfo {
    background-color: rgba(255,255,255,0.2);
    color: white;
    margin: 0 auto;
    text-align: center;
    max-width: 700px;
    margin-top: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.5);
}

.under_button {
    color: rgba(0,0,0,0.3);
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}

/* News */

ul.News {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul.News li {
    background-color: rgba(255,255,255,0.1);
    padding: 0 10px;
    border-radius: 10px;
    font-size: 15px;
    color: #23ead2;
    margin: 5px 10px 0px 0px;
}

div.New {
    font-size: 16px;
    padding: 15px 20px 20px 20px;
    margin: 20px 0px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 15px;
    border: 1px solid white;
    color: white;
    text-align: center;
}
div.New p { color: white; text-align: center; font-size: 16px;}

div.New strong { color: #23ead2; }

div.New ul { list-style-type: none; font-size: 16px; }
div.New ul span { color: #23ead2; font-weight: 600; }
/* News End */

/* Аккаунты */
div.Account {
	background-color: rgba(255,255,255,0.1);
	border: 1px solid white;
	border-radius: 10px;
	color: white;
	padding: 20px 0px;
	width: 350px;
	margin: 0 20px 20px 20px;
	text-align: center;
}


div.AccSmallImgs {
    margin-top: 7px;
    display: flex;
    justify-content: center;
}
div.AccSmallImgs img {  border: 1px solid rgba(255,255,255,0.3); }
div.AccSmallImgs img:not(:last-of-type) {
    margin-right: 7px;
}

div.AccDesc {
    overflow-y: scroll;
    height: 230px;
    background-color: rgba(255,255,255,0.1);
    padding: 10px;
    color: rgba(255,255,255,0.7);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    position: relative;
}


span.AccTitle {
    color: #23ead2;
    font-size: 18px;
    font-weight:500;
}


/* */

div.PhotoViewer-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0,0.8);
    display: none;
}

div.PhotoViewer {
}

div.PhotoViewer img {
    max-width: 60%;
    display: block;
    margin-bottom: 30px;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    box-shadow: 0 0 45px #23ead2;
}

.photoviewerclose {
    color: white;
    font-size: 60px;
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
}
div.Account img { border-radius: 15px; }
div.Account img:hover {
    cursor: pointer;
    opacity: 0.5;
}

ul.Menu {
    margin-top: 25px;
    list-style-type: none;
    color: white;
    display: flex;
    align-self: center;
}

ul.Menu a { color: white; font-weight: 600; }
ul.Menu a:nth-child(2) { color: #23ead2; }
ul.Menu a:last-child { text-decoration: 1px dashed underline; }
ul.Menu li:first-child {
    margin-right: 15px;
}

/* Магазин аккаунтов */

form.sell-account { max-width: 700px; margin: 0 auto;}
form.sell-account input { padding: 6px 10px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.3); width: 90%; display: block; margin: 0 auto; margin-bottom: 15px; }
input[name=comment] { height: 60px; }
input[type=text]:focus, input[type=number]:focus {
    box-shadow: 0 0 20px #23ead2;
} 
form.sell-account button { margin: 0 auto; display: block; background-color: red; color: white; outline: none; border: none; padding: 10px 20px; font-weight: 600; text-transform: uppercase; border-radius: 15px; cursor: pointer;}
/* Конец магазина аккаунтов */

/* Отзывы */
div.review { width: 70%; margin: 10px auto; background-color: rgba(0,0,0,0.3); border-radius: 15px; padding: 10px;}
div.review span:first-child { color: #23ead2; font-weight: 600; font-size: 18px; }
div.review span:nth-child(2) { color: rgba(255,255,255,0.5); }
div.review span:last-child { color: white; }
div.rating i { color: rgba(255,255,255,0.5); }
/* Конец отзывов */

/* Онлайн */
div.online span::after {content: 'Сейчас онлайн:';}
div.online {color: white; position: fixed; bottom: 20px; left: 15px; background-color: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 15px;}
div.online b {color: #23ead2;}
/* Конец онлайна */

/* Наборы */
div.Pack { background-color: rgba(80,80,80,1); border: 1px solid white; border-radius: 10px; color: white; padding: 20px 0px; width: 300px; margin: 0 20px 20px 20px;}
div.linePack img { width: 50px; height: 50px; }
div.linePack { background-color: rgba(0,0,0,0.1); font-size: 14px; padding: 0 5px; display: grid; grid-template-columns: 50px 185px 35px; align-items: center; column-gap: 5px; }
div.linePack span:first-of-type { text-align: center; }
div.linePack span:last-of-type { text-align: center; color: #23ead2; font-weight: 600; }
/* Конец наборов */

/* Таблицы статистики */
    .stats { text-align: center; }
    .stats thead { left: -9999px; position: absolute; visibility: hidden; }
    .stats td { padding: 5px 10px; border: 1px solid;}
    .stats tr td:first-child { background-color: rgba(255,255,255,0.05); }
    .stats tr td:nth-child(2) { background-color: rgba(255,255,255,0.1); }
    .stats tr td:nth-child(3) { background-color: rgba(255,255,255,0.15); }
    .stats tr td:nth-child(4) { background-color: rgba(255,255,255,0.2); }
    .stats tr td:nth-child(5) { background-color: rgba(255,255,255,0.25); }
    .stats tr td:nth-child(6) { background-color: rgba(255,255,255,0.3); }
    .stats tr td:nth-child(7) { background-color: rgba(255,255,255,0.35); }
/* Конец таблицы статистики */

.scroll {
  height: 200px; /* Высота блока */
  overflow-y: scroll; /* Включаем вертикальную прокрутку */
}
