/* CSS Document */

@import url("fonts.css");
@import url("styles.css");
@import url("header.css");
@import url("footer.css");
@import url("misc.css");


.box-headline{display: none;}

.statement-container{padding: 100px 0 50px 0;}

.statement {
	padding-left: env(safe-area-inset-left);
	margin-top: 0.85vw;
	margin-bottom: calc(18vw - 204px);
	width: 50vw;
	max-width: 410px;
	font-size: 18px;
	text-align: center;
}

#dbmara-logo {
	margin-top: -8.17vw;
	margin-left: -36px;
}

#section-1 {padding: 0;}

#statement-box {
	width: 50vw;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 2.6vw;
}

#statement-box p{
	text-align: center;
}

#architecture-box {
	margin-right: 12.5vw;
	margin-bottom: 2.6vw;
	text-align: left;
	margin-top: 6.5vw;
}

#architecture-box h1{
	padding-bottom: 12px;
	text-align: left;
}

#mobility-box h1{padding-bottom: 12px;}

#mobility-box {
	margin-top: 4.3vw;
	margin-left: 5.2vw;
	text-align: end;
}

#mobility-box h1 {text-align: end;}

#section-2 .left-column {
	position: relative;
	z-index: 1;
}

#section-2 .right-column {
	position: relative;
	z-index: 0;
}

#section-2 {padding: 0;}
#section-2 .left-column, #section-2 .right-column {flex-direction: row-reverse;}

.textbox {
	width: 37.5vw;
	max-width: 100vw;
	min-width: 0;
}

#section-bottom .textbox {
	width: 100%;
	max-width: 100vw;
	min-width: 0;
	margin-top: 3px;
}


#section-bottom {
	flex-direction: row;
	justify-content: center;
	padding: 12.5vw 0;
	background-color: #e9ecf2;
	width: 100vw;
}


h10 {
	font-size: 7.5vw;;
	padding: 0 25px;
	text-align: center;
	color: #e6e9ed;
}







#siy1 {
	width: 43.75vw;
	margin-left: 6.25vw;
	margin-top: -10.8vw;
}

#trahub1 {
	width: 43.75vw;
	margin-right: 6.25vw;
}

#dentsmacro {
	width: 26vw;
	margin-bottom: 40vw;
	margin-right: 0;
	margin-top: -26vw;
}

#kelpa1 {
	width: 31.25vw;
	margin-bottom: -23.8vw;
  	margin-top: -6.25vw;
	margin-right: 0;
	margin-left: 12.5vw;
}

#opera {
	width: 37.5vw;
	margin-right: 0;
	margin-left: 12.5vw;
	margin-top: 6.25vw;
	display: none;
}

#frisina {
	width: 23.3%;
	margin-top: auto;
	margin-bottom: 3.6vw;
	display: none;
}

.right-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#section-3 .right-column {
  display: flex;
  align-items: flex-start;
}

#section-3 {
  padding: 0 0 2.6vw 0;
  background-color: white;
	flex-direction: column-reverse;
}

#ivy-hotel {
	width: 30.8%;
	margin-top: 0;
  	margin-right: 8vw;
}

#motorino {
	width: 23.2%;
	margin-top: 2.6vw;
}

#blueheron2 {
	width: 30.8%;
	margin-top: 10.4vw;
  	margin-bottom: 6.2vw;
}

#namare {
	width: 23.2%;
	margin-right: -2.6vw;
}

#stribo {
	width: 23.1%;
	margin-top: calc(-23.2% - 3.2vw);
	margin-right: calc(23.5%);
	margin-bottom: 6.0vw;
}

#siy2 {
	width: 30.8%;
	margin-right: -2.6vw;
}

#voromacro {
	width: 23.2%;
	margin-bottom: 9.4vw;
	margin-right: -2.6vw;
	margin-top: 7.2vw;
}

#kelpb {
	width: 30.8%;
	margin-right: calc(23.2% - 2.6vw);
	margin-top: -30.8%;
	margin-bottom: 2.6vw;
}

#noibako2 {width: 23.2%;}

#trahub2 {
	width: 23.2%;
	margin-left: calc(23.2%);
	margin-top: -3.2vw;
	margin-bottom: calc(-23.2% + 3.2vw);
}

#maritimemuseum {
	width: 23.2%;
	margin-left: -2.6vw;
	margin-bottom: 2.6vw;
}

#rakowymarket {
	width: 30.8%;
	margin-left: -2.6vw;
	margin-bottom: 3.6vw;
}

#scope {
	width: 23.2%;
	margin-top: 6.85vw;
	margin-left: -2.6vw;
}

#zesa {
	width: 30.8%;
	margin-left: calc(23.2% - 2.6vw);
  	margin-top: -150px;
}

#highspeedswath {
	width: 23.2%;
	margin-bottom: calc(5.2vw + 7.6%);
	margin-top: 2.8vw;
}

#kelpa2 {
	width: 30.8%;
	margin-top: calc(10px + 6.8vw);
	margin-bottom: 2.6vw;
}

#kudu {
	width: 23.2%;
	margin-left: -2.6vw;
}

#artpiece {
	width: 23.2%;
	margin-top: calc(-23.2% + 2.6vw);
	margin-left: 23.2%;
}



#divin-box {margin-right: 0; margin-bottom: 5.5vw; margin-left: 12.5vw;}



.phrase {padding: 12px 0;}

#design-box {margin: 6.25vw 0 -62px 50vw;}
#design-box h1 {margin-top: 6.25vw;}

.category-label {margin: -12px 12.5vw;}
.category-label h1 {padding: 0}

#architecture-label {margin-bottom: calc(-58px - 3.0vw); margin-top: calc(39px + 2.3vw); margin-right: calc(-40px - 2.5vw);}
#mobility-label {margin-top: calc(5vw + 17px); margin-bottom: calc(-2.6vw + 120px); margin-left: calc(-20px - 1.25vw);}

#design-label {margin-top: calc(-33px + 4vw); margin-bottom: calc(33px + 2.1vw); margin-right: calc(-33px - 2.1vw);}

#contact-box {
	margin-top: 23px;
	width: 100%;
	max-width: 100px;
}

#section-bottom p {text-align: right; margin: 18px 0;}

#section-3 .right-column {flex-direction: column;}


#mobile-statement{display: flex; margin-left: auto; width: 75vw; margin-bottom: 17vw; margin-right: auto;}
#desktop-statement{display: none;}


#section-4 {display: none;}
#section-4-mobile {display: flex; padding-bottom: 6.25vw;}

#section-4-mobile .column img {width: 100%; margin-bottom: 6.25vw;}

#architecture-label-mobile h1, #design-label-mobile h1 {text-align: end;}
#architecture-label-mobile h1, #design-label-mobile h1, #mobility-label-mobile h1 {font-family: "cherry-blossoms-regular",sans-serif; font-weight: 600; font-size: 38px;}

#architecture-column, #mobility-column, #design-column {display: flex; margin: 3vw 0 6.25vw 0;}
#architecture-column .left-column {width: 37.5vw; margin-left: 12.5vw;}
#architecture-column .right-column {width: 31.25vw; margin-left: 6.25vw;}
#mobility-column .left-column {width: 31.25vw; margin-left: 12.5vw;}
#mobility-column .right-column {width: 37.5vw; margin-left: 6.25vw;}
#design-column .left-column {width: 37.5vw; margin-left: 12.5vw;}
#design-column .right-column {width: 31.25vw; margin-left: 6.25vw;}


#section-bottom .column{width: 37.5vw;}
#section-bottom .left-column {align-items: flex-end;}
#section-bottom .left-column {margin-right: 6.25vw;}


#architecture {position: absolute; top: calc(185vw + (435 * ((25.6px - 1vw)/25.6))); left: 50vw;}
#mobility {position: absolute; top: calc(358vw + (435 * ((25.6px - 1vw)/25.6))); left: 50vw;}
#design {position: absolute; top: calc(518vw + (500 * ((25.6px - 1vw)/25.6))); left: 50vw;}


@media only screen and (max-width: 930px){

}

/*responsive for Tablet portrait (below is phone)*/
@media only screen and (min-width: 931px) and (min-height: 500px){

	
}

/*responsive for Tablet landscape*/
@media only screen and (min-width: 1024px){

}

/*responsive for Laptop*/
@media only screen and (min-width: 1025px){
	.box-headline{display: flex;}
	
	.textbox {width: 30%;max-width: 100vw;min-width: 180px;}
	
	.category-label {-webkit-transform: rotate(-90deg);	-moz-transform: rotate(-90deg);	-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);	margin: -12px 0;}
	
	#mobile-statement{display: none;}
	#desktop-statement{display: flex;}
	.phrase {padding: 25px 0;}
	.statement {max-width: 335px; padding-left: 0;}
	
	#section-2 {padding: 0 0 100px 0;}
	#section-2 .left-column, #section-2 .right-column {flex-direction: column;}
	#section-3 {flex-direction: row;}
	#section-4 {display: flex;}
	#section-4-mobile {display: none;}
	#section-bottom {width: inherit;}
	
	#architecture-box {margin: 0; margin-right: 6.5vw; margin-bottom: 2.6vw;}
	#architecture-box h1{padding-bottom: calc(6px + 0.4vw); text-align: left;}
	#mobility-box h1{padding-bottom: calc(6px + 0.4vw);}

	#trahub1 {width: 38.43%; margin-right: 2.6vw;}
	#siy1 {width: 46.5%; margin: 0; margin-left: -2.6vw;}
	#dentsmacro {width: 24.37%;	margin: 0; margin-bottom: 16.8vw; margin-right: 9.25vw;}
	#kelpa1 {width: 30.8%; margin: 0; margin-bottom: -23.8vw; margin-top: 0.85vw; margin-right: -2.6vw;}
	#opera {width: 30.8%; margin: 0; margin-right: -2.6vw; display: block;}
	
	#frisina {display: block;}
	
	#design-box {max-width: 300px; margin: 0;}
	#design-box h1 {margin-top: 0;}
	
	#divin-box {margin-right: 4.5vw; margin-bottom: 5.5vw; margin-left: 0;}
	
	#section-bottom {justify-content: center; padding: 100px 0;}
	#section-bottom .column{width: inherit;}
	
	#section-bottom .left-column {margin-right: 0;}
	#section-bottom .textbox {width: 30%;max-width: 350px;min-width: 300px; margin-top: inherit;}
	
	#architecture {position: absolute; top: calc(85vw + (225 * ((25.6px - 1vw)/25.6))); left: 50vw;}
	#mobility {position: absolute; top: calc(142vw + (185 * ((25.6px - 1vw)/25.6))); left: 50vw;}
	#design {position: absolute; top: calc(196vw + (225 * ((25.6px - 1vw)/25.6))); left: 50vw;}
	
	#section-bottom #contact-box{margin: 20px 0 18px 0;}
	
	
	button, #divin-box, a {font-size: calc(8px + 0.5vw);}
	

}

/*respnsive for Desktop*/    
@media only screen and (min-width: 1601px){


}