/* CSS Document */

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


:root {
	--fontSize: 14px;
	--lineWidth: 1.5px;
	--lineColor: #000;
	--backgroundColor: #FFF;
	--line-height-multi: 5.5;
}


.input-field, .input-textarea, #submit-button, #consent-alert, #errors, #success, .cookie-button{
	font-family: "raleway",sans-serif;
    font-weight: 500;
	font-size: var(--fontSize);
	outline: none;
	border-bottom: 1.5px solid black;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0 !important;
}

.input-field, .input-textarea, #consent-alert, #errors, #success {
	padding: 10px 0;
	margin: 30px 0 5px 0;
	width: 	100%;
	min-width: 100%;
	max-width: 100%;
}


.input-textarea{
	min-height: 269px;
	font-size: var(--fontSize);
	border: none;
	background-attachment: local;
	background-image:
	repeating-linear-gradient(
		var(--backgroundColor),
		var(--backgroundColor) calc(var(--fontSize) * var(--line-height-multi) - var(--lineWidth)),
		var(--lineColor) calc(var(--fontSize) * var(--line-height-multi) - var(--lineWidth)),
		var(--lineColor) calc(var(--fontSize) * var(--line-height-multi))
	);
	line-height: calc(100% * var(--line-height-multi));
	padding: calc(var(--fontSize) / 0.7) 0 !important;
	margin: 0 0 40px 0 !important;
	overflow: hidden;

}



.input-field:focus{
	border-top: none;
	border-right: none;
	border-left: none;
	width: 100%;
}

#submit-button:hover, .input-field:focus, #consent-alert, .cookie-button:hover{
	border-bottom: 1.75px solid #aebecc;
}

#submit-button{
	padding: 0 45px;
	margin: 0 0 0 10px;
	cursor: pointer;
	transition-duration: 0.3s;
	background-color: white;
}

#submit-button h2 {font-size: 18px;}

#privacyterms {
	height: 20px;
	width: 20px;
}

@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none){
	#privacyterms {
		appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
		border-radius: 0;
		border: 1.75px solid black;
		cursor: pointer;
	}
	
	#privacyterms:checked{
		background-image: url("../images/checkbox.svg");
	}
	
}




#consent-text {
	margin: 10px 0 5px 0;
	display: flex;
}

#contact-row {
	display: block;
}


#contact-info {
	flex: 25%;
	min-width: 250px;
	padding-bottom: var(--footer-height);
}

#captcha-terms {
	font-size: 5px;
	display: inline-block;
}

#button-group {
	margin: 15px 0;
	display: flex;
}


#consent-notice {
	margin: auto 10px;
	display: inline-block;
	font-family: "raleway",sans-serif;
    font-weight: 500;
	font-size: 8px;
}

#consent-alert {
	font-size: 12px;
	display: none;
	color: #aebecc;
	margin-top: 0px;
}

.missing-triangle {
	position: absolute;
	margin: 44px 0 0 -18px;
	height: 10px;
	width: 10px;
	display: none;
}

#missing-checkbox {
	margin: 37.5px 0 0 9px;
	transform: rotate(-90deg);
}

#checkbox-group {
	margin: auto 0;
	align-items: center;
}

#captcha-terms, #consent-notice {
	color: rgba(134,141,146,1.00); 
}










.placeholder-highlight::placeholder { 
   color: #AEBECC;
   opacity: 1;
}

.placeholder-highlight:-ms-input-placeholder {
   color: #AEBECC;
}

.placeholder-highlight::-ms-input-placeholder {
   color: #AEBECC;
}


#contact-heading {
	margin-bottom: 24px;
}

#errors, #success {
	display: none;
}

#errors.visible, #success.visible {
    display:block;    
}



#plant {
	width: 100vw;
	margin-left: 0;
}






#mara-logo {
	width: 133px;width: 128px;
}
#mara8 {
	width: 43.75vw;
	margin-top: -31%;
 	margin-left: 28.125%;
}

#hello-box {
	width: 75vw;
	margin-right: 0;
	margin-left: 12.5%;
	margin-top: 12.5%;
}

#hello-box p{margin: 50px 0 80px 0;}

#section-1 {
	flex-direction: column-reverse;
	padding: 0;
}

#dbmara-logo {
	margin-bottom: 80px;
}

#section-2 {
	padding: 100px 0 100px 0;
}

#contact-form-block h1{
	text-align: center;
}

#contact-form-block {
	min-width: 0;
	width: 75vw;
	margin-left: calc(2 * env(safe-area-inset-left));
}

.contact-form {margin-top: 50px;}

#missing-message {margin: 54px 0 0 -18px;}

footer {background-color: #e9ecf2;}



#submit-area {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#consent-area {
	display: flex;
}

#confirmation {
	width: 100%;
}

#contact-heading a {color: #aebecc}



@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){
	
	#hello-box p{margin: 2.2vw 0 2.5vw 0;}
	
	#section-1 {
		flex-direction: row;
		padding: 100px 0;
	}
	
	#section-2 {padding: 100px 0 200px 0;}

	
	#hello-box {
		width: 31%;
		margin: 0;
		margin-right: 5.6vw;
	}
	
	#mara8 {
		width: 39.8%;
		margin-top: calc(-30% - 100px);
		margin-left: 150px;
	}
	
	#plant {
		width: calc(100% + 50px);
		margin-left: -50px;
	}
	
	#contact-form-block {
		min-width: 640px;
		width: 25%;
	}
	
	#submit-area {flex-direction: row;}
	
	#confirmation {width: 90%;}
	
	#consent-notice {font-size: var(--fontSize);}
	#captcha-terms {font-size: 10px;}
	
	#submit-button {padding: 0 45px;}
	#submit-button h2 {font-size: inherit;}
	
	.contact-form {margin-top: 2.2vw;}
	
}

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


}