@charset "UTF-8";

/*
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; }
*/

body { background-color: #f7f7f7; font-family: 'IBM Plex Sans', sans-serif; color: #000000; margin: 0; padding: 0; border: 0; outline: none; }

*,
*:before,
*:after { box-sizing: border-box; }

h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
blockquote,
input,
button,
textarea,
select { margin: 0; padding: 0; border: 0; outline: none; }

input, button, textarea, select { font: inherit; }



/* шрифты */

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  src:
    local("IBM Plex Sans"),
    local("IBMPlexSans"),
    url("fonts/IBMPlexSans/IBMPlexSans-Regular/IBMPlexSans-Regular.woff2") format("woff2"),
    url("fonts/IBMPlexSans/IBMPlexSans-Regular/IBMPlexSans-Regular.woff") format("woff"); }

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: italic;
  src:
    local("IBM Plex Sans Italic"),
    local("IBMPlexSans-Italic"),
    url("fonts/IBMPlexSans/IBMPlexSans-Italic/IBMPlexSans-Italic.woff2") format("woff2"),
    url("fonts/IBMPlexSans/IBMPlexSans-Italic/IBMPlexSans-Italic.woff") format("woff"); }

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 700;
  font-style: normal;
  src:
    local("IBM Plex Sans Bold"),
    local("IBMPlexSans-Bold"),
    url("fonts/IBMPlexSans/IBMPlexSans-Bold/IBMPlexSans-Bold.woff2") format("woff2"),
    url("fonts/IBMPlexSans/IBMPlexSans-Bold/IBMPlexSans-Bold.woff") format("woff"); }

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 700;
  font-style: italic;
  src:
    local("IBM Plex Sans Bold Italic"),
    local("IBMPlexSans-BoldItalic"),
    url("fonts/IBMPlexSans/IBMPlexSans-BoldItalic/IBMPlexSans-BoldItalic.woff2") format("woff2"),
    url("fonts/IBMPlexSans/IBMPlexSans-BoldItalic/IBMPlexSans-BoldItalic.woff") format("woff"); }

@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 500;
  font-style: normal;
  src:
    local("IBM Plex Serif Medium"),
    local("IBMPlexSerif-Medium"),
    url("fonts/IBMPlexSerif/IBMPlexSerif-Medium/IBMPlexSerif-Medium.woff2") format("woff2"),
    url("fonts/IBMPlexSerif/IBMPlexSerif-Medium/IBMPlexSerif-Medium.woff") format("woff"); }

@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 500;
  font-style: italic;
  src:
    local("IBM Plex Serif Medium Italic"),
    local("IBMPlexSerif-MediumItalic"),
    url("fonts/IBMPlexSerif/IBMPlexSerif-MediumItalic/IBMPlexSerif-MediumItalic.woff2") format("woff2"),
    url("fonts/IBMPlexSerif/IBMPlexSerif-MediumItalic/IBMPlexSerif-MediumItalic.woff") format("woff"); }



/* ссылки */

a { color: #002bff; transition: color 0.3s ease; }
a:visited { color: #002bff; }
a:hover { color: #ff002a; }
a:focus { color: #ff002a; }
a:active { color: #000000; }



/* типографика */

h1 { font-family: 'IBM Plex Serif', serif; font-weight: 500; font-size: 58px; line-height: 60px; margin-top: -21px; margin-bottom: -9px; }

@media screen and (max-width: 760px) {
	h1 { font-size: 38px; line-height: 40px; margin-top: -14px; margin-bottom: -6px; }
}
@media screen and (max-width: 400px) {
	h1 { overflow-wrap: break-word; }
}


h2 { font-family: 'IBM Plex Serif', serif; font-weight: 500; font-size: 38px; line-height: 40px; margin-top: -14px; margin-bottom: -6px; }

	h2 + p { margin-top: 18px; }

@media screen and (max-width: 760px) {
	h2 { font-size: 28px; line-height: 30px; margin-top: -10px; margin-bottom: -5px; }
}
@media screen and (max-width: 400px) {
	h2 { overflow-wrap: break-word; }
}


p { font-size: 19px; line-height: 30px; margin-top: -12px; margin-bottom: -8px; }

	p + p { margin-top: 28px; }
	p + input { margin-top: 40px; }

p.small { font-size: 14px; line-height: 20px; margin-top: -5px; margin-bottom: -5px; }


ul,
ol { margin-top: 0px; margin-bottom: 0px; }

ul li,
ol li { font-size: 19px; line-height: 30px; margin-top: -12px; margin-bottom: -8px; margin-left: 30px; position: relative; }

ul > li { list-style-position: outside; list-style-type: none; }
ul > li::before { content: '\2014'; display: block; overflow: hidden; position: absolute; top: 0; left: -30px; }

	ul li + li,
	ol li + li { margin-top: 18px; }


ul.small,
ol.small { margin-top: 0px; margin-bottom: 0px; }

ul.small li,
ol.small li { font-size: 14px; line-height: 20px; margin-top: -5px; margin-bottom: -5px; margin-left: 20px; position: relative; }

ul.small > li { list-style-position: outside; list-style-type: none; }
ul.small > li:before { content: '\2014'; display: block; overflow: hidden; position: absolute; top: 0; left: -20px; }

	ul.small li + li,
	ol.small li + li { margin-top: 15px; }



/* элементы форм */

a.button { display: block; font-size: 19px; line-height: 30px; text-decoration: none; text-align: center; padding: 9px 20px 11px 20px; border-radius: 5px; color: #ffffff; background-color: #002bff; transition: background-color 0.3s ease; cursor: pointer; }
a.button:visited { background-color: #002bff; }
a.button:hover { background-color: #000000; }
a.button:focus { background-color: #000000; }
a.button:active { background-color: #000000; }


button.button { display: block; font-size: 19px; line-height: 30px; border: none; text-align: center; padding: 9px 20px 11px 20px; border-radius: 5px; color: #ffffff; background-color: #002bff; transition: background-color 0.3s ease; cursor: pointer; }
button.button:hover { background-color: #000000; }
button.button:focus { background-color: #000000; }
button.button:press { background-color: #000000; }

input[type=text],
input[type=tel],
input[type=url],
input[type=number] { display: block; width: 100%; font-size: 19px; line-height: 30px; padding: 7px 15px 11px 15px; border: 1px solid rgba(0,0,0,0.15);  transition: border-color 0.3s ease; appearance: none; }

input[type=text]:not(:disabled):hover,
input[type=tel]:not(:disabled):hover,
input[type=url]:not(:disabled):hover,
input[type=number]:not(:disabled):hover { border-color: #002bff; }

input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus { border-color: #000000 !important; outline: 0; }

input[type=text]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=number]:disabled { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0.1); }

input[type=text]:required:invalid,
input[type=tel]:required:invalid,
input[type=url]:required:invalid,
input[type=number]:required:invalid { background-color: #ff002a; background: url(../images/icon_invalid.svg) right 15px center no-repeat; }

input[type=text]:required:valid,
input[type=tel]:required:valid,
input[type=url]:required:valid,
input[type=number]:required:valid { background-color: #00a66f; background: url(../images/icon_valid.svg) right 15px center no-repeat; }

/*
input[type=text]:before,
input[type=tel]:before,
input[type=url]:before,
input[type=number]:before { content: 'asdfasdf'; display: block; height: 10px; width: 100px; background-color: #aaeeff; position: absolute; }
*/

input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }

	input + input { margin-top: 20px; }
	input + p.small { margin-top: 15px; }



/* сетка */

#grid { display: grid; margin: 0px auto 0 auto; width: 1000px; padding: 0 30px 0 30px; grid-template-columns: repeat(24, 1fr); column-gap: 20px; row-gap: 0; /*grid-auto-flow: dense;*/ }

@media screen and (max-width: 1000px) {
	#grid { width: 760px; grid-template-columns: repeat(18, 1fr); }
}
@media screen and (max-width: 760px) {
	#grid { width: 520px; grid-template-columns: repeat(12, 1fr); }
}
@media screen and (max-width: 520px) {
	#grid { width: 100%; grid-template-columns: repeat(12, 1fr); }
}



/* логотип */

#grid .logo { grid-column: span 24; margin-top: 40px; }
#grid .logo img { display: block; height: 40px; }

@media screen and (max-width: 1000px) {
	#grid .logo { grid-column: span 18; }
}
@media screen and (max-width: 760px) {
	#grid .logo { grid-column: span 12; margin-top: 30px; }
	#grid .logo img { height: 30px; }
}



/* заголовок*/

#grid .header { grid-column: span 24; margin-top: 80px; }

@media screen and (max-width: 1000px) {
	#grid .header { grid-column: span 18; }
}
@media screen and (max-width: 760px) {
	#grid .header { grid-column: span 12; margin-top: 60px; }
}



/* маркетплейсы*/

#grid .marketplaces { grid-column: span 24; margin-top: 80px; }

#grid .marketplaces ul { display: grid; margin: 0px 0px 0px 0px; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 60px; }

#grid .marketplaces ul.small li { grid-column: span 2; margin-top: -5px; margin-bottom: -5px; margin-left: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; text-align: center; }
#grid .marketplaces ul.small  > li:before { content: none; }

#grid .marketplaces .svg-hidden { position: absolute; width: 0; height: 0; }

#grid .marketplaces .app-icon { position: relative; width: 90px; margin-top: 5px; margin-bottom: 15px; }
#grid .marketplaces .app-icon img { display: block; width: 100%; -webkit-clip-path: url(#app-icon-clip-path); clip-path: url(#app-icon-clip-path); }

#grid .marketplaces .app-icon .shadow { margin-top: -75%; position: absolute; z-index: -1; margin-left: 12.5%; margin-right: 12.5%; filter: blur(8px) brightness(75%); }

#grid .marketplaces .app-icon .label { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: absolute; top: -10px; right: -10px; background-color: #002bff; color: #ffffff; font-size: 8px; line-height: 10px; text-transform: uppercase; font-weight: bold; }

#grid .marketplaces .offer { cursor: pointer; }
#grid .marketplaces .offer .app-icon .label { background-color: #ff002a; border-radius: 50%; }

@keyframes buzz {
	10% { transform: translateX(5px) rotate(4deg); }
	15% { transform: translateX(-5px) rotate(-4deg); }
	20% { transform: translateX(4px) rotate(3deg); }
	25% { transform: translateX(-4px) rotate(-3deg); }
	30% { transform: translateX(3px) rotate(2deg); }
	35% { transform: translateX(-3px) rotate(-2deg); }
	40% { transform: translateX(2px) rotate(1deg); }
	45% { transform: translateX(-2px) rotate(-1deg); }
	50% { transform: translateX(1px) rotate(0); }
	55% { transform: translateX(-1px) rotate(0); }
	60% { transform: translateX(0px) rotate(0); }
}
#grid .marketplaces .offer .app-icon .label {
animation-name: buzz;
animation-duration: 1.5s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}


@media screen and (max-width: 1000px) {
	#grid .marketplaces { grid-column: span 18; }
	#grid .marketplaces .app-icon { width: 70px; }
}
@media screen and (max-width: 760px) {
	#grid .marketplaces { grid-column: span 12; margin-top: 60px; }
	#grid .marketplaces ul.small li { grid-column: span 4; }
}



/* предложение */

#grid .offer { grid-column: span 24/*12*/; margin-top: 80px; }

@media screen and (max-width: 1000px) {
	#grid .offer { grid-column: span 18/*12*/; }
}
@media screen and (max-width: 760px) {
	#grid .offer { grid-column: span 12; margin-top: 60px; }
}



/* CTA */

#grid .cta { grid-column: span 24; margin-top: 80px; position: relative; }

#grid .cta .generator { width: 100%; display: grid; margin: 0; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); column-gap: 30px; row-gap: 30px; padding-left: 5px; padding-right: 5px; }

#grid .cta .generator.x1 { position: absolute; background-color: #f7f7f7; }

#grid .cta .generator div { padding-top: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #ffffff; }
#grid .cta .generator div:before { content: ''; display: block; width: 100%; padding-top: 100%; margin-top: -100%; background-color: rgba(0,0,0,0.03); }

#grid .cta .generator.x1 div { grid-column: span 1; grid-row: span 1; }
#grid .cta .generator.x2 div { grid-column: span 2; grid-row: span 2; }

#grid .cta .generator.x2 div.action { grid-column: span 4; grid-row: span 2; padding-top: 0 !important; z-index: 2 !important; background: #f7f7f7 !important; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
#grid .cta .generator.x2 div.action:before { content: none; }

#grid .cta .generator a.button { margin-left: 20px; margin-right: 20px; }

@media screen and (max-width: 1000px) {
	#grid .cta { grid-column: span 18; }
	#grid .cta .generator { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr); column-gap: 40px; row-gap: 40px; padding-left: 10px; padding-right: 10px; }

	#grid .cta .generator.x1 div:nth-child(-n+12) { display: none; }
	#grid .cta .generator.x1 div:nth-last-child(-n+12) { display: none; }

	#grid .cta .generator.x2 div:nth-child(1),
	#grid .cta .generator.x2 div:nth-child(2),
	#grid .cta .generator.x2 div:nth-child(3) { display: none; }

	#grid .cta .generator.x2 div:nth-last-child(1),
	#grid .cta .generator.x2 div:nth-last-child(2),
	#grid .cta .generator.x2 div:nth-last-child(3) { display: none; }
}
@media screen and (max-width: 760px) {
	#grid .cta { grid-column: span 12; }

	#grid .cta .generator { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, 1fr); column-gap: 40px; row-gap: 40px; padding-left: 10px; padding-right: 10px; }

	#grid .cta .generator.x1 div:nth-child(-n+12) { display: block; }
	#grid .cta .generator.x1 div:nth-last-child(-n+12) { display: block; }
	#grid .cta .generator.x1 div:nth-child(-n+6) { display: none; }
	#grid .cta .generator.x1 div:nth-last-child(-n+6) { display: none; }

	#grid .cta .generator.x2 div:nth-child(3) { display: block; }
	#grid .cta .generator.x2 div:nth-child(1),
	#grid .cta .generator.x2 div:nth-child(2) { display: none; }

	#grid .cta .generator.x2 div:nth-last-child(3) { display: block; }
	#grid .cta .generator.x2 div:nth-last-child(1),
	#grid .cta .generator.x2 div:nth-last-child(2) { display: none; }

	#grid .cta .generator.x2 div.action { grid-column: span 6; grid-row: span 2; }
}
@media screen and (max-width: 400px) {
	#grid .cta { grid-column: span 12; }

	#grid .cta .generator { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); column-gap: 40px; row-gap: 40px; padding-left: 10px; padding-right: 10px; }

	#grid .cta .generator.x1 div:nth-child(-n+6) { display: block; }
	#grid .cta .generator.x1 div:nth-last-child(-n+6) { display: block; }
	#grid .cta .generator.x1 div:nth-child(-n+24) { display: none; }
	#grid .cta .generator.x1 div:nth-last-child(-n+24) { display: none; }


	#grid .cta .generator.x2 div:nth-child(1),
	#grid .cta .generator.x2 div:nth-child(2) { display: block; }
	#grid .cta .generator.x2 div:nth-child(1),
	#grid .cta .generator.x2 div:nth-child(2),
	#grid .cta .generator.x2 div:nth-child(3),
	#grid .cta .generator.x2 div:nth-child(4),
	#grid .cta .generator.x2 div:nth-child(5),
	#grid .cta .generator.x2 div:nth-child(6) { display: none; }

	#grid .cta .generator.x2 div:nth-last-child(1),
	#grid .cta .generator.x2 div:nth-last-child(2) { display: block; }
	#grid .cta .generator.x2 div:nth-last-child(1),
	#grid .cta .generator.x2 div:nth-last-child(2),
	#grid .cta .generator.x2 div:nth-last-child(3),
	#grid .cta .generator.x2 div:nth-last-child(4),
	#grid .cta .generator.x2 div:nth-last-child(5),
	#grid .cta .generator.x2 div:nth-last-child(6) { display: none; }

	#grid .cta .generator.x2 div.action { grid-column: span 4; grid-row: span 2; }
}



/* баннер seller space*/

.sellerspace { grid-column: span 24; margin-top: 80px; position: relative; background-color: #000933; background-repeat: no-repeat; background-image: url(../images/bg_sellerspace.png); background-size: 2000px; background-position: -370px center; min-height: 460px; padding: 90px 80px 80px 80px; border-radius: 30px; transition: background-size 0.5s ease-in-out, background-position 0.5s ease-in-out; }

.sellerspace h2,
.sellerspace p { color: #ffffff; }

.sellerspace a.banner { color: #ffffff; text-decoration: none; }
.sellerspace a.banner:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.sellerspace:hover { background-size: 1500px; background-position: -120px center; }

@media screen and (max-width: 1000px) {
	#grid .sellerspace { grid-column: span 18; background-position: -515px center; min-height: 380px; padding: 70px 60px 60px 60px; border-radius: 20px; }
	#grid .sellerspace:hover { background-size: 1500px; background-position: -265px center; }
}
@media screen and (max-width: 760px) {
	#grid .sellerspace { grid-column: span 12; background-position: center -800px; min-height: 300px; padding: 50px 40px 40px 40px; border-radius: 10px; }
	#grid .sellerspace:hover { background-size: 1500px; background-position: center -550px; }
}



/* контакты*/

#grid .contacts { grid-column: span 24; margin-top: 80px; }
#grid .contacts p a { white-space: nowrap; }

@media screen and (max-width: 1000px) {
	#grid .contacts { grid-column: span 18; }
}
@media screen and (max-width: 760px) {
	#grid .contacts { grid-column: span 12; }
}



/* копирайт */

#grid .copyrights { grid-column: span 24; margin-top: 80px; margin-bottom: 40px; }

@media screen and (max-width: 1000px) {
	#grid .copyrights { grid-column: span 18; }
}
@media screen and (max-width: 760px) {
	#grid .copyrights { grid-column: span 12; margin-top: 60px; margin-bottom: 30px; }
}



/* поп-ап */

.popup-full { display: flex; width: 100%; height: 100%; position: fixed; z-index: 100; top: 0; left: 0; align-items: center; justify-content: center; }
.popup-full .plate { width: 460px; height: intrinsic; max-height: 90%; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; background: #ffffff; text-align: left; box-shadow: 0px 20px 80px -40px #002bff; }

.popup-full .plate .popup-close { display: block; width: 40px; height: 40px; position: absolute; top: 10px; right: 10px; background: url(../images/icon_close.svg) center center no-repeat; cursor: pointer; }
.popup-full .plate .popup-close:hover { filter: brightness(0%); }

.popup-full .plate h2 { margin: 36px 60px 24px 40px; }
.popup-full .plate article { flex-grow: 1; overflow-y: auto; padding: 10px 40px 10px 40px; }

.popup-full .plate a.button,
.popup-full .plate button.button { margin: 30px 40px 40px 40px; }

.popup-full .plate a.button + p.small,
.popup-full .plate button.button + p.small { margin: -25px 40px 40px 40px; }

.popup-full .popup-fader { display: block; position: fixed; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); }

@media screen and (max-width: 520px) {
	.popup-full .plate { width: 460px; height: intrinsic; max-height: 90%; }
	.popup-full .plate h2 span { display: none; }
}


/*  */

/*

#grid > * { background-color: rgba(0,0,0,0.5); }

@media screen and (max-width: 1000px) {
	body { background-color: red; }
}
@media screen and (max-width: 760px) {
	body { background-color: yellow; }
}
@media screen and (max-width: 520px) {
	body { background-color: green; }
}



body { background-image: url(../images/test-10h.png); background-position: top center; }