/* CSS Document */

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



.statement-container{
	padding: 23vw 0 12.5vw 0;
}

.statement {
	width: auto;
	max-width: 100vw;
}

#mara4 {
	width: 70vw;
	margin-top: 23vw;
	margin-bottom: -28%;
	margin-left: 30vw;
  	transform: scaleX(-1);

}

#mara3 {
	width: 37.5vw;
	margin-left: 12.5%;
	margin-top: -37.5vw;
	margin-bottom: 28vw;
	z-index: 10;
	position: relative;
}

#mara5 {
	width: 50vw;
	margin: 0 0 10% 12.5%;
	position: relative;
	z-index: 1;
}

#mara7 {
	width: 37.5vw;
	margin: 0;
	margin-top: -18%;
	margin-left: 25%;
	margin-bottom: -89%;
}

#mara6 {
	width: 37.5vw;
	margin: 0;
	margin-left: 50vw;
	margin-top: 37.5%;
	margin-bottom: -20%;
}

#kelpprocess-mobile{
	width: 100vw;
	position: relative;
	z-index: 0;
	display: block;
}

#kelpprocess {
	width: calc(100% + 100px);
	margin-left: -100px;
	position: relative;
	z-index: 0;
	display: none;
}

#dbmara-logo {
	margin-right: 10vw;
}

#section-1 {
	padding-top: 0;
}

#statement-box {
	width: 75vw;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 12.5%;
}

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

#creative-box {
	margin-top: 15vw;
	margin-right: 125px;
	margin-bottom: 23vw;
}



#prototyping-box {
	margin-top: 42.5vw;
	margin-left: 12.5%;
	margin-bottom: 0;
}

#prototyping-box, #prototyping-box h1, #prototyping-box p {
	text-align: left;
}

#steps-box h1{
	color: #4f647a
}

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

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

.textbox {
	width: 75vw;
	max-width: 100vw;
	margin-left: 12.5%;
}

#steps-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: calc(2 * env(safe-area-inset-left));
}

#steps-box h1{
	color: #4f647a;
	margin-bottom: 20px;
}

#section-3 {
	justify-content: center;
}

#steps-categories {
	display: flex;
	flex-direction: column;
	margin: 0;
	align-items: center;
}

.steps-category {
	margin: 10px 0px;
	text-align: center;
}

.steps-items {
	display: flex;
	flex-direction: row;
	margin: 10px 0 20px 0;
}

.steps-item1, .steps-item2, .steps-item3{
	width: 33%;
}

.steps-item2{
	text-align: center;
}

.steps-item1{
	text-align: center;
}

.steps-item3, .steps-item5{
	text-align: center;
}

.steps-item4, .steps-item5{
	width: 50%;
}

h10 {
	font-size: 44px;
	padding: 0 0px;
	text-align: center;
}

.other-categories {
	width: 75vw;
}

#step-create {
	width: 250px;
}

#creative-box, #creative-box h1, #creative-box p{text-align: end;}

#creative-box {width: 66vw; margin-left: 21.5%;}

@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){
	
	#section-1 {padding-top: 80px;}
	#section-3 {padding: 4.6vw 0 5.6vw 0;}
	
	.statement-container{padding: 3.6vw 0;}
	.statement {width: 50vw; max-width: 450px;}
	
	.textbox {width: 30%; max-width: 350px; margin: 0;}
	
	#creative-box {width: 30%; margin-top: 2vw; margin-right: calc(7vw + (180 * ((25.6px - 1vw)/25.6))); margin-bottom: calc(9vw + (-365 * ((25.6px - 1vw)/25.6)));}
	#prototyping-box {margin-top: 6.5vw; margin-left: 13vw; margin-bottom: 8.2vw;}
	#statement-box {width: 50vw; max-width: 380px; margin-left: 2.6vw;}	
	
	#mara4 {
		width: 50vw;
		margin-top: 3vw;
		margin-bottom: 3.6vw;
		margin-left: 0;
		margin-right: -2.6vw;
		transform: scaleX(1);
	}

	#mara3 {
		width: 46.25%;
		margin: 0;
		margin-left: -10vw;
		z-index: 0;
	}
	
	#mara5 {
		width: 35.9%;
		margin: 0 0 -7.2vw 9.8vw;
	}
	
	#mara7 {
		width: 38.4%;
		margin: 0;
		margin-top: -18vw;
		margin-right: 2.6vw;
	}

	#mara6 {
		width: 41.45%;
		margin: 0;
		margin-right: -12.6vw;
	}
	
	#steps-box {padding-left: 0;}
	
	#steps-categories {
		flex-direction: row;
		margin-top: 25px;
	}
	.steps-category {margin: 0 2.6vw;}
	
	#steps-box h1{margin-bottom: 0;}
	
	
	#step-create {width: calc(10vw + (140 * ((25.6px - 1vw)/25.6)));}
		
	.other-categories {width: calc(19.6vw + (220 * ((25.6px - 1vw)/25.6)));}
	
	h10 {
		font-size: calc(1.6vw + 30px);
		padding: 0 1.3vw;
		text-align: center;
	}
	
	.steps-items {
		margin:0 ;
		margin-top: 25px;
	}
	
	.steps-item1{text-align: left;}
	.steps-item3, .steps-item5{text-align: end;}

	#kelpprocess-mobile{display: none;}
	#kelpprocess {display: block;}
	#creative-box, #creative-box h1, #creative-box p{text-align: left;}
	#prototyping-box, #prototyping-box h1, #prototyping-box p {text-align: right;}
}

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


}