@font-face{
    font-family: font1;
    src: url(merriweathersans/regular.ttf);
}
@font-face {
  font-family: font1;
  src: url(merriweathersans/italic.ttf);
  font-style: italic;
}

* {
	box-sizing: border-box;
}

img {
	width:100%;
	height: auto;
}

body, html {	
	height: 100%;
	margin: 0;
	font: 400 14px/1.5 font1, sans-serif;
	color: #eeeeee;
	background-color: #333333;
}

h1, h2, h3, p, a, br {
	margin: 0;
	padding: 0;
	color: #eeeeee;
}

ul {
	list-style-type: square;
	margin-left: 1.2em;
	padding-left: 0;
	color: #eeeeee;
}

ul.no-bullets {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	color: #eeeeee;
}

h1 {
	font: 400 32px/1.8 font1, sans-serif;
}

h2 {
	font: 400 24px/1.8 font1, sans-serif;
}

h3 {
	font: 400 20px/1.8 font1, sans-serif;
}

footer {	
	padding: 10px 10px;
	background-color: #222222;
	text-align: center;
}
			
.content {
	/*background-image: url("backgroundanim.png");	/* for animated background image */
	background-image: url("backgroundstatic.png");	/* for static background image */
	height: 100%;
	background-position: top-left;
	background-repeat: no-repeat;
	background-size: cover;
}

.footer {
	position: fixed;
	height: 70px;
	margin-top: -70px;	
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #222222;
	text-align: center;
	padding: 10px;
}
.caption {
	position: absolute;
	top: 15%;
	width: 80%;
	left: 10%;
}

.title {
	float:center;
	width: 96%;
	padding: 10px;
	margin-left: 2%; margin-right: 2%;
	margin-top: 1%; margin-bottom: 1%;
	text-align: center;
}

.title-ref {
	float:center;
	width: 96%;
	padding: 10px;
	margin-left: 2%; margin-right: 2%;
	margin-top: 3%; margin-bottom: 1%;
	text-align: center;
	border-radius: 6px;
	border: 2px solid #DD9A5D;
}

/* Create three equal columns that floats next to each other */
.column {
	float: left;
	width: 29.33%;
	padding: 10px;
	margin-left: 2%; margin-right: 2%;
	margin-top: 1%; margin-bottom: 1%;
	border-radius: 6px;
	border: 2px solid #DD9A5D;
	text-align: left;
	height: 230px;
	overflow: auto;
}

/* Create four equal columns that floats next to each other */
.column-ref {
	flex: 0 0 auto;
	width: 21.00%;
	padding: 10px;
	margin-left: 2%; margin-right: 2%;
	margin-top: 1%; margin-bottom: 1%;
	text-align: left;
	height: auto;
	overflow: clip;
}

.spacer {
	float: center;
	width: 96%;	
	padding: 10px;	
	margin-left: 2%; margin-right: 2%;
	margin-top: 1%; margin-bottom: 1%;
	text-align: left;
	height: 70px; /* min. height = height of .footer */
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;	
}

/* make 4 customer logos visible, rest is scrollable (used with .column-ref) */
.row-ref {
	display: flex;
    overflow-x: auto;
    white-space: nowrap;
}

/* when view<max-width, reduce h2 size and make textboxes higher */
@media screen and (max-width: 1250px) {
	.column {		
		height: 310px;		
	}
	h2 {
		font: 600 14px/1.5 font1, sans-serif;
	}
}

/* when view<max-width, switch to single column layout and reduce fonts */
@media screen and (max-width: 800px) {
	.column {
		width: 96%;
		height: auto;
	}
	.footer {
		font: 200 12px/1.2 font1, sans-serif;
		height: 50px;
		margin-top: -50px;
	}
	h1, h2, h3 {
		font: 600 14px/1.5 font1, sans-serif;
	}
}

/* when view<max-height, reduce fonts */
@media screen and (max-height: 550px) {
	.footer {
		font: 200 12px/1.2 font1, sans-serif;
		height: 50px;
		margin-top: -50px;
	}
	h1, h2, h3 {
		font: 600 14px/1.5 font1, sans-serif;
	}	
}