@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');
	@font-face { font-family: 'PPPangramSans-Bold'; src: url('fonts/PPPangramSans-Bold.otf') format('opentype'); font-weight: normal; font-style: normal;}
	@font-face { font-family: 'PPPangramSans-CompactRegular'; src: url('fonts/PPPangramSans-CompactRegular.otf') format('opentype'); font-weight: normal; font-style: normal;}
	@font-face { font-family: 'PPPangramSans-Medium'; src: url('fonts/PPPangramSans-Medium.otf') format('opentype'); font-weight: normal; font-style: normal;}
	@font-face { font-family: 'PPPangramSans-Semibold'; src: url('fonts/PPPangramSans-Semibold.otf') format('opentype'); font-weight: normal; font-style: normal;}
	@font-face { font-family: 'Axiforma-Book'; src: url('fonts/Axiforma-Book.ttf'); font-weight: normal; font-style: normal; }
	@font-face { font-family: 'FranklinGothic-Demi'; src: url('fonts/franklingothic_demi.ttf'); font-weight: normal; font-style: normal; }
	@font-face { font-family: 'PPPangramSans-NarrowSemibold'; src: url('fonts/PPPangramSans-NarrowSemibold.ttf'); font-weight: normal; font-style: normal; }
	@font-face { font-family: 'Ovsyanka'; src: url('fonts/Ovsyanka.otf') format('opentype'); font-weight: normal; font-style: normal; }
	p {margin: 0; padding: 0;}
	.headermenu {position: relative; white-space: normal; font-size:23px;font-family:PPPangramSans-Medium;color:#000000;}
	.hmdot { width: 25px; height: 25px; }
	.ft42{font-size:40px;font-family:PPPangramSans-Semibold;color:#000000;justify-content: flex-start;}
	.ft43{font-size:28px;font-family:PPPangramSans-CompactRegular;color:#000000;}
	.ft-draft { font-size: 30px; font-family: PPPangramSans-CompactRegular; color: black; margin: 10px; white-space: nowrap; overflow: visible; }
	.page-div {position:relative;width:100%;min-height:100vh;display:flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap;  box-sizing: border-box; overflow: hidden; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center;}
	.bg-header { max-width: 100vw; max-height: 100vh; object-fit: contain; }
	html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow-y: hidden; overflow-x: hidden; scroll-behavior: smooth; align-items: center; justify-content: center; background-image: url('draft-web-content/backgrounds/db.png'); background-size: cover; background-position: center; }
	a { text-decoration: none; color: black; transition: 0.5s; }
	a:hover { color: blue; }
	.header-menu { z-index: 2; position: absolute; background-image: url('draft-web-content/bg-header-clean.png'); background-size: cover; width: 100vw; height: 112px; display: none; flex-direction: row; align-items: center; justify-content: center; }
	.draft-logo-circle { width: 95px; height: 95px; position: absolute; left: 1%; }
	.draft-logo-large { display: none; }
	.page5-menu-header{font-size:48px;font-family:PPPangramSans-Semibold;color:#000000;}
	.page5-menu-entry{position: relative; font-size:30px;font-family:PPPangramSans-CompactRegular;color:#000000;}
	.menu-entry-row { display: flex; flex-direction: row; gap: 10px; align-items: center; }
	.menu-entry-row p { overflow: visible; }
	.entry-arrow { width: 46px; height: 24px; }
	.franch1-menu-header{font-size:48px;font-family:PPPangramSans-Semibold;color:#000000;}
	.franch1-menu-entry{position: relative; font-size:22px;font-family:PPPangramSans-CompactRegular;color:#000000; overflow: visible; white-space: nowrap; }
	.carousel-item { align-items: center; position: absolute; justify-content: center; opacity: 0; visibility: hidden; transition: visibility 0s, opacity: 0.5s linear; }
	.carousel-item.active {
		opacity: 1;
		visibility: visible;
		transition: visibility 0s linear 0s, opacity 0.5s linear;
	}
	.control-arrow-right { position: absolute; top: 42%; left: 89.5%; white-space: nowrap; cursor: pointer; }
	.control-arrow-left { position: absolute; top: 42%; left: 8.5%; white-space: nowrap; cursor: pointer; }
	.image-list-header { font-size: 48px; font-family: PPPangramSans-Bold; color: #000000; }
	.image-list-entry { font-size: 24px; font-family: PPPangramSans-CompactRegular; color: #000000; }
	.circle-container { padding: 10px; display: flex; flex-direction: column; align-items: center; }
	.shop-circle { position: relative; border-radius: 50%; line-height: 0; box-sizing: content-box; padding: 6px; width: 185px; height: 185px; overflow: hidden; justify-content: center; align-items: center;}
	.shop-circle:hover { outline: 2px solid orange; }
	.image-circle { object-fit: contain; display: block; border-radius: 50%; }
	.faceheader1 { font-family: PPPangramSans-CompactRegular; }
	.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  align-items: center;
  justify-content: center;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #FFFFFF;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 55%;
  justify-content: center;
  align-items: center;
  position: fixed;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  display: none;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.carousel {
  position: relative;
  align-items: center;
  justify-content: center;
}

.gallery {
  display: none;
}

.gallery img {
  width: 100%;
  display: none;
}

.gallery img.active {
 display: block;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
	left: 0%;
}

.hm-caption
{
	font-size: 25px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.akcii-header-block { width: 100%; padding: 10px; background-color: white; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; display: none; }
.akcii-header { font-size: 60px;font-family: Ovsyanka; color: black; }
.akcii-entry { font-size: 25px; font-family: PPPangramSans-NarrowSemibold; color: white; margin-left: 25px; margin-top: -10%; }
.akcia75 { width: 50%; height: auto; margin-left: -35%; }
div p { max-width: 90%; overflow: auto; }
#page3-div { background-image: url('draft-web-content/bg-draft.png'); background-position: center bottom; flex-direction: column; justify-content: center; align-items: center; }
#pageerror-div { background-image: url('draft-web-content/bg-draft.png'); background-position: center bottom; flex-direction: column; }
#page4-div { background-color: white; justify-content: center; align-items: center;}
#franch1-div { background-color: white; gap: 15px; padding: 10px; }
#franch2-div { background-color: white; }
.franch2-container
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	overflow: hidden;
}
.embedded-page-div
{
	min-height: 0px;
}
#franch3-div { background-color: white; display: none; }
#franch4-div { background-color: white; }
.franch1-grid1 { display: grid; grid-template-columns: repeat(3, 1fr); width: 90%; }
.franch1-grid2, .franch1-grid3 { display: flex; flex-direction: row; width: 90%; gap: 40px; align-items: center; justify-content: flex-start; }
.franch1-grid1-sub { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.franch1-additional-grids { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
.franch1-entry-image { width: 150px; height: 150px; }
.franch1-grid-image { width: 150px; height: 150px; }
.franch2-header, .franch3-header { display: flex; flex-direction: row; gap: 15px; align-items: center; justify-content: center; }
.franch4-row1, .franch4-row2, .franch4-row3 { position: relative; display: flex; flex-direction: column; padding: 20px; justify-content: center; align-items: center; width: 90%; }
.franch4-grid1, .franch4-grid2, .franch4-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); width: 90%; grid-gap: 15px;}
.franch4-grid1-entry, .franch4-grid2-entry, .franch4-grid3-entry { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
.franch4-sidepanel1 { position: absolute; right: 5.9%; bottom: 7%; height: 50%; }
.franch4-sidepanel2 { position: absolute; left: 5.9%; top: -7.5%; height: 50%; }
.franch4-bottompanel { width: 90%; margin-top: 10px; }
.franch4-pageimg { z-index: 2; }
#page6-div { background-color: white; flex-direction: column;}
#page7-div
{
	display: block;
	width: 100vw;
	background-image: url('draft-web-content/pv2026-banner-shrinked.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 112px;
}
#franch1-div
{
	/*margin-top: 112px;*/
}
.action-container
{
	display: flex;
	flex-direction: column;
}

.action-info
{
	max-width: 700px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
	font-family: sans-serif;
	font-weight: 400;
	text-wrap: nowrap;
	overflow: hidden;
	color: black;
}

.action-header
{
	text-transform: uppercase;
	font-size: 72px;
	font-weight: bold;
	margin-bottom: 10px;
	padding-left: 88px;
}

.action-logo
{
	margin-bottom: 40px;
}

.action-exclamation
{
	font-weight: bold;
	font-size: 40px;
	text-wrap: wrap;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}

.action-discount
{
	font-size: 140px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	-webkit-text-stroke: 12px black;
	paint-order: stroke fill;
	text-shadow:
        4px 4px 0 black,
       -4px 4px 0 black,
        4px -4px 0 black,
       -4px -4px 0 black;
	color: red;
	margin-bottom: 20px;
	overflow: visible;
}

.action-description
{
	font-size: 40px;
	line-height: 1.5;
	font-weight: bold;
}

.action-terms
{
	font-family: sans-serif;
	font-size: 36px;
}


#page8-div { background-color: white; }
#page9-div { background-image: url('draft-web-content/bg-draft.png'); }
.logo-row { display: grid; grid-template-columns: repeat(2, 1fr); width: 80%; grid-gap: 10px; padding: 10%; }
.logo0 { display: block; border-radius: 15px; padding: 5px; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; transition: 0.2s; }
.logo0:hover { outline: 2px solid orange; }
#ukraine { width: 65%; height: auto; }
#magaz { width: 65%; height: auto; }
#page1-description { white-space: normal; }
.page5-menu-header { white-space: normal; }
.page5-menu-entry { white-space: normal; }
.dropdown-content { left: 13%; top: 112px; display: none; position: absolute; background-color: orange; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5; font-family: PPPangramSans-CompactRegular; font-size: 18px; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #ddd; }
#page0-div { flex-direction: column; }
.logo-splash { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 2s linear; }
.age-disclaimer { font-family: PPPangramSans-Bold; font-size: 20px; }
.age-modal {
  display: none;
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.thanks-modal {
  display: none;
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.age-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.thanks-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.yes-button, .no-button, .ok-button {
  padding: 10px;
  margin: 10px;
  display: inline-block;
  border-radius: 20%;
  cursor: pointer;
  right: 0;
  bottom: 0;
  color: white;
  font-family: PPPangramSans-Bold;
}
.yes-button {
  background-color: green;
}

.no-button {
  background-color: red;
}

.ok-button {
	background-color: green;
}

.circle-grid { width: 80%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; align-items: center; text-align: center; }
.page4-images { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; width: 75%; }

.pagec-header {font-size:48px;font-family:PPPangramSans-Semibold;color:#000000;}
.pagec-header-block { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px;}
.pagec-text { position: relative; font-size:25px;font-family:PPPangramSans-CompactRegular;color:#000000; white-space: pre; overflow: visible; }
.pagec-container { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; width: 100%; }
.pagec-block { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.pagec-text-block { margin: 10px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.contact-form { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.contact-button { position: relative; display: inline-block; background-color: orange; border-radius: 15%; font-family: PPPangramSans-Bold; padding: 15px; cursor: pointer; transition: 0.5s; }
.contact-button:hover { color: white; }
#contactmessage { width: 350px; height: 150px; }
#contactname, #contactphone, #contactemail { width: 350px; height: 25px; font-size: 20px; }
.header-row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2%; width: 80%; left: 3%; }
.page3-description { position: relative; display: flex; flex-direction: row; top: -100px;}
.div-delimiter { width: 100%; left: 0; bottom: 0; position: absolute; }
.akcii-orange-row { width: 100%; margin-top: -10px; }
.akcii-description { background-color: transparent; display: flex; flex-direction: column; gap: 15px; width: 100%; justify-content: center; align-items: center; }
.bottom-ad-banner { position: fixed; left: 0; bottom: 0; height: 70px; width: 100%; display: flex; flex-direction: column; z-index: 20; padding: 0; border-top: 1px solid orange; border-bottom: 1px solid orange; cursor: pointer; }
.ad-header { position: relative; display: flex; flex-direction: row; width: 100%; height: 50%; align-items: center; background-color: white; }
.ad-footer { position: relative; display: flex; flex-direction: row; width: 100%; height: 50%; background-image: url("draft-web-content/new/ad-banner-bg.png"); background-size: cover; align-items: center; }
.ad-header img { height: 100%; width: auto; }
.ad-footer p { font-family: PPPangramSans-Bold; font-size: 18px; overflow: visible; }
.psquare-small { width: 17px; height: 17px; }
#ad-close-circle { position: absolute; right: 1%; top: 25%; bottom: 50%; width: 35px; height: 35px; }
.contacts-offset { display: none; }
.menu-xs { display: none; }
.menu-entry-ordering { display: flex; flex-direction: column; gap: 20px; }
#menu-entry-privacy { display: none; }

ol, ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.popup-social
{
	z-index: 30;
	position: fixed;
	right: 20px;
	bottom: 16px;
	max-width: 75px;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 25px;
	justify-content: center;
	background-color: transparent;
}

.popup-social:hover .popup-social-menu, .popup-social:focus .popup-social-menu
{
	height: calc(56px * 6);
}

.popup-social .callback-icon
{
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%
}

.popup-social-menu
{
	display: flex;
	height: 0px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	transition: 1s;
	overflow: hidden;
}

.social-menu-href
{
	background-color: inherit;
	color: inherit;
}

.popup-social-hidden
{
	display: none;
}

.popup-social-menu-entry
{
	padding: 4px;
	width: 56px;
	height:56px;
}

.social-entry-icon
{
	width: 48px;
	height: 48px;
}

@media (max-width: 768px) {
	.akcii-header-block { position: absolute; top: 5%; }
	.page-div { background-size: cover; }
    .ft42 {
        font-size: 24px;
    }
    .ft43 {
        font-size: 16px;
    }
	.action-loyalty-image
	{
		width: 60%;
	}
    #logodb, #logobm {
        left: 20%;
        top: 10px;
		height: auto;
		width: 90%;
    }
    .logo-row { grid-template-columns: repeat(1, 1fr); }
	#page3-div {
		background-position: center right;
	}
	#page8-div {
		background-position: center right;
	}
	.hm-caption { font-size: 13px; }
    .header-menu { background-image: url('draft-web-content/bg-header-clean.png'); height: 50px; }
	.header-row { display: none; width: 40%; position: absolute; grid-template-columns: repeat(1, 1fr); background-color: orange; height: 190px; left: 55%; top: 50px; padding: 5px; }
	.header-row-grid { display: grid; }
	.page4-images { grid-template-columns: repeat(1, 1fr); grid-gap: 10px; }
	.orange-column { height: 260px; width: 5px; }
	.image-list-header { font-size: 35px; }
	.headermenu { font-size: 12px; }
	.page5-menu-header { font-size: 28px; }
	.page5-menu-entry { left: 0; font-size: 20px; }
	.franch1-menu-entry { font-size: 18px; }
	#franch1-page { background-position: center left; }
	.logo-splash { width: 80%; left: 10%; height: auto; }
	.circle-grid { grid-template-columns: repeat(1, 1fr); width: 70%; }
	.pagec-container { grid-template-columns: repeat(1, 1fr); grid-gap: 15px; }
	.dropdown-content { left: 5%; }
	.pagec-block { left: 0; justify-content: flex-start; }
	.pagec-container { left: 4%; }
	.pagec-header { font-size: 28px; }
	#page9-div { background-image: url('draft-web-content/bg-draft.png'); background-position: center right; }
	.franch1-grid1 { grid-template-columns: repeat(1, 1fr); width: 90%; grid-gap: 15px; }
	.franch1-grid2, .franch1-grid3 { display: flex; flex-direction: column; gap: 13px; align-items: center; justify-content: center; }
	.franch1-menu-entry { margin: 0; padding: 0; }
	.franch1-grid-image { width: 150px; height: 150px; }
	.hmdot { width: 15px; height: 15px; }
	.draft-logo-circle { display: none; }
	.draft-logo-large { display: block; height: 35px; width: auto; position: absolute; left: 1%; }
	.menu-xs { display: block; height: 50px; width: 50px; right: 1%; position: absolute; }
	.franch4-sidepanel1, .franch4-sidepanel2 { display: none; }
	.franch4-grid1, .franch4-grid2, .franch4-grid3 { grid-template-columns: repeat(1, 1fr); }
	.psquare-small { width: 10px; height: 10px; }
	.entry-arrow { width: 23px; height: 12px; }
	.contacts-offset { display: inline; }
	.franch1-menu-entry { white-space: normal; }
	.nomobile { display: none; }
	.ft-draft { white-space: normal; }
	.franch1-additional-grids { align-items: center; }
	#i9circle { padding-right: 119px; }
	.menu-entry-row { align-self: flex-start; }
	#franch4-div .page5-menu-entry { align-self: flex-start; }
	#menu-entry-privacy { display: block; }
	#franch3-div
	{
		display: flex;
	}
	#page7-div
	{
		background-image: url('draft-web-content/pv2026-mobile.jpg');
		background-position-y: -5px;
		margin-top: 50px;
	}
	#franch1-div
	{
		/*margin-top: 50px;*/
	}
	.franch2-flex2
	{
		display: none;
	}

	.action-container
	{
		display: flex;
	}

	.action-info
	{
		align-items: center;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.action-header
	{
		font-size: 32px;
		padding-right: 100px;
		margin-bottom: 0px;
	}
	.action-logo
	{
		display: block;
		width: 75%;
		height: auto;
		margin-bottom: 40px;
	}
	.action-exclamation
	{
		text-transform: uppercase;
		font-size: 28px;
		text-align: center;
		margin-bottom: 40px;
	}
	.action-discount
	{
		font-size: 80px;
		margin-bottom: 72px;
		padding-left: 32%;
		font-weight: 600;
	}

	.action-discount1
	{
		margin-bottom: 228px;
	}

	.action-discount2
	{
		margin-bottom: 16px;
	}

	.action-description
	{
		font-size: 28px;
		line-height: 1.5;
	}

	.action-terms
	{
		font-size: 16px;
	}
	
}

@media (max-height: 768px) and (orientation: landscape) {
	.page-div { background-size: cover; padding: 15px; }
	.ft42 {
        font-size: 24px;
    }
    .ft43 {
        font-size: 16px;
    }
	.akcii-header { font-size: 30px; }
	.akcii-entry { font-size: 20px; }
	.image-list-header { font-size: 35px; }
	.headermenu { font-size: 12px; }
	.header-menu { background-position: center right; height: 60px; }
	.page7-div { margin-top: 60px; }
	.header-row { left: 2%; }
	.page5-menu-header { font-size: 27px; }
	.page5-menu-entry { left: 0; font-size: 17px; }
	.franch1-menu-entry { font-size: 18px; }
	.logo-row { grid-template-columns: repeat(1, 1fr); }
	.page3-description { top: -50px; }
	#page9-div { background-image: url('draft-web-content/bg-draft.png'); background-position: center right; }
	.dropdown-content { left: 10%; top: 60px; }
	.pagec-container { grid-template-columns: repeat(2, 1fr); align-items: center; justify-content: center; }
	.pagec-block { justify-content: flex-start; }
	.pagec-text { font-size: 19px; }
	.franch1-grid-image { width: 190px; height: 190px; }
	.hmdot { width: 15px; height: 15px; }
	.draft-logo-circle { width: 55px; height: 55px; }
	.franch4-sidepanel1, .franch4-sidepanel2 { display: none; }
	.franch4-pageimg { width: 204px; height: 110px; }
	.franch4-pageimg-circle { width: 110px; height: 110px; }
	.psquare-small { width: 13px; height: 13px; }
	.entry-arrow { width: 35px; height: 18px; }
	.orange-column { height: 200px; width: 4px; }
	.action-info
	{
		row-gap: 30px;
	}
	.action-exclamation
	{
		font-size: 60px;
	}
}