body, html {
	height: 100%;
	margin: 0;
	font-family: "Work Sans", sans-serif;
	color: #777;
}


input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */  
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
		font-family: monospace;

}

/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}

.formfield	{
	margin-left: 10%;
	margin-right: 10%;
	max-width: 80%

}

input::placeholder {
	font-family: monospace;
}	

::-moz-placeholder { /* Firefox 19+ */
	font-family: monospace;
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: monospace;
}
:-moz-placeholder { /* Firefox 18- */
	font-family: monospace;
}

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

#aboutHolder {
		padding: 5%;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#projectHolder {
		padding: 10%;
		color: #ddd;
		background-color: #282E34;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#mapHolder {
		position:relative;
		min-height:60%;
	}

	#formHolder {

		text-align: center;
		position: relative;
		display: block;
		min-height:60%;
		padding: 2%;
		margin-bottom: 20px;
	}					


	#about2, #about3 {
		display: none;
	}

	#readMoreAbout {
		position: relative;
		background-color: #efefef;
		width: 100%;
		text-align: center;
	}

	#readLessAbout {
		display: none;
		position: relative;
		background-color: #efefef;
		width: 100%;
		text-align: center;
	}	


	.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
		position: relative;
		opacity: 0.75;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;

	}
	.bgimg-1 {
		background-image: url("../images/singapore.jpg");
		min-height: 100%;
	}

	.bgimg-2 {
		background-image: url("../images/paratri.jpg");
		min-height: 80%;
	}

	.bgimg-3 {
		background-image: url("../images/10000m.jpg");
		min-height: 80%;
	}

	.bgimg-4 {
		background-image: url("../images/decoders.jpg");
		min-height: 75%;
	}

	.caption1 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption2 {
		background-color: #2e6bd1;
		position: absolute;
		left: 0;
		top: 25%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption3 {
		background-color: #47cc39;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption4 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}



	h1 {

		color: #fff;
		padding: 12px;
		font-size: 28px;
		letter-spacing: 8px;

	}

	h2 {

		color: #fff;
		padding: 14px;
		padding-top: 0px !important;
		font-size: 20px;
		letter-spacing: 8px;

	}


	h3 {
		letter-spacing: 5px;
		text-transform: uppercase;
		font: 20px "Work Sans", sans-serif;
		color: #111;
	}



	#map {
		position: absolute;
		left:0;
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.mapboxgl-popup-content {
		color: black !important;
	}

	#projectpreviews {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-width: 100%;
		margin: auto;
		padding: 10px;
	}
	
	.projectpreview {
		flex:1;
		color: #fff;
		min-width: 45%;
		padding-bottom:20px;
		
	}
	
	.projectpreview a {
		color: #FFB100;
		text-decoration: none;
		font-weight: bold;
	}

	.projecttable {
		color: #ddd;
		width: 100%;
		text-align: center;
	}
	.projecttable h3 {
		padding-top:10px;
		padding-bottom: 0;
	}
	.projecttable td {
		padding:5px;
	}
	
	.projectimage {
		max-width:100%;
		border-radius: 5px;
	}
	
	#rrlogo {
		max-width: 50%;
		margin:auto;
	}


}


@media only screen and (min-width: 651px) and (max-width: 1000px) {

	#aboutHolder {
		padding: 5%;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#projectHolder {
		padding: 5%;
		color: #ddd;
		background-color: #282E34;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#mapHolder {
		position:relative;
		min-height:60%;
	}

	#formHolder {

		text-align: center;
		position: relative;
		display: block;
		min-height:60%;
		padding: 2%;
		margin-bottom: 20px;
	}					


	#about3 {
		display: none;
	}

	#readMoreAbout {
		position: relative;
		background-color: #efefef;
		width: 100%;
		text-align: center;
	}

	#readLessAbout {
		display: none;
		position: relative;
		background-color: #efefef;
		width: 100%;
		text-align: center;
	}	


	.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
		position: relative;
		opacity: 0.75;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;

	}
	.bgimg-1 {
		background-image: url("../images/singapore.jpg");
		min-height: 100%;
	}

	.bgimg-2 {
		background-image: url("../images/paratri.jpg");
		min-height: 80%;
	}

	.bgimg-3 {
		background-image: url("../images/10000m.jpg");
		min-height: 80%;
	}

	.bgimg-4 {
		background-image: url("../images/decoders.jpg");
		min-height: 75%;
	}

	.caption1 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 25%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption2 {
		background-color: #2e6bd1;
		position: absolute;
		left: 0;
		top: 25%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption3 {
		background-color: #47cc39;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption4 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}



	h1 {

		color: #fff;
		padding: 18px;
		font-size: 35px;
		letter-spacing: 10px;

	}

	h2 {

		color: #fff;
		padding: 18px;
		padding-top: 0px !important;
		font-size: 22px;
		letter-spacing: 10px;

	}


	h3 {
		letter-spacing: 5px;
		text-transform: uppercase;
		font: 20px "Work Sans", sans-serif;
		color: #111;
	}



	#map {
		position: absolute;
		left:0;
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.mapboxgl-popup-content {
		color: black !important;
	}

	#projectpreviews {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 90%;
		margin: auto;
		padding: 30px;
	}
	
	.projectpreview {
		flex:1;
		color: #fff;
		min-width: 45%;
		
	}
	
	.projectpreview a {
		color: #FFB100;
		text-decoration: none;
		font-weight: bold;
	}

	.projecttable {
		color: #ddd;
		width: 100%;
		text-align: center;
	}
	
	.projecttable td {
		padding:15px;
	}
	
	.projectimage {
		max-width:100%;
		border-radius: 5px;
	}
	
	#rrlogo {
		max-width: 40%;
		margin:auto;
	}




}


@media only screen and (min-width: 1001px) {

	#aboutHolder {
		padding: 5%;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#projectHolder {
		padding: 5%;
		color: #ddd;
		background-color: #282E34;
		text-align: center;
		position:relative;
		min-height:60%;
	}

	#mapHolder {
		position:relative;
		min-height:75%;
	}

	#formHolder {
		text-align: center;
		position: relative;
		display: block;
		min-height:60%;
		padding: 2%;
		margin-bottom: 20px;
	}					


	#readMoreAbout {
		display: none;
	}

	#readLessAbout {
		display: none;
	}

	.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
		position: relative;
		opacity: 0.75;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;

	}
	.bgimg-1 {
		background-image: url("../images/singapore.jpg");
		min-height: 100%;
	}

	.bgimg-2 {
		background-image: url("../images/paratri.jpg");
		min-height: 80%;
	}

	.bgimg-3 {
		background-image: url("../images/10000m.jpg");
		min-height: 80%;
	}

	.bgimg-4 {
		background-image: url("../images/decoders.jpg");
		min-height: 75%;
	}

	.caption1 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption2 {
		background-color: #2e6bd1;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption3 {
		background-color: #47cc39;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	.caption4 {
		background-color: #FFB100;
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		text-align: left;
		color: #000;
	}

	h1 {

		color: #fff;
		padding: 22px;
		padding-bottom: 14px !important;
		font-size: 40px;
		letter-spacing: 10px;


	}
	
	h2 {

		color: #fff;
		padding: 20px;
		padding-top: 0px !important;
		font-size: 28px;
		letter-spacing: 10px;

	}

	.caption span.title2 {
		background-color: #2e6bd1;
		color: #fff;
		padding: 22px;
		font-size: 40px;
		letter-spacing: 10px;
	}


	h3 {
		letter-spacing: 5px;
		text-transform: uppercase;
		font: 20px "Work Sans", sans-serif;
		color: #111;
	}



	#map {
		position: absolute;
		left:0;
		top: 0;
		bottom: 0;
		width: 100%;
	}

	.mapboxgl-popup-content {
		color: black !important;
	}

	#projectpreviews {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 90%;
		margin: auto;
		padding: 30px;
	}
	
	.projectpreview {
		flex:1;
		color: #fff;
		min-width:20%;
		max-width:25%;
		flex-wrap: wrap;	
		
	}
	
	.projectpreview a {
		color: #FFB100;
		text-decoration: none;
		font-weight: bold;
	}

	.projecttable {
		color: #ddd;
		max-width: 100%;
		text-align: center;
		word-break: break-word;
	}
	
	.projecttable td {
		padding:15px;
	}
	
	.projectimage {
		max-width:100%;
		border-radius: 5px;
	}
	
	#rrlogo {
		max-width: 25%;
		margin:auto;
	}

	#logos {
		display: flex;
		flex-direction: row;
	}
	

}