:root {
	--container-side: 67px;
	--container-pad: 86px 86px;
	--container-max-width: min(calc(100vw - var(--container-side) * 2), 1594px);

	--red: #EA504C;
	--text-color: white;
	--dark: black;
	--accent: #47B9B1;
}

* {box-sizing: border-box;}

html, body {scroll-behavior: smooth; overflow-x: clip; background: white; margin: 0;}

body, a, button, input, select, textarea {font-family: var(--font-inter); color: white; font-weight: normal;}

.Container {max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding: var(--container-pad);}

h1, h2, h3, h4, h5, h6 {margin-top: 0; font-weight: bold;}
h1, h2, h3, h4 {color: var(--dark);}
p, li, ul, ol {margin-top: 0;}
img {max-width: 100%;}
strong {font-weight: bold;}

h2 {font-size: 32px; line-height: 100%;}
h3 {font-size: 22px; line-height: 100%;}

.Text {
	--font-size: 17.75px;
	--block-margin: 20px;
	--in-block-pad: 5px;
}
.Text, .Text p, .Text li {font-size: var(--font-size);}
.Text :is(p, ul, ol, table, .MediaGallery) {margin-bottom: var(--block-margin);}
.Text :is(p, ul, ol, table, .MediaGallery):last-child {margin-bottom: 0;}

@media (min-width: 800px) {
	.MobileOnly {display: none !important;}
	.DesktopOnly {display: block;}

	h2 {font-size: 45px;}
	h3 {font-size: 30px;}
	.Text {
		--font-size: 25px;
	}
}
@media (min-width: 800px) and (max-width: 1400px) {
	:root {
		--container-pad: 60px;
	}
	h2 {font-size: 40px;}
	.Text {
		--font-size: 22px;
	}
}
@media (min-width: 800px) and (max-width: 1200px) {
	:root {
		--container-side: 35px;
		--container-pad: 35px;
	}
	h2 {font-size: 35px;}
	h3 {font-size: 26px;}
}
@media (max-width: 799px) {
	:root {
		--container-side: 0;
		--container-pad: 24px;
	}

	.DesktopOnly {display: none !important;}
	.MobileOnly {display: block;}
}@font-face {
	font-family: 'Inter';
	src: url(/Preview/Projects/NovaBudejarna/Design/Fonts/Inter.ttf) format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url(/Preview/Projects/NovaBudejarna/Design/Fonts/Inter-italic.ttf) format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--font-inter: Inter, Arial, sans-serif;
}.Body {
    --cols: 3;
    --placetime-line-width: 2px;
}
.Body {background: var(--red);}

#Logo {margin-left: auto; display: flex; margin-right: 0;}
footer {display: flex; justify-content: space-between; align-content: center; color: var(--dark); gap: 40px;}

.Logos {display: flex; gap: 35px; max-width: 634px; align-items: center;}
.Logos img {width: 100%; height: auto; max-width: 156px; max-height: 70px;}

.Copy {font-size: 25px; display: flex; align-items: center; justify-content: right; text-align: right; white-space: nowrap;}

h1 span {display: block; background: white; color: var(--red); font-size: 53.62px; padding: 0 14px; max-width: max-content;}

.Map img {height: auto; max-width: 100%;}

.BadPaint {position: relative; text-decoration: none; display: block; max-width: max-content;}
.BadPaint div {position: relative; padding: 20px 23px; font-weight: bold; color: var(--dark); text-decoration: underline;}
.BadPaint .Bg {position: absolute; z-index: 0; width: 100%; height: auto;}

.BadPaint:hover .Bg {opacity: 0.8;}

.Place, .Time {display: flex; align-items: center; padding: 4px 0; border-top: var(--placetime-line-width) solid var(--text-color);}
.Place {border-bottom: var(--placetime-line-width) solid var(--text-color); margin-bottom: 20px;}
.Icon {width: 26.28px; height: 20.83px; display: inline-flex;}
.Icon img {width: auto; height: 100%;}

@media (min-width: 800px) {
    header {display: flex; justify-content: space-between; align-items: start; padding: 67px 0 !important;}
    footer {padding: 21px 0 !important;}

    .Body {display: grid; grid-template-columns: min-content 0.8fr 1.2fr; gap: 79px 20px;}
    #Logo {width: 33%;}
    #Logo img {width: 100%; height: auto;}
    h1 span {display: block; background: var(--red); color: white; font-size: 83.08px;}

    h3 {max-width: 176px; margin-left: auto; margin-right: 0;}

    .LastBlock {display: flex; gap: 40px; align-items: start; position: relative; padding-bottom: 233px;}
    .LastBlock .Text {max-width: 311px;}
    .LastBlock h3 {margin-left: 0;}
    .BadPaint {position: absolute; bottom: 30px; font-size: 30px;}

    .PreLastText {margin-right: 50px;}

    .Icon {width: 37px; height: 29px;}
}
@media (min-width: 800px) and (max-width: 1024px) {
    .Body {display: flex; flex-wrap: wrap; gap: 20px;}
    h2, h3 {margin-bottom: 0; flex: 0 0 150px;}
    h2 + .Text, h3 + .Text {flex: 1;}
    .Text {flex: 1;}
    .Map {flex: 0 0 100%; margin-bottom: 40px;}
    .LastBlock {gap: 20px; flex: 0 0 100%; margin-top: 40px; padding-bottom: 0;}
    .PreLastText {margin-right: 0;}
    .BadPaint {position: relative; margin-top: 40px; margin-left: auto; margin-right: 0;}
    .BadPaint div {font-size: 22px;}

    .Copy {font-size: 20px;}
}

@media (max-width: 799px) {
    .Body {
        --placetime-line-width: 1.44px;
    }
    header {display: flex; justify-content: right; align-items: start; padding-top: 54px; padding-bottom: 22px;}
    #Logo img {width: 100%;}

    h2 {max-width: 276px;}
    .Text {max-width: 310px;}
    #Logo {width: 50%;}
    .Body > * {margin-bottom: 26px;}

    .Body .Map {margin-bottom: 30px;}

    .TimePlace {width: max-content;}
    .Body h3 {max-width: 220px; margin-bottom: 14px;}

    :is(.PreLastText, .LastBlock) :is(p, li) {--font-size: 14px; max-width: 255px;}

    .BadPaint {margin-top: 40px;}
}