* {margin: unset; padding: unset; font-size: unset; line-height: unset; font-weight: unset; background: unset; color: unset; outline: unset; box-shadow: unset; text-align: unset; border: unset; box-sizing: border-box;}
.DialogModal {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0,0,0,0.2);}
.DialogBox {padding: 50px; margin: auto; text-align: center;}
.DialogHead {width: 100%; color: white;}
.DialogContent {margin: auto; padding: 20px; background: white; overflow: auto; text-align: left;}
.DialogBox .CloseCross {position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: black; cursor: pointer;}
.DialogBox .CloseCross svg {width: 26px; height: 26px; margin-top: 2px;}
.DialogBox .CloseCross rect {fill: white;}

@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.DialogModal {display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(6px); overflow: auto; background: rgba(0,0,0,0.5);}
.DialogBox {padding: 0; margin: auto !important; max-height: 90%;}

.DialogHead {display: flex; background: var(--green); align-items: center; padding: 0 23px 0 86px; min-height: 82px; border-radius: 20px 20px 0 0;}
.DialogHead .Icon {margin-right: 17px;}
.DialogHeadText {flex: 1; font-size: 135%; font-weight: bold; text-align: left; text-transform: uppercase;}
.DialogContent {padding: 43px 86px; border-radius: 0 0 20px 20px; font-size: 120%; background: var(--light);}
.DialogModal .CloseCross {display: none;}
.DialogContent, .DialogHead {width: 925px; margin: auto;}
.DialogHead.DialogForDeletion {background: var(--orange);}

.DialogContent ul, .DialogContent ol {margin: 18px;}
.DialogContent ul {list-style: disc;}
.DialogContent li {padding-left: 10px;}
@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.GalleryDialog {backdrop-filter: blur(10px); background-color: rgba(0,0,0,0.5);}
.GalleryDialog .DialogBox {padding: 5px;}
.GalleryDialog .DialogBox, .GalleryDialog .DialogContent {height: 100%;}
.GalleryDialog .DialogContent {position: relative; background: none; overflow: hidden;}
.GalleryDialog .GalleryImages {position: absolute; top: 0; right: 0; width: 100px; height: 100%; overflow: auto;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: black no-repeat center center; background-size: contain; border: 2px solid black;}
.GalleryDialog .MainImage {position: absolute; left: 0; top: 0; width: calc(100% - 110px); height: 100%;}
.GalleryDialog .MainImage :is(video, img, iframe) {object-position: center center; object-fit: contain; width: 100%; height: 100%;}
.GalleryDialog .SideImage {height: 100px; margin-bottom: 10px; cursor: pointer; opacity: 0.5;}
.GalleryDialog .SideImage.Active, .GalleryDialog .SideImage:hover {opacity: 1;}
.GalleryDialog .Arrow {position: absolute; top: 0; height: 100%; width: 100px; background: no-repeat; cursor: pointer; opacity: 0.3;}
.GalleryDialog .Arrow.Previous {left: 0;/* background-image: url(%core-pathi%GalleryArrowPrevious.png); background-position: left center;*/}
.GalleryDialog .Arrow.Next {right: 0;/* background-image: url(%core-pathi%GalleryArrowNext.png); background-position: right center;*/}
.GalleryDialog .MainImage:hover .Arrow {opacity: 1;}
.GalleryDialog [data-type="first"] .Arrow.Previous {display: none;}
.GalleryDialog [data-type="last"] .Arrow.Next {display: none;}

.GalleryDialog[data-view="portrait"] .GalleryImages {right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: 100px; white-space: nowrap; overflow-y: hidden;}
.GalleryDialog[data-view="portrait"] .SideImage {display: inline-block; white-space: nowrap; width: 100px; height: 100%; margin-bottom: 0; margin-right: 10px;}
.GalleryDialog[data-view="portrait"] .MainImage {width: 100%; height: calc(100% - 110px);}

.GalleryDialog .CloseCross {right: 121px; top: 10px; background-color: white;}
.GalleryDialog .CloseCross rect {fill: black;}
.GalleryDialog[data-view="portrait"] .CloseCross {right: 10px;}

.GalleryDialog .DialogContent {width: 90vw;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: transparent; border: none;}
.GalleryDialog .SideImage {background-position: center center; background-size: cover;}
.GalleryDialog .GalleryImages {width: 200px;}
.GalleryDialog .SideImage {height: 100px;}
.GalleryDialog .MainImage {width: calc(100% - 210px); border: 3px solid var(--green); border-radius: 30px;}
.GalleryDialog .DialogBox .CloseCross {display: block; right: 320px; top: 20px; box-shadow: 0 0 20px black;}:root {
    --bg-color: #fff;
    --font-color: black;
    --padding-from-sides: 15px;

    --container-border-radius: 15px;

    --grid-lines-width: 1px;
    --grid-color: #cccccc;

    --min-grid-cell-width: 60px;
    --max-grid-cell-width: 80px;

    --grid-cell-horizontal: 0;
    --grid-cell-width: 70px;
    --grid-cell-height: calc(var(--grid-cell-width) / 1.5);

    --orange: #ff931e;
    --blueish: #bdccd4;

    --anim-duration: 150ms;

    --container-width: auto;
}

* {box-sizing: border-box;}

html, body {scroll-behavior: smooth;}

html, body, button, input, a {font-family: SFProDisplay, sans-serif; font-weight: 300; color: var(--font-color);}
body {font-size: 18px; line-height: 120%; background: var(--bg-color);}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

h1, h2 {font-family: PPRader, sans-serif;}
h1 {font-size: calc(var(--grid-cell-height) * 0.9); font-weight: normal; line-height: calc(var(--grid-cell-height) * 1.05); max-width: 95%;}
h2 {font-size: 30px; font-weight: normal; margin-bottom: 5px; line-height: normal;}
h3 {font-size: 24px; font-weight: bold;}
h4 {font-size: 18px; font-weight: bold;}

h2 a {font-family: inherit; font-size: inherit; color: inherit;}

.Text {
    --blocks-margin-down: 24px;
}
.Text {padding-bottom: 15px;}
.Text, .Text :is(p, ul, ol) {font-weight: 200; font-size: 22px; line-height: 150%;}
.Text :is(p, ul, ol, .MediaGallery):not(:last-child) {margin-bottom: var(--blocks-margin-down);}
.Text :is(ul, ol) {padding-left: 25px;}
.Text a {font-weight: normal; text-decoration: underline;}
.Text a:hover {text-decoration: none;}
.Text:has(+ .ContentTable), .Text:has(+ h2) {padding-bottom: 25px;}
.Text .MediaItem {display: flex;}
.MediaGallery img {max-width: 100%; height: auto;}

strong {font-weight: bold;}

.Container {width: var(--container-width); margin: var(--padding-from-sides); border: var(--grid-lines-width) solid var(--grid-color); border-radius: var(--container-border-radius); position: relative; overflow: hidden;}

header {position: absolute; left: 0; top: 0; width: 100%; display: flex; z-index: 2;}
header.Scrolled {position: fixed; left: var(--padding-from-sides); right: var(--padding-from-sides); width: calc(100% - var(--padding-from-sides) - var(--padding-from-sides)); border-left: var(--grid-lines-width) solid var(--grid-color);}
header.Scrolled .VisibleMenu a:last-child, header.Scrolled .CompactMenu {border-right: var(--grid-lines-width) solid var(--grid-color);}
header.Scrolled :is(#Logo, .CompactMenu), header.Scrolled .VisibleMenu a {background: var(--bg-color);}

#Logo {width: calc(var(--grid-cell-width) * 3); height: calc(var(--grid-cell-height) * 2); display: flex; border-right: var(--grid-lines-width) solid var(--grid-color); border-bottom: var(--grid-lines-width) solid var(--grid-color); align-items: center; justify-content: center; transition: var(--anim-duration) height, var(--anim-duration) width; background-color: white;}
#Logo .MainLogo {width: 80%; height: auto; transition: var(--anim-duration) width;}
header.Scrolled #Logo .MainLogo {width: 60%; height: auto;}
header.Scrolled #Logo {height: var(--grid-cell-height);}

header .VisibleMenu {flex: 1; display: flex;}
header .VisibleMenu a {display: flex; align-items: center; justify-content: center; height: var(--grid-cell-height); flex: 1; background-color: white;}
header .VisibleMenu a:not(:last-child) {border-right: var(--grid-lines-width) solid var(--grid-color);}
header .VisibleMenu a {position: relative; border-bottom: var(--grid-lines-width) solid var(--grid-color); font-size: 22px;}
header .VisibleMenu a::before {position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 0 9999px 9999px 0; background: #ffd800; z-index: 0; content: ''; opacity: 0; transition: var(--anim-duration) opacity;}
header .VisibleMenu a span {position: relative; z-index: 1;}
header .VisibleMenu a:hover::before {opacity: 1;}
header .VisibleMenu a:hover {text-decoration: none;}

header .BurgerMenuBtn {display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: var(--grid-cell-width); height: var(--grid-cell-height); cursor: pointer;}
header:not(.Scrolled) .BurgerMenuBtn {border-radius: 0 var(--container-border-radius) 0 0; overflow: hidden;}
header.MenuOpened .BurgerMenuBtn {background: #ffd800;}
header .BurgerMenuBtn span {display: block; height: 1px; background: black; width: 40%;}

header .CompactMenu {position: relative; height: var(--grid-cell-height);}
header .CompactMenu .OpenedMenu {position: absolute; right: 0; top: 100%; width: calc(var(--grid-cell-width) * 3); height: 0; background: #ffd800; transition: var(--anim-duration) height; overflow: hidden;}
header .CompactMenu .OpenedMenu > div {padding: 15px;}
header .CompactMenu .OpenedMenu a {display: flex; height: var(--grid-cell-height); align-items: center;}
header.MenuOpened .CompactMenu .OpenedMenu {height: calc(var(--grid-cell-height) * 6 + 30px);}
header .CompactMenu a.Active {padding-left: 15px; padding-right: 15px; background-color: #e6764e; margin-left: -15px; width: calc(100% + 30px);}

.FullGrid {min-height: 500px; background: url('/Grace/Projects/Zofinka/Design/Images/GridCell.svg'); background-size: var(--grid-cell-width) var(--grid-cell-height); background-position: left top;}
.FullGrid h2 {height: var(--grid-cell-height); display: flex; align-items: center; padding: 0 15px; border-radius: 0 99999px 99999px 0; background: var(--grid-color); line-height: 100%; scroll-margin-top: var(--grid-cell-height);}
.FullGrid h2.DoubleHeight {height: calc(var(--grid-cell-height) * 2);}

.ContentTable {overflow: hidden; border-radius: 20px; margin-bottom: 25px; margin-top: -1px;}
.ContentTable table {border-collapse: collapse;}
.ContentTable th {font-weight: bold;}
.ContentTable :is(th, td):not(:last-child) {border-right: var(--grid-lines-width) solid var(--grid-color);}
.ContentTable tr:not(:last-child) :is(th, td) {border-bottom: var(--grid-lines-width) solid var(--grid-color);}
.ContentTable.OrangeTable {background: var(--orange);}
.ContentTable.BluishTable {background: var(--blueish);}
.ContentTable.BluishTable :is(th, td) {border-right-color: white;}
.ContentTable :is(th, td) {width: calc(var(--grid-cell-width)); height: calc(var(--grid-cell-height)); font-size: 12px; line-height: normal; padding: 12px 5px 0 12px; vertical-align: top;}
.ContentTable :is(th, td)[data-cols="2"] {width: calc((var(--grid-cell-width)) * 2);}
.ContentTable :is(th, td)[data-cols="3"] {width: calc((var(--grid-cell-width)) * 3);}
.ContentTable :is(th, td)[data-cols="4"] {width: calc((var(--grid-cell-width)) * 4);}
.ContentTable :is(th, td)[data-cols="5"] {width: calc((var(--grid-cell-width)) * 5);}
.ContentTable :is(th, td)[data-cols="6"] {width: calc((var(--grid-cell-width)) * 6);}
.ContentTable :is(th, td)[data-rows="2"] {height: calc((var(--grid-cell-height)) * 2);}
.ContentTable :is(th, td)[data-rows="3"] {height: calc((var(--grid-cell-height)) * 3);}
.ContentTable :is(th, td)[data-rows="4"] {height: calc((var(--grid-cell-height)) * 4);}
.ContentTable :is(th, td)[data-rows="5"] {height: calc((var(--grid-cell-height)) * 5);}
.ContentTable :is(th, td)[data-rows="6"] {height: calc((var(--grid-cell-height)) * 6);}
.ContentTable :is(th, td)[data-cols="rest-3"] {width: calc((var(--grid-cell-width)) * (var(--grid-cell-horizontal) - 3));}

.InContentImage {padding-bottom: 25px;}
.InContentImage img {width: 100%; height: auto;}

video {max-width: 100%;}

/*.ContentTable {transform: translateX(30px);}*/

@media (max-width: 1024px) {
    header .VisibleMenu {display: none;}

    header .CompactMenu {border-bottom: var(--grid-lines-width) solid var(--grid-color); flex: 1;}
    header .CompactMenu .BurgerMenuBtn {margin-left: auto; margin-right: 0; border-left: var(--grid-lines-width) solid var(--grid-color); }

    h1 {font-size: 32px; line-height: 100%; padding: 5px 0 15px 0;}
}

@media (max-width: 1024px) {
    .DesktopOnly {display: none;}
}

@media (min-width: 1024px) {
    .MobileOnly {display: none;}

    .ContentTable th {font-size: 16px;}
    .ContentTable td {font-size: 16px;}
}

.BigGuysContent img {max-width: 300px;}@media (min-width: 1024px) {
	:root {
		--min-grid-cell-width: 60px;
		--max-grid-cell-width: 70px;

		--padding-from-sides: 40px;
		--container-border-radius: 40px;

		--grid-lines-width: 2px;
	}

	h2 {font-size: 38px;}

	header .CompactMenu {display: none;}
	#Logo {width: calc(var(--grid-cell-width) * 4);}

	header .VisibleMenu a.Active::before {transition-property: background-color;}
	header .VisibleMenu a.Active:not(:hover)::before {background-color: #e6764e; opacity: 1;}
}

@media (min-width: 1300px) {
	:root {
		--min-grid-cell-width: 80px;
		--max-grid-cell-width: 100px;
	}
}@font-face {
    font-family: PPRader;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/PPRader-Regular.otf);
    font-weight: normal;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Light.ttf);
    font-weight: 200;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Regular.ttf);
    font-weight: normal;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Bold.ttf);
    font-weight: bold;
    font-display: fallback;
}.GalleryImage img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.GalleryPageImages {display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.GalleryPageImages .FirstBigImage {grid-column: span 2;}

.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage {position: relative;}
/*.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage::after {position: absolute; right: 10px; bottom: 10px; content: ''; background-image: url(/Grace/Projects/Zofinka/Design/Images/WinnerEntry.png); background-size: 100% 100%; width: 150px; height: 150px;}
@media (max-width: 768px) {
	.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage::after {width: 100px; height: 100px;}
}*/.NewsImage {display: block;}
.NewsImage img {width: 100%; height: 100%; object-fit: contain; object-position: center;}#Intro {text-align: center;}
#Intro .Image {display: flex;}
#Intro img, #Intro picture {width: 100%; height: auto; max-height: 90vh; object-fit: cover; object-position: center; z-index: -1; position: relative;}

.FullGrid {border-top: var(--grid-lines-width) solid var(--grid-color);}

.OrangeHeading {padding: 0 25px 0 5px; background-color: #e6764e; border-radius: 0 9999px 9999px 0; width: max-content;}
.LeadingOrangeButton {display: inline-block; padding: 5px 25px 5px 5px; background-color: #e6764e; border-radius: 0 9999px 9999px 0; width: max-content; cursor: pointer; margin: 10px 0; font-weight: bold;}

@media (max-width: 1024px) {
	h1 {padding-left: 10px; padding-right: 10px;}
	.FullGrid {}
	.FullGrid .Text {padding-left: 10px; padding-right: 10px;}

	.GraphicsSide .Graphics {display: none;}

	#Intro img {margin-top: 50px;}

	.WebLogos {display: flex; gap: 15px; flex-direction: column; align-items: flex-start; padding: 25px 15px;}
	.WebLogos img {height: 27px; width: auto;}
	.WebLogos [href*="onplanlab.com"] img {height: 35px;}
}

@media (min-width: 1024px) {
	.InGridContent {display: grid; grid-template-columns: 1fr calc(var(--grid-cell-width) * 8); width: calc(var(--grid-cell-width) * 14); margin-left: auto; margin-right: auto;}

	.FullGrid {display: grid; grid-template-columns: var(--grid-cell-width) 1fr var(--grid-cell-width); padding-top: var(--grid-cell-height);}
	.FullGrid::before, .FullGrid::after {display: block; content: '';}

	.WebLogos {display: flex; justify-content: space-between; align-items: center; border-top: 1px solid black; padding-left: 15px; padding-right: 15px;}
	.WebLogos img {height: 27px; width: auto;}
	.WebLogos [href*="onplanlab.com"] img {height: 40px;}

	.ContentSide .Text {padding-left: 2px;}
	.GraphicsSide {position: relative;}

	.GraphicsSide .Graphics {position: absolute; display: none;}
	.GraphicsSide .GraphicsHalfCircle {height: auto; width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsFactory {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsHalfCircleVertical {height: calc(var(--grid-cell-height) * 7); width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsTriangle {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 4);}
	.GraphicsSide .GraphicsBridge {height: calc(var(--grid-cell-height) * 3.3); width: calc(var(--grid-cell-width) * 3);}
	.GraphicsSide .GraphicsDuo {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 3);}
}

@media (min-width: 1300px) {
}
.DialogModal {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0,0,0,0.2);}
.DialogBox {padding: 50px; margin: auto; text-align: center;}
.DialogHead {width: 100%; color: white;}
.DialogContent {margin: auto; padding: 20px; background: white; overflow: auto; text-align: left;}
.DialogBox .CloseCross {position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: black; cursor: pointer;}
.DialogBox .CloseCross svg {width: 26px; height: 26px; margin-top: 2px;}
.DialogBox .CloseCross rect {fill: white;}

@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.DialogModal {display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(6px); overflow: auto; background: rgba(0,0,0,0.5);}
.DialogBox {padding: 0; margin: auto !important; max-height: 90%;}

.DialogHead {display: flex; background: var(--green); align-items: center; padding: 0 23px 0 86px; min-height: 82px; border-radius: 20px 20px 0 0;}
.DialogHead .Icon {margin-right: 17px;}
.DialogHeadText {flex: 1; font-size: 135%; font-weight: bold; text-align: left; text-transform: uppercase;}
.DialogContent {padding: 43px 86px; border-radius: 0 0 20px 20px; font-size: 120%; background: var(--light);}
.DialogModal .CloseCross {display: none;}
.DialogContent, .DialogHead {width: 925px; margin: auto;}
.DialogHead.DialogForDeletion {background: var(--orange);}

.DialogContent ul, .DialogContent ol {margin: 18px;}
.DialogContent ul {list-style: disc;}
.DialogContent li {padding-left: 10px;}
@media (max-width: 800px) {
	.DialogBox {padding: 20px;}
}

@media (max-width: 460px) {
	.DialogBox {padding: 5px;}
}

.GalleryDialog {backdrop-filter: blur(10px); background-color: rgba(0,0,0,0.5);}
.GalleryDialog .DialogBox {padding: 5px;}
.GalleryDialog .DialogBox, .GalleryDialog .DialogContent {height: 100%;}
.GalleryDialog .DialogContent {position: relative; background: none; overflow: hidden;}
.GalleryDialog .GalleryImages {position: absolute; top: 0; right: 0; width: 100px; height: 100%; overflow: auto;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: black no-repeat center center; background-size: contain; border: 2px solid black;}
.GalleryDialog .MainImage {position: absolute; left: 0; top: 0; width: calc(100% - 110px); height: 100%;}
.GalleryDialog .MainImage :is(video, img, iframe) {object-position: center center; object-fit: contain; width: 100%; height: 100%;}
.GalleryDialog .SideImage {height: 100px; margin-bottom: 10px; cursor: pointer; opacity: 0.5;}
.GalleryDialog .SideImage.Active, .GalleryDialog .SideImage:hover {opacity: 1;}
.GalleryDialog .Arrow {position: absolute; top: 0; height: 100%; width: 100px; background: no-repeat; cursor: pointer; opacity: 0.3;}
.GalleryDialog .Arrow.Previous {left: 0;/* background-image: url(%core-pathi%GalleryArrowPrevious.png); background-position: left center;*/}
.GalleryDialog .Arrow.Next {right: 0;/* background-image: url(%core-pathi%GalleryArrowNext.png); background-position: right center;*/}
.GalleryDialog .MainImage:hover .Arrow {opacity: 1;}
.GalleryDialog [data-type="first"] .Arrow.Previous {display: none;}
.GalleryDialog [data-type="last"] .Arrow.Next {display: none;}

.GalleryDialog[data-view="portrait"] .GalleryImages {right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: 100px; white-space: nowrap; overflow-y: hidden;}
.GalleryDialog[data-view="portrait"] .SideImage {display: inline-block; white-space: nowrap; width: 100px; height: 100%; margin-bottom: 0; margin-right: 10px;}
.GalleryDialog[data-view="portrait"] .MainImage {width: 100%; height: calc(100% - 110px);}

.GalleryDialog .CloseCross {right: 121px; top: 10px; background-color: white;}
.GalleryDialog .CloseCross rect {fill: black;}
.GalleryDialog[data-view="portrait"] .CloseCross {right: 10px;}

.GalleryDialog .DialogContent {width: 90vw;}
.GalleryDialog .MainImage, .GalleryDialog .SideImage {background: transparent; border: none;}
.GalleryDialog .SideImage {background-position: center center; background-size: cover;}
.GalleryDialog .GalleryImages {width: 200px;}
.GalleryDialog .SideImage {height: 100px;}
.GalleryDialog .MainImage {width: calc(100% - 210px); border: 3px solid var(--green); border-radius: 30px;}
.GalleryDialog .DialogBox .CloseCross {display: block; right: 320px; top: 20px; box-shadow: 0 0 20px black;}:root {
    --bg-color: #fff;
    --font-color: black;
    --padding-from-sides: 15px;

    --container-border-radius: 15px;

    --grid-lines-width: 1px;
    --grid-color: #cccccc;

    --min-grid-cell-width: 60px;
    --max-grid-cell-width: 80px;

    --grid-cell-horizontal: 0;
    --grid-cell-width: 70px;
    --grid-cell-height: calc(var(--grid-cell-width) / 1.5);

    --orange: #ff931e;
    --blueish: #bdccd4;

    --anim-duration: 150ms;

    --container-width: auto;
}

* {box-sizing: border-box;}

html, body {scroll-behavior: smooth;}

html, body, button, input, a {font-family: SFProDisplay, sans-serif; font-weight: 300; color: var(--font-color);}
body {font-size: 18px; line-height: 120%; background: var(--bg-color);}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

h1, h2 {font-family: PPRader, sans-serif;}
h1 {font-size: calc(var(--grid-cell-height) * 0.9); font-weight: normal; line-height: calc(var(--grid-cell-height) * 1.05); max-width: 95%;}
h2 {font-size: 30px; font-weight: normal; margin-bottom: 5px; line-height: normal;}
h3 {font-size: 24px; font-weight: bold;}
h4 {font-size: 18px; font-weight: bold;}

h2 a {font-family: inherit; font-size: inherit; color: inherit;}

.Text {
    --blocks-margin-down: 24px;
}
.Text {padding-bottom: 15px;}
.Text, .Text :is(p, ul, ol) {font-weight: 200; font-size: 22px; line-height: 150%;}
.Text :is(p, ul, ol, .MediaGallery):not(:last-child) {margin-bottom: var(--blocks-margin-down);}
.Text :is(ul, ol) {padding-left: 25px;}
.Text a {font-weight: normal; text-decoration: underline;}
.Text a:hover {text-decoration: none;}
.Text:has(+ .ContentTable), .Text:has(+ h2) {padding-bottom: 25px;}
.Text .MediaItem {display: flex;}
.MediaGallery img {max-width: 100%; height: auto;}

strong {font-weight: bold;}

.Container {width: var(--container-width); margin: var(--padding-from-sides); border: var(--grid-lines-width) solid var(--grid-color); border-radius: var(--container-border-radius); position: relative; overflow: hidden;}

header {position: absolute; left: 0; top: 0; width: 100%; display: flex; z-index: 2;}
header.Scrolled {position: fixed; left: var(--padding-from-sides); right: var(--padding-from-sides); width: calc(100% - var(--padding-from-sides) - var(--padding-from-sides)); border-left: var(--grid-lines-width) solid var(--grid-color);}
header.Scrolled .VisibleMenu a:last-child, header.Scrolled .CompactMenu {border-right: var(--grid-lines-width) solid var(--grid-color);}
header.Scrolled :is(#Logo, .CompactMenu), header.Scrolled .VisibleMenu a {background: var(--bg-color);}

#Logo {width: calc(var(--grid-cell-width) * 3); height: calc(var(--grid-cell-height) * 2); display: flex; border-right: var(--grid-lines-width) solid var(--grid-color); border-bottom: var(--grid-lines-width) solid var(--grid-color); align-items: center; justify-content: center; transition: var(--anim-duration) height, var(--anim-duration) width; background-color: white;}
#Logo .MainLogo {width: 80%; height: auto; transition: var(--anim-duration) width;}
header.Scrolled #Logo .MainLogo {width: 60%; height: auto;}
header.Scrolled #Logo {height: var(--grid-cell-height);}

header .VisibleMenu {flex: 1; display: flex;}
header .VisibleMenu a {display: flex; align-items: center; justify-content: center; height: var(--grid-cell-height); flex: 1; background-color: white;}
header .VisibleMenu a:not(:last-child) {border-right: var(--grid-lines-width) solid var(--grid-color);}
header .VisibleMenu a {position: relative; border-bottom: var(--grid-lines-width) solid var(--grid-color); font-size: 22px;}
header .VisibleMenu a::before {position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 0 9999px 9999px 0; background: #ffd800; z-index: 0; content: ''; opacity: 0; transition: var(--anim-duration) opacity;}
header .VisibleMenu a span {position: relative; z-index: 1;}
header .VisibleMenu a:hover::before {opacity: 1;}
header .VisibleMenu a:hover {text-decoration: none;}

header .BurgerMenuBtn {display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: var(--grid-cell-width); height: var(--grid-cell-height); cursor: pointer;}
header:not(.Scrolled) .BurgerMenuBtn {border-radius: 0 var(--container-border-radius) 0 0; overflow: hidden;}
header.MenuOpened .BurgerMenuBtn {background: #ffd800;}
header .BurgerMenuBtn span {display: block; height: 1px; background: black; width: 40%;}

header .CompactMenu {position: relative; height: var(--grid-cell-height);}
header .CompactMenu .OpenedMenu {position: absolute; right: 0; top: 100%; width: calc(var(--grid-cell-width) * 3); height: 0; background: #ffd800; transition: var(--anim-duration) height; overflow: hidden;}
header .CompactMenu .OpenedMenu > div {padding: 15px;}
header .CompactMenu .OpenedMenu a {display: flex; height: var(--grid-cell-height); align-items: center;}
header.MenuOpened .CompactMenu .OpenedMenu {height: calc(var(--grid-cell-height) * 6 + 30px);}
header .CompactMenu a.Active {padding-left: 15px; padding-right: 15px; background-color: #e6764e; margin-left: -15px; width: calc(100% + 30px);}

.FullGrid {min-height: 500px; background: url('/Grace/Projects/Zofinka/Design/Images/GridCell.svg'); background-size: var(--grid-cell-width) var(--grid-cell-height); background-position: left top;}
.FullGrid h2 {height: var(--grid-cell-height); display: flex; align-items: center; padding: 0 15px; border-radius: 0 99999px 99999px 0; background: var(--grid-color); line-height: 100%; scroll-margin-top: var(--grid-cell-height);}
.FullGrid h2.DoubleHeight {height: calc(var(--grid-cell-height) * 2);}

.ContentTable {overflow: hidden; border-radius: 20px; margin-bottom: 25px; margin-top: -1px;}
.ContentTable table {border-collapse: collapse;}
.ContentTable th {font-weight: bold;}
.ContentTable :is(th, td):not(:last-child) {border-right: var(--grid-lines-width) solid var(--grid-color);}
.ContentTable tr:not(:last-child) :is(th, td) {border-bottom: var(--grid-lines-width) solid var(--grid-color);}
.ContentTable.OrangeTable {background: var(--orange);}
.ContentTable.BluishTable {background: var(--blueish);}
.ContentTable.BluishTable :is(th, td) {border-right-color: white;}
.ContentTable :is(th, td) {width: calc(var(--grid-cell-width)); height: calc(var(--grid-cell-height)); font-size: 12px; line-height: normal; padding: 12px 5px 0 12px; vertical-align: top;}
.ContentTable :is(th, td)[data-cols="2"] {width: calc((var(--grid-cell-width)) * 2);}
.ContentTable :is(th, td)[data-cols="3"] {width: calc((var(--grid-cell-width)) * 3);}
.ContentTable :is(th, td)[data-cols="4"] {width: calc((var(--grid-cell-width)) * 4);}
.ContentTable :is(th, td)[data-cols="5"] {width: calc((var(--grid-cell-width)) * 5);}
.ContentTable :is(th, td)[data-cols="6"] {width: calc((var(--grid-cell-width)) * 6);}
.ContentTable :is(th, td)[data-rows="2"] {height: calc((var(--grid-cell-height)) * 2);}
.ContentTable :is(th, td)[data-rows="3"] {height: calc((var(--grid-cell-height)) * 3);}
.ContentTable :is(th, td)[data-rows="4"] {height: calc((var(--grid-cell-height)) * 4);}
.ContentTable :is(th, td)[data-rows="5"] {height: calc((var(--grid-cell-height)) * 5);}
.ContentTable :is(th, td)[data-rows="6"] {height: calc((var(--grid-cell-height)) * 6);}
.ContentTable :is(th, td)[data-cols="rest-3"] {width: calc((var(--grid-cell-width)) * (var(--grid-cell-horizontal) - 3));}

.InContentImage {padding-bottom: 25px;}
.InContentImage img {width: 100%; height: auto;}

video {max-width: 100%;}

/*.ContentTable {transform: translateX(30px);}*/

@media (max-width: 1024px) {
    header .VisibleMenu {display: none;}

    header .CompactMenu {border-bottom: var(--grid-lines-width) solid var(--grid-color); flex: 1;}
    header .CompactMenu .BurgerMenuBtn {margin-left: auto; margin-right: 0; border-left: var(--grid-lines-width) solid var(--grid-color); }

    h1 {font-size: 32px; line-height: 100%; padding: 5px 0 15px 0;}
}

@media (max-width: 1024px) {
    .DesktopOnly {display: none;}
}

@media (min-width: 1024px) {
    .MobileOnly {display: none;}

    .ContentTable th {font-size: 16px;}
    .ContentTable td {font-size: 16px;}
}

.BigGuysContent img {max-width: 300px;}@media (min-width: 1024px) {
	:root {
		--min-grid-cell-width: 60px;
		--max-grid-cell-width: 70px;

		--padding-from-sides: 40px;
		--container-border-radius: 40px;

		--grid-lines-width: 2px;
	}

	h2 {font-size: 38px;}

	header .CompactMenu {display: none;}
	#Logo {width: calc(var(--grid-cell-width) * 4);}

	header .VisibleMenu a.Active::before {transition-property: background-color;}
	header .VisibleMenu a.Active:not(:hover)::before {background-color: #e6764e; opacity: 1;}
}

@media (min-width: 1300px) {
	:root {
		--min-grid-cell-width: 80px;
		--max-grid-cell-width: 100px;
	}
}@font-face {
    font-family: PPRader;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/PPRader-Regular.otf);
    font-weight: normal;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Light.ttf);
    font-weight: 200;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Regular.ttf);
    font-weight: normal;
    font-display: fallback;
}
@font-face {
    font-family: SFProDisplay;
    src: url(/Grace/Projects/Zofinka/Design/Fonts/FontsFree-Net-SFProDisplay-Bold.ttf);
    font-weight: bold;
    font-display: fallback;
}.GalleryImage img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.GalleryPageImages {display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.GalleryPageImages .FirstBigImage {grid-column: span 2;}

.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage {position: relative;}
/*.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage::after {position: absolute; right: 10px; bottom: 10px; content: ''; background-image: url(/Grace/Projects/Zofinka/Design/Images/WinnerEntry.png); background-size: 100% 100%; width: 150px; height: 150px;}
@media (max-width: 768px) {
	.EntriesGallery:is([data-no="0"], [data-no="1"]) .FirstBigImage::after {width: 100px; height: 100px;}
}*/.NewsImage {display: block;}
.NewsImage img {width: 100%; height: 100%; object-fit: contain; object-position: center;}#Intro {text-align: center;}
#Intro .Image {display: flex;}
#Intro img, #Intro picture {width: 100%; height: auto; max-height: 90vh; object-fit: cover; object-position: center; z-index: -1; position: relative;}

.FullGrid {border-top: var(--grid-lines-width) solid var(--grid-color);}

.OrangeHeading {padding: 0 25px 0 5px; background-color: #e6764e; border-radius: 0 9999px 9999px 0; width: max-content;}
.LeadingOrangeButton {display: inline-block; padding: 5px 25px 5px 5px; background-color: #e6764e; border-radius: 0 9999px 9999px 0; width: max-content; cursor: pointer; margin: 10px 0; font-weight: bold;}

@media (max-width: 1024px) {
	h1 {padding-left: 10px; padding-right: 10px;}
	.FullGrid {}
	.FullGrid .Text {padding-left: 10px; padding-right: 10px;}

	.GraphicsSide .Graphics {display: none;}

	#Intro img {margin-top: 50px;}

	.WebLogos {display: flex; gap: 15px; flex-direction: column; align-items: flex-start; padding: 25px 15px;}
	.WebLogos img {height: 27px; width: auto;}
	.WebLogos [href*="onplanlab.com"] img {height: 35px;}
}

@media (min-width: 1024px) {
	.InGridContent {display: grid; grid-template-columns: 1fr calc(var(--grid-cell-width) * 8); width: calc(var(--grid-cell-width) * 14); margin-left: auto; margin-right: auto;}

	.FullGrid {display: grid; grid-template-columns: var(--grid-cell-width) 1fr var(--grid-cell-width); padding-top: var(--grid-cell-height);}
	.FullGrid::before, .FullGrid::after {display: block; content: '';}

	.WebLogos {display: flex; justify-content: space-between; align-items: center; border-top: 1px solid black; padding-left: 15px; padding-right: 15px;}
	.WebLogos img {height: 27px; width: auto;}
	.WebLogos [href*="onplanlab.com"] img {height: 40px;}

	.ContentSide .Text {padding-left: 2px;}
	.GraphicsSide {position: relative;}

	.GraphicsSide .Graphics {position: absolute; display: none;}
	.GraphicsSide .GraphicsHalfCircle {height: auto; width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsFactory {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsHalfCircleVertical {height: calc(var(--grid-cell-height) * 7); width: calc(var(--grid-cell-width) * 2);}
	.GraphicsSide .GraphicsTriangle {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 4);}
	.GraphicsSide .GraphicsBridge {height: calc(var(--grid-cell-height) * 3.3); width: calc(var(--grid-cell-width) * 3);}
	.GraphicsSide .GraphicsDuo {height: calc(var(--grid-cell-height) * 3); width: calc(var(--grid-cell-width) * 3);}
}

@media (min-width: 1300px) {
}.HPNews {display: grid; grid-template-columns: 1fr; gap: 25px; margin-bottom: 35px;}
.NewsItem h3 {font-weight: bold; margin-top: 10px; line-height: 125%;}

@media (min-width: 1024px) {
	.HPNews {grid-template-columns: 1fr 1fr;}
}