/* CSS Document */
@import url("fonts.css");
@import url("styles.css");
@import url("header.css");
@import url("footer.css");
@import url("misc.css");

img {
	display: block;
}

#section-1 {
	margin-top: calc(-1 * var(--header-height));
	position: relative;
	z-index: 0;
}

#mara1 {
	width: 50%;
	margin-top: -50%; 
	margin-left: 25%;
}

#dbmara-logo {
	margin-top: 20%;
	margin-left: 2.6%;
}

#dbmara-logo-mobile{margin-top: 101px;}

#palmshadow1 {
	width: 100%;
	margin: 0;
}

#hello-box, #process-box {
	margin-top: 12.5%;
	margin-left: 12.5%;
	width: 62.5%;
	min-width: 0;
}



#noibako1 {
	position: relative;
	z-index: 1;
	width: 37.5%;
	margin-bottom: -37.5vmin;
	margin-left: 12.5%;
	margin-right: 0;
	margin-top: 0;
}

#processsamples {
	width: 37.5%;
	margin-top: -20vmin;
	margin-left: 12.5%;
	margin-bottom: -21%;
	z-index: 0;
}

#blueheron1 {
	position: relative;
	z-index: 0;
	width: 75%;
	margin-left: 25%;
	margin-top: 0;
}



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

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

#about-box {
	width: 32.5%;
	min-width: 0;
	margin-left: 55%;
}



#section-3{	
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}



@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){
	#mara1 {
		width: 30%;
		margin-top: 5%; 
		margin-left: calc(-15% - 100px);
	}

	#palmshadow1 {
		width: 100%;
		margin: 20% 0 10% 0;
	}
	
	#blueheron1 {
		width: 100%;
		margin-left: 0;
		margin-top: 15%;
	}
	
	#hello-box {
		width: 25%;
		min-width: 300px;
		margin-top: -35%;
		margin-left: 15%;
	}
	
	#about-box {
		margin-top: 25px;
		margin-bottom: 100px;
		margin-right: calc(15% + 100px);
		width: 25%;
		min-width: 300px;
	}
	
	#process-box {
		margin-top: 80px;
		width: 30%;
		min-width: 350px;
		margin-left: 0;
	}
	
	#processsamples {
		width: 41.25%;
		margin-top: 0;
		margin-left: 0;
		z-index: 10;
	}

	#noibako1 {
		position: relative;
		z-index: 1;
		width: 44.45%;
		margin-bottom: -44.45%;
		margin-right: calc(-22.225% - 100px);
		margin-left: 0;
		margin-top: 0;
	}
	
	#section-2 {padding-bottom: 5.6vw;}


}

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


}