html, body {
	height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-text-size-adjust: none;
	text-size-adjust: 100%;
	
	background: #ffffff;
}

html, body, input {
	font-family: Arial,sans-serif;	/*!!!*/
	font-size: 16px;
}

a {text-decoration: none}

img {border: none}

* {-webkit-tap-highlight-color: transparent}

form {margin: 0}
	
.noscroll {overflow: hidden !important}
.nosnap {scroll-snap-type: none !important}

body > div {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.top {
  display: flex;
  justify-content: space-between;
	align-items: stretch;
	flex-shrink: 0;
	overflow: hidden;
	background: #222222;
}
.top > a {
  display: flex;
}

.top_logo {
  height: 57px;
  width: 110px;
	margin: 15px 17px;
	background-image: url(/i/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.top_panel {
  display: flex;
  justify-content: flex-end;
	align-items: stretch;
	padding: 0 0 0 10px;
}
.top_panel > div {
	display: flex;
	align-items: center;
	margin: 0 10px 0 0;
	cursor: pointer;
}
.top_panel > a {
	display: flex;
	align-items: center;
	margin: 0 10px 0 0;
}

.top_panel_item {
  display: flex;
  align-items: center;
	margin: 0 10px 0 10px;
	color: #ffffff;
}

.left_icon_lang {padding-left: 36px; height: 26px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-position: 0 0; background-size: 26px auto}
.left_icon_acc {padding-left: 36px; height: 26px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-position: 0 -26px; background-size: 26px auto}

.center {
  flex-grow: 1;
}

.list {
  padding: 30px 0 0 0;
}

.section {
  padding: 10px 0 0 0;
}

.section_title {
	display: flex;
	margin: 0 20px 20px 20px;
}
.section_title div {
	display: flex;
  align-items: center;
	padding-right: 30px; height: 20px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-position: right -40px; background-size: 20px auto;
  font-size: 130%;
	font-weight: bold;
	color: #222222;
}

.section_items {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
}

.app {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
	margin: 20px 0 0 0;
}

.app_main {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
}

.section_items a {
  display: flex;
  height: 100px;
	padding: 10px 20px;
	color: #000000;
}

.app_item {
  display: flex;
  height: 100px;
	padding: 10px 20px;
}

.app_logo {
	flex-shrink: 0;
	width: 100px;
}

.app_logo img {
	height: 100%;
	width: 100%;
}

.app_info {
	flex-grow: 1;
	overflow: hidden;
}

.app_info_title {
	padding: 10px 0 0 20px;
	font-size: 130%;
	font-weight: bold;
	color: #222222;
}

.app_info_short {
	padding: 10px 0 0 20px;
	overflow-wrap: break-word;
}
.app_info_short h1 {
  font-size: 100%;
  font-weight: normal;
	padding: 0;
	margin: 0;
}

.app_buttons {
	display: grid;
	gap: 15px 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 10px 20px;
}
.app_buttons a {
  display: flex;
	align-items: center;
	align-self: flex-start;
	padding: 0 10px;
	overflow: hidden;
}
.app_buttons a > div {
	display: flex;
	justify-content: center;
	flex-grow: 1;
}

.app_buttons_item {
  display: flex;
  align-items: center;
	white-space: nowrap;
}

.button_play {
	color: #ffffff;
	border: 1px solid #0fab0f;
	background: #0fab0f; /* orange: df7219 */
}
.button_play > div > div {height: 26px;	margin: 7px 0}

.button_play_wide {grid-column: span 2;}

.button_get {
	color: #222222;
	border: 1px solid #222222;
}
.button_get > div > div {height: 26px;	margin: 7px 0}

.left_icon_google {padding-left: 34px; height: 26px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-position: 0 -78px; background-size: 26px auto}
.left_icon_apk {padding-left: 34px; height: 26px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-position: 0 -104px; background-size: 26px auto}

.app_images {
	position: relative;
	margin: 17px 20px;
}

.app_images_list {
  display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;	
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding: 3px 0;
}
.app_images_list::-webkit-scrollbar {
	height: 0;
	background: transparent;
}
.app_images_list div {
	width: 108px;
	height: 192px;
	flex-shrink: 0;
	scroll-snap-align: start;
	cursor: pointer;
}
.app_images_list img {
	height: 100%;
	width: 100%;
}

.app_images_list_pad {margin: 0 0 0 20px;}

.app_images_nav {
	display: none;
	position: absolute;
	top: calc(50% - 33px);
	cursor: pointer;
	padding: 20px;
	background: #ffffff;
	border-radius: 33px;
}
.app_images_nav div {height: 26px; padding-left: 26px; background-image: url(/i/icons.png); background-repeat: no-repeat; background-size: 26px auto}

#imagesleft {left: -20px}
#imagesleft div {background-position: 0 -130px}

#imagesright {right: -20px}
#imagesright div {background-position: 0 -156px}

.app_desc {
	max-height: 999999px;
	padding: 10px 20px 10px 20px;
}

.app_desc h2 {
  font-size: 130%;
  font-weight: bold;
	padding: 0;
	margin: 0;
}

.bottom {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-shrink: 0;
	margin: 20px 0 0 0;
  padding: 10px 20px;
	background: #222222;
	color: #ffffff;
}
.bottom div {
	display: flex;
	justify-content: center;
	padding: 5px 0;
}
.bottom a {color: #ffffff}

.popup_img {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	cursor: pointer;
}

.popup_img_bg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,.7);
}

.popup_img_elem {
	display: flex;
  justify-content: center;
	align-items: center;
	height: 100%;
  width: 100%;
}
.popup_img_elem img {
	max-height: 100%;
	max-width: 100%;	
	z-index: 20;
}

.popup_dialog {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.popup_dialog_bg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,.7);
}

.popup_dialog_box {
	display: flex;
  justify-content: center;
	align-items: center;
	height: 100%;
  width: 100%;
}

.popup_dialog_box > div {
	width: 100%;
	max-width: 500px;
	z-index: 20;
	background: #ffffff;
	padding: 20px 10px;
}

.popup_dialog_box_message {
	margin: 0 10px 0 10px;
}

.popup_dialog_box_button {
	display: flex;
	flex-wrap: wrap;
}
.popup_dialog_box_button > input {
	flex-grow: 1;
	min-width: 120px;
	height: 40px;
	cursor: pointer;
	margin: 15px 10px 0 10px;
}

#dialogok {
	color: #ffffff;
	border: 1px solid #c32323;
	background: #c32323;
}

#dialogcancel {
	color: #222222;
	border: 1px solid #222222;
	background: #ffffff;
}

.popup_lang {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.popup_lang > div {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
}

.popup_lang_bg {
	flex-grow: 1;
	height: 100%;
	background-color: rgba(0,0,0,.7);
	cursor: pointer;
}

.popup_lang_panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
}
.popup_lang_panel > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 10px 0;
	background: #222222;
}

.popup_lang_panel > a {
	padding: 5px 20px;
	margin: 0 0 2px 0;
	color: #000000;
}

.popup_lang_panel_title {
	padding: 5px 20px;
	color: #ffffff;
}

#langclose {
	cursor: pointer;
}
#langclose div {
	height: 16px;
	padding-left: 16px;
	margin: 20px 20px;
	background-image: url(/i/icons.png);
	background-repeat: no-repeat;
	background-position: 0 -112px;
	background-size: 16px auto;
}

.acc {
	display: flex;
	justify-content: center;
	height: 100%;
}
.acc > div {
	width: 100%;
	max-width: 500px;
	margin: 30px 10px 10px 10px;
}

.acc_form {
	display: flex;
	flex-direction: column;
}
.acc_form > div {
	display: flex;
	flex-wrap: wrap;
}

.acc_form_main_button > input {
	flex-grow: 1;
	min-width: 200px;
	height: 40px;
	cursor: pointer;
	margin: 15px 10px 0 10px;
}

.form_button {
	color: #222222;
	border: 1px solid #222222;
	background: #ffffff;
} 

.form_button_red {
	color: #ffffff;
	border: 1px solid #c32323;
	background: #c32323;
} 

.acc_form_title {
	font-size: 130%;
	font-weight: bold;
	color: #222222;
	margin: 0 10px 0 10px;
}

.acc_form_mess_red {margin: 15px 10px 0 10px; color: #e1312f;}
.acc_form_mess_green {color: #009c00;}

.acc_form_login_input > input {
	flex-grow: 1;
	min-width: 200px;
	height: 40px;
	border: 1px solid #222222;
	padding: 0 0 0 20px;
	margin: 15px 10px 0 10px;
}

.acc_form_login_button > input {
	flex-grow: 1;
	height: 40px;
	color: #ffffff;
	background: #0fab0f; /* orange: df7219 */
	border: 1px solid #0fab0f;
	cursor: pointer;
	margin: 15px 10px 0 10px;
}


@media (min-width: 750px) {
	.section_main {grid-template-columns: repeat(2, minmax(0, 1fr))}
	.app_main {grid-template-columns: repeat(2, minmax(0, 1fr))}
	.section_app {grid-template-columns: repeat(2, minmax(0, 1fr))}
	.bottom {flex-direction: row}
}

@media (min-width: 1180px) {
	.section_main {grid-template-columns: repeat(3, minmax(0, 1fr))}
	.app {grid-template-columns: minmax(0, 2fr) minmax(0, 1fr)}
	.section_app {grid-template-columns: minmax(0, 1fr)}
}

@media (min-width: 1580px) {
	.section_main {grid-template-columns: repeat(4, minmax(0, 1fr))}
	.app {grid-template-columns: repeat(2, minmax(0, 1fr))}
	.section_app {grid-template-columns: repeat(2, minmax(0, 1fr))}
}