@charset "UTF-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

/* COLOUR BORDER */

/* #top, #bottom, #left, #right {
	background: rgb(255, 218, 71);
	position: fixed;
	} */

	/* #left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
	#left { left: 0; }
	#right { right: 0; } */

	/* #top, #bottom {
		left: 0; right: 0;
		height: 30px;
		}
	#top { top: 0; }
	#bottom { bottom: 0; } */

/* characteristics of site */

body { margin: 0; font-family: 'Work Sans'; }

a:link { text-decoration: none; }

a:hover { color: #E8B31A; }

img { padding: 25px; }

img:hover { opacity:80%; }

.row {
	position: relative;
	top: 200px;
	background: none;
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 70px;
}

.content { position: relative; }

.title {
	background: none;
	opacity: 0%;
	position: absolute;
	top: 50%;
	width: 100%;
	font-size: 60px;
	line-height: 50px;
	color: #E8B31A;
}

.title:hover { opacity: 100% }

/* Create four equal columns that sit next to each other - default view */
.column {
  -ms-flex: 25%; /* IE 10 */
  flex: 25%;
/*	float: left; */
  display: none; /* Hide columns by default */
}

.vertical {
  -ms-flex: 25%; /* IE 10 */
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 5px;
}

/* Style the buttons */
.btn {
	background: none;
  border: none;
  outline: none;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  text-decoration: underline;
	color: #E8B31A;
}

.btn:active {
   color: red;
}

/* filter CSS */
.row {
  margin: 8px -16px;
}

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

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.contact {
	background: none;
	position: relative;
	top: 200px;
	font-size: 60%;
	padding: 50px;
}

.header {
	background: none;
	position: fixed;
	top: 60px;
	left: 60px;
}