[data-block="1"] {--color: #EB5955; --color-lighter: #EB5955aa; --color-light: #EB595522;}
[data-block="2"] {--color: #499D62; --color-lighter: #499D62aa; --color-light: #499D6222;}
[data-block="3"] {--color: #FFCA00; --color-lighter: #FFCA00aa; --color-light: #FFCA0022;}
[data-block="4"] {--color: #018CAD; --color-lighter: #018CADaa; --color-light: #018CAD22;}
[data-block="6"] {--color: #FF9104; --color-lighter: #FF9104aa; --color-light: #FF910422;}

:root {
	--container-width: 1408px;
	--container-padding: 15px;

	--text-size: 25px;
	--text-line-height: 125%;
	--text-block-margin: 32px;
	--text-h2-size: 40px;
	--text-h2-margin: 21px;
	--text-h3-size: 40px;
	--text-h3-margin: 21px;

	--other-h2-size: 72px;
}

* {box-sizing: border-box; margin: 0; padding: 0;}
html, body {overflow-x: clip; scroll-behavior: smooth;}
body {font-family: var(--roobert); color: black;}

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

.Text, .Text :is(p, li, td, th) {font-size: var(--text-size); line-height: var(--text-line-height);}
.Text :is(p, ul, ol, table):not(:last-child) {margin-bottom: var(--text-block-margin);}
.Text h2 {font-size: var(--text-h2-size); margin-bottom: var(--text-h2-margin); font-weight: normal; line-height: normal;}
.Text h3 {font-size: var(--text-h3-size); margin-bottom: var(--text-h3-margin); font-weight: normal; line-height: normal;}
.MediaGallery img {max-width: 100%; height: auto;}

.Button {display: inline-flex; background: #89cde2; text-align: center; padding-left: 16.2px; padding-right: 16.2px; cursor: pointer; min-height: 34px; border-radius: 9999px; color: black; font-size: 20.9px; border: none; text-decoration: none; align-items: center; justify-content: center;}
.Button:hover {background: #6fa5d1;}
a.Button[href=""] {display: none;}

@media (max-width: 1200px) {
	:root {
		--text-size: 24px;
		--text-block-margin: 60px;
		--text-h2-size: 40px;
		--text-h2-margin: 18.5px;
		--text-h3-size: 35.2px;
		--text-h3-margin: 18.5px;

		--other-h2-size: 60px;
	}
}
@media (max-width: 900px) {
	:root {
		--text-size: 18px;
		--text-block-margin: 25px;
		--text-h2-size: 30px;
		--text-h2-margin: 14px;
		--text-h3-size: 24px;
		--text-h3-margin: 14px;

		--other-h2-size: 38px;
	}

	.Button {padding-top: 4px; padding-bottom: 4px;}
}

.Bg {position: absolute; pointer-events: none; z-index: -1; height: auto; mix-blend-mode: multiply;}
@media (max-width: 1000px) {
	.Bg {left: 0 !important; right: auto !important; top: auto !important; width: 40vw !important; max-width: 40vw !important; opacity: 0.3;}
}

.VideoCode iframe {width: 100%; height: auto; aspect-ratio: 16 / 9;}.BlocksIntro {height: 881px;}
.BlocksIntro .Container {position: relative;}

.BlocksIntro .Block {
	--fill-width: 0fr;
	--big-font-size: 100px;
}

.BlocksIntro .Block {position: absolute; left: 0; top: 0; color: white; display: grid; grid-template-columns: max-content var(--fill-width); transition: grid-template-columns var(--anim-duration) var(--anim-fnc); text-decoration: none;}
.BlocksIntro .Block .No {background: var(--color); padding: 0 10px; font-size: var(--big-font-size); text-decoration: none; font-family: var(--dincs);}
html:not(.AppleThing) .BlocksIntro .Block .No {padding: 0 10px 10px 10px; line-height: 90%;}
html.AppleThing .BlocksIntro .Block .No {padding: 10px 10px 0 10px;}
.BlocksIntro .Block .Info {position: absolute; right: 0; top: 0; height: 100%; place-content: center; padding-right: 15px; max-width: 215px; opacity: 0; transition: opacity var(--anim-duration) var(--anim-fnc); pointer-events: none; width: 100%;}
.BlocksIntro .Block .Info strong {text-transform: uppercase; font-weight: 600;}
.BlocksIntro [data-block="1"] {top: 155px; left: 10%;}
.BlocksIntro [data-block="2"] {top: 191px; left: 50%;}
.BlocksIntro [data-block="3"] {top: 468px; left: 60%;}
.BlocksIntro [data-block="4"] {top: 605px; left: 6.8%;}
.BlocksIntro [data-block="6"] {top: 80px; right: 0%; left: auto;}

.BlocksIntro .Program {border: 2px solid white; display: flex; gap: 2px; background: white; color: var(--color); font-size: 16px; line-height: 21.6px; font-weight: 500; margin-top: 12px;}
.BlocksIntro .ProgramItem {height: 44px; padding: 0 3px;}
.BlocksIntro .ProgramItem:nth-child(1) {background: var(--color-light);}
.BlocksIntro .ProgramItem:nth-child(2) {background-image: repeating-linear-gradient(135deg, var(--color-light) 0, var(--color-light) 2px, transparent 2px, transparent 4px);}

.BlocksIntro .SplitNo {display: flex; align-items: center; gap: 5px;}
.BlocksIntro .SplitNo span:last-child {font-size: calc(var(--big-font-size) / 2); line-height: 85%; padding-right: 10px;}

@media (max-width: 1250px) {
	.BlocksIntro {height: 700px;}
	.BlocksIntro [data-block="1"] {left: 10%;}
	.BlocksIntro [data-block="3"] {left: auto; right: 0;}
	.BlocksIntro [data-block="4"] {top: 80%;}
}
@media (max-width: 1010px) {
	.BlocksIntro [data-block="2"] {left: auto; right: 10%;}
}

@media (max-width: 800px) {
	.BlocksIntro .Block {
		--big-font-size: 80px;
	}
	.BlocksIntro [data-block="1"] {left: 5%;}
	.BlocksIntro [data-block="2"] {left: auto; right: 5%;}
	.BlocksIntro [data-block="3"] {left: 50%;}
}
@media (max-width: 380px) {
	.BlocksIntro [data-block="1"] {top: 180px;}
	.BlocksIntro [data-block="2"] {top: 270px;}
}@media (min-width: 801px) {
	.BlocksIntro .Block {width: 500px;}
	.BlocksIntro .Block::after {height: 100%; background: var(--color); content: '';}
	.BlocksIntro .Block:hover {--fill-width: 1fr;}
	.BlocksIntro .Block:hover .Info {opacity: 1; pointer-events: auto;}
}@font-face {
	font-family: 'Roobert';
	font-weight: normal;
	font-style: normal;
	src: url('Grace/Projects/Florenc21/Design/Fonts/rooberttrial.ttf');
}
@font-face {
	font-family: 'Roobert';
	font-weight: bold;
	font-style: normal;
	src: url('Grace/Projects/Florenc21/Design/Fonts/rooberttrialbold.ttf');
}

@font-face {
	font-family: 'DINCS';
	font-weight: bold;
	font-style: normal;
	src: url('Grace/Projects/Florenc21/Design/Fonts/DINCS.ttf');
}

:root {
	--roobert: 'Roobert', sans-sarif;
	--dincs: 'DINCS', 'Roobert', sans-sarif;
}
			#Header {position: sticky; top: 0; left: 0; width: 100%; height: 81px; background: black; padding: 4px; display: flex; align-items: stretch; z-index: 3;}
#Header img {height: 100%;}
#Header a {color: white; text-decoration: none;}
#Header nav {display: flex; align-items: center;}
#Header .Blocks {gap: 5px;}
#Header .Blocks a {height: 100%; font-family: var(--dincs); padding: 0 14px; display: grid; place-content: center; background: #999999; font-size: 57px;}
#Header a.SplitNo {display: flex; align-items: center; gap: 5px;}
#Header a.SplitNo span:last-child {font-size: 34px; line-height: 85%;}
html:not(.AppleThing) #Header .Blocks a {line-height: 90%; padding: 0 14px 5px 14px;}
html.AppleThing #Header .Blocks a {padding: 5px 14px 0 14px;}
#Header .Blocks a:hover {background: var(--color);}
#Header .Pages {justify-content: stretch; flex: 1;}
#Header .Pages > div {cursor: default;}
#Header .Pages, #Header .Pages a {font-size: 20px; color: white;}

#Header .CompetitionPages {position: relative;}
#Header .CompetitionPages > div {position: absolute; top: 100%; left: 0; width: max-content; background: white; height: 0; overflow: hidden;}
#Header .CompetitionPages a {display: block; color: black; border-top: 3px solid black;}
#Header .CompetitionPages a:hover, #Header .CompetitionPages a.Active {background: #80BA91;}
#Header .CompetitionPages:hover > div {height: auto;}

#Header .CompetitionPages:hover, #Header .CompetitionPages:has(.Active), #Header .Pages > a:hover, #Header .Pages > a.Active {background: white; color: black;}

body:has(#Intro [data-block="1"]:hover, .BlockDetail [data-block="1"]) #Header .Blocks a[data-block="1"] {background: var(--color);}
body:has(#Intro [data-block="2"]:hover, .BlockDetail [data-block="2"]) #Header .Blocks a[data-block="2"] {background: var(--color);}
body:has(#Intro [data-block="3"]:hover, .BlockDetail [data-block="3"]) #Header .Blocks a[data-block="3"] {background: var(--color);}
body:has(#Intro [data-block="4"]:hover, .BlockDetail [data-block="4"]) #Header .Blocks a[data-block="4"] {background: var(--color);}
body:has(#Intro [data-block="6"]:hover, .BlockDetail [data-block="6"]) #Header .Blocks a[data-block="6"] {background: var(--color);}

@media (max-width: 1600px) {
	#Header .Blocks a {font-size: 40px;}
	#Header a.SplitNo span:last-child {font-size: 30px;}
}
@media (max-width: 1460px) {
	#Header {height: 60px;}
	#Header .Blocks a {padding: 0 8px;}
	#Header a.SplitNo span:last-child {font-size: 28px;}
}
@media (max-width: 1360px) {
	#Header .Pages, #Header .Pages a {font-size: 17px;}
}

/* Burger menu styles */
#BurgerBtn {display: none; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; padding: 0; margin-left: auto; margin-right: 20px; align-self: center;}
#BurgerBtn span {display: block; height: 3px; width: 100%; background: white; transition: 0.3s;}
#BurgerMenu {position: fixed; top: 0; right: -350px; width: 350px; height: 100vh; background: black; z-index: 20; transition: right 0.3s ease; overflow-y: auto; padding-top: 100px;}
#BurgerClose {position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; width: 30px; height: 30px; padding: 0;}
#BurgerClose span {position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background: white; transition: 0.3s;}
#BurgerClose span:nth-child(1) {transform: translateY(-50%) rotate(45deg);}
#BurgerClose span:nth-child(2) {transform: translateY(-50%) rotate(-45deg);}
#BurgerClose:hover span {background: #ccc;}
#LogoMobile {display: none;}
.BurgerPages, .BurgerBlocks {display: flex; flex-direction: column; text-align: right;}
.BurgerPages a, .BurgerBlocks a {color: white; text-decoration: none; padding: 15px 30px; border-bottom: 1px solid #333; transition: background 0.2s;}
.BurgerPages a:hover, .BurgerBlocks a:hover, .BurgerPages a.Active {background: #333;}
.BurgerBlocks {border-top: 2px solid #333; margin-top: 20px; padding-top: 20px;}
.BurgerBlocks a {font-weight: bold; font-size: 18px;}

/* Menu overlay */
#BurgerOverlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 15; opacity: 0; visibility: hidden; transition: all 0.3s ease;}

/* Menu open state */
.MenuOpen #BurgerMenu {right: 0;}
.MenuOpen #BurgerOverlay {opacity: 1; visibility: visible;}
.MenuOpen #BurgerBtn span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.MenuOpen #BurgerBtn span:nth-child(2) {opacity: 0;}
.MenuOpen #BurgerBtn span:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px);}

@media (max-width: 1260px) {
	#Header .Pages {display: none;}
	#BurgerBtn {display: flex;}
	#BurgerMenu .BurgerBlocks {display: none;}
}

@media (max-width: 1024px) {
	#Header .Blocks {display: none;}
	#Header #Logo {display: none;}
	#Header #LogoMobile {display: block; max-width: 250px;}
	#Header #LogoMobile img {height: 100%;}
	#BurgerMenu .BurgerBlocks {display: flex;}
}
@media (min-width: 1025px) {
	#Header .Blocks {margin-left: 5px;}
}

@media (min-width: 1261px) {
	#Header .Pages {justify-content: right;}
	#Header .Pages a, #Header .CompetitionPages {padding: 5px 10px;}
}

@media (min-width: 1024px) and (max-width: 1260px) {
	#Header .Pages {justify-content: right;}
	#Header .Pages a, #Header .CompetitionPages {padding: 5px 10px;}
}#Intro {position: relative;}
#Intro .Container {position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); width: 100%; z-index: 2;}
#Intro .PicturesBg {object-fit: cover; object-position: center; width: 100%; height: 100%; display: flex;}
.PicturesBg picture {flex: 0 0 100%;}
.PicturesBg img {object-fit: cover; object-position: center; width: 100%; height: 100%;}
.PicturesBg > :is(picture, img) {position: absolute; left: 100%; top: 0; width: 100%; height: 100%; transform: translateX(var(--left)); --left: 0px;}
.PicturesBg > .Active, .PicturesBg > picture:has(.Active) {--left: -100%; z-index: 2;}
.PicturesBg > .Deactivate {--left: -200%;}
.PicturesBg > .Active, .PicturesBg > .Deactivate {transition: transform 0.5s ease-in-out;}

.About .MainText {
	--text-size: var(--text-h2-size);
}
.About {display: grid; grid-template-columns: min(420px, 30%) 0.78fr; gap: 20px; padding-top: 50px; padding-bottom: 65px; position: relative;}
.About .Text:not(.MainText) {grid-column: 2;}
.About .Text {max-width: 80%;}
.About h2 {font-size: var(--other-h2-size); font-weight: normal;}
.About .MainText {margin-bottom: 60px; position: relative;}
.About .Person {position: absolute; left: 100%; bottom: -20px; font-size: 27px; display: grid; grid-template-columns: max-content 1fr; gap: 17px; align-items: center; line-height: normal;}
.About .AboutPersonImage {max-width: 133px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;}
.About .Person img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.About .Person .Name {width: 190px; position: relative;}
.About .Person .Name .Note {font-size: 14px; position: absolute; left: 0; right: 0; top: calc(100% + 10px);}

.About .Bg {left: -40vw; top: -8vw; width: 60vw; transform: rotateY(0);}

.TimelineContainer {margin-bottom: 92.77px;}

.Neighborhoods {margin-bottom: 80px; position: relative;}
.Neighborhoods .Image {position: relative; display: flex; align-items: start;}
.Neighborhoods .Image img {width: 100%; height: auto;}
.Neighborhoods .Image::after {position: absolute; content: ''; background: white; width: 95px;}
.Neighborhoods article {max-width: 960px; display: flex;}
.Neighborhoods h2 {font-size: var(--text-h2-size); font-weight: normal; margin-bottom: 11px; background: #89cde2; padding-top: 20px; padding-bottom: 20px; padding-right: 70px; position: relative;}
.Neighborhoods h2::after {content: ''; display: block; position: absolute; width: 92px; height: 65px; background: white; pointer-events: none; right: 0;}
.Neighborhoods .Text {margin-bottom: 16px;}
.Neighborhoods .Text > * {padding-left: 26.8px;}
.Neighborhoods .Button {margin-left: 26.8px;}

.Neighborhoods article:first-child {margin-bottom: 77px;}
.Neighborhoods article:first-child .Bg {max-width: 40vw; right: -10vw; top: -1vw;}
.Neighborhoods article:first-child .Image {flex: 0 0 413px;}
.Neighborhoods article:first-child .Image::after {left: 0; top: 0; height: 75px;}
.Neighborhoods article:first-child h2::after {bottom: 0;}

.Neighborhoods article:nth-child(2) {margin-left: auto; margin-right: 100px;}
.Neighborhoods article:nth-child(2) .Bg {left: -350px; bottom: -700px; max-width: 1018px;}
.Neighborhoods article:nth-child(2) .Image {flex: 0 0 472px; mix-blend-mode: multiply;}
.Neighborhoods article:nth-child(2) .Image::after {right: 0; bottom: 0; height: 137px;}
.Neighborhoods article:nth-child(2) h2::after {top: 0;}

.ArchitectsTogether {position: relative; background: #EE8E90; margin-bottom: 70px;}
.ArchitectsTogether::before {position: absolute; content: ''; left: 0; top: 0; width: 130px; height: 137px; background: white;}
.ArchitectsTogether .Container {display: grid; grid-template-columns: 450px 1fr; gap: 55px; margin-right: 0; width: calc(var(--container-width) + (100vw - var(--container-width)) / 2); max-width: none; padding-right: 0;}
.ArchitectsTogether h2 {font-size: 50px; font-weight: normal; padding-top: 28.5px;}
.ArchitectsTogether .ArrowButton {position: absolute; right: 18.9px; top: 28.5px; background: white; border-radius: 50%; width: 68.4px; height: 68.4px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.ArchitectsTogether .Image {height: 379.3px;}
.ArchitectsTogether .Image img {object-fit: cover; object-position: center bottom; width: 100%; height: 100%;}

.News.Container {margin-right: 0; width: calc(var(--container-width) + (100vw - var(--container-width)) / 2); max-width: none; padding-right: 0;}
.News h2 {font-size: var(--other-h2-size); font-weight: normal; margin-bottom: 84.94px;}
.NewsList {display: flex; gap: 47px;}
.News article {flex: 1; position: relative;}
.News article::after {background: white; content: ''; position: absolute; width: 105px; height: 105px; pointer-events: none;}
.News a {text-decoration: none; color: black; display: flex; flex-direction: column; height: 100%;}
.News img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.News h3 {font-size: var(--text-h2-size); font-weight: normal; word-break: break-word;}
.News .Info {min-height: 245.55px; padding: 15px 26px; flex: 1;}
.News .Date {margin-bottom: 20px; font-size: 22.83px;}
.News .Image {height: 252.76px;}

.News article:nth-child(1) .Info {background: #EE8E90;}
.News article:nth-child(1)::after {right: 0; bottom: 0;}
.News article:nth-child(2) .Info {background: #89CDE2;}
.News article:nth-child(2) .Date {padding-left: 110px;}
.News article:nth-child(2) h3 {padding-top: 60px;}
.News article:nth-child(2)::after {left: 0; top: 0;}
.News article:nth-child(3) .Info {background: #80BA91;}
.News article:nth-child(3) h3 {padding-top: 60px;}
.News article:nth-child(3)::after {top: 0; right: 0;}

.News {position: relative;}
.News .Bg {right: -10vw; top: calc(100% - 2vw); max-width: 25vw; height: auto; transform: rotateZ(-5deg);}

body .Timeline h2 {background: #80ba91;}
body .TimelineIn {background: #80ba91;}

@media (max-width: 1665px) {
	.ArchitectsTogether h2 {padding-top: 140px; font-size: var(--text-h2-size);}
}
@media (max-width: 1408px) {
	.News h2 {margin-bottom: 40px;}
	.NewsList {gap: 25px;}
	.News h3 {font-size: 35px;}
	.News.Container, .ArchitectsTogether .Container {width: auto;}
	.ArchitectsTogether h2 {font-size: var(--text-h2-size);}
}
@media (max-width: 1250px) {
}
@media (max-width: 1200px) {
	.News h3 {font-size: 28px;}
	.News .Info {padding-left: 15px; padding-right: 15px;}

	.Neighborhoods h2::after {display: none;}
}
@media (max-width: 1100px) {
	.Neighborhoods article:nth-child(2) {margin-right: 0;}
	.Neighborhoods article .Image {flex-basis: 50% !important;}

	.About .Person {transform: translateX(-50px);}
}
@media (max-width: 1000px) {
	.About .Text {max-width: 100%;}
	.About .MainText {display: flex; flex-direction: column;}
	.About .Person {position: static; margin-top: var(--text-block-margin); order: 1000; transform: none;}

	.NewsList {gap: 15px;}
	.News h3 {font-size: 23px;}

	.ArchitectsTogether .Container {grid-template-columns: 1fr; padding-left: 0; gap: 0;}
	.ArchitectsTogether h2 {padding: 15px var(--container-padding) 15px 158px;}
	.ArchitectsTogether .Image {position: relative;}
}

@media (max-width: 850px) {
	.News.Container {padding-right: var(--container-padding);}
	.NewsList {display: grid;}
	.NewsList article {max-width: 550px;}
	.NewsList .Empty {display: none;}
}

@media (max-width: 750px) {
	.About {display: block;}
	.About h2 {margin-bottom: var(--text-block-margin);}
	.About .MainText {margin-bottom: var(--text-block-margin);}

	.ArchitectsTogether .ArrowButton {top: auto; bottom: 15px; right: 15px;}

	.Neighborhoods .Text > * {padding-left: 15px;}
	.Neighborhoods h2 {padding-top: 10px; padding-bottom: 10px;}

	.Timeline {padding-top: 0 !important;}
	.Timeline h2 {padding-bottom: 7px !important;}
	.Timeline::before {display: none;}
	.TimelineIn {padding-top: 40px !important;}
}

@media (max-width: 600px) {
	.Neighborhoods article {display: block;}
}.Timeline {padding: 37.5px 0 16.49px 0; position: relative;}
.TimelineIn {background: #F8D6CA; padding-top: 116.1px;}
.Timeline::before {position: absolute; width: 104px; height: 124px; top: 0; right: 0; background: white; content: '';}
.Timeline .Container {position: relative;}
.Timeline h2 {font-size: var(--other-h2-size); font-weight: normal; background: #F8D6CA; width: max-content; padding: 37.8px 218px 0 63.9px;}

.TimelineContainer {position: relative; width: 100%; height: 300px; overflow-x: auto; overflow-y: hidden;}

.TimelineContainer::-webkit-scrollbar {display: none;}
.TimelineContainer {-ms-overflow-style: none; scrollbar-width: none;}

.TimelineYears {position: relative; width: 100%; border-top: 9px solid black;}
.TimelineYear {position: absolute; top: 22.5px; font-size: var(--text-h2-size);}
.TimelineTextMoreLike {font-size: var(--text-size); font-weight: 600; padding-top: 10px; border-top: 3px solid black; padding-right: 200px;}

.TimelineTrack {position: relative; width: 100%; height: calc(100% - 120px);}

.TimelineItem {position: absolute; top: 0; height: 100%; border-left: 9px solid black; padding-left: 20px;}
.TimelineItem .Name {font-size: 22.5px; height: 170px; display: flex; flex-direction: column; justify-content: space-between;}
.TimelineItem .Description {font-size: 14.4px; height: 189px; padding-left: 11.7px; border-left: 4.5px solid black; margin-left: 10px;}

.Timeline .Arrow {position: absolute; bottom: 78px; width: 68.4px; height: 68.4px; border-radius: 50%; background: white; cursor: pointer; border: none;}
.Timeline .Arrow svg {width: 60%; height: auto;}
.Timeline .ArrowLeft {left: -65px;}
.Timeline .ArrowRight {right: -65px;}

@media (max-width: 1550px) {
	.Timeline .ArrowLeft {left: 15px;}
	.Timeline .ArrowRight {right: 15px;}
}