@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=c998bb5a-7ef4-4e0d-8907-4d88aae852be");
    @font-face{
        font-family:"Quire Sans W01 Light";
        src:url("Fonts/f8e2ae2f-bfa0-4b2e-bd37-4dd1005cb2cb.eot?#iefix");
        src:url("Fonts/f8e2ae2f-bfa0-4b2e-bd37-4dd1005cb2cb.eot?#iefix") format("eot"),url("Fonts/15a8f401-df19-46bb-8ee9-ebeb07d5abc4.woff2") format("woff2"),url("Fonts/05170f2f-296f-4d4e-a25b-d8addf71cb4e.woff") format("woff"),url("Fonts/38cdf0de-c692-4b56-8e3b-dbfc744af6f8.ttf") format("truetype"),url("Fonts/cb45dbd6-2804-47fd-839a-11104abf9fb6.svg#cb45dbd6-2804-47fd-839a-11104abf9fb6") format("svg");
    }

/* General */
html, body { margin: 0; padding: 0; height:100%; width: 100%; background-color: #4395aa; font-family:"Quire Sans W01 Light", Helvetica, sans-serif; }
* { box-sizing: border-box; }

body {
	background-image: url("images/bg-img.jpg");
	background-size: cover;
	background-position: center;
}

.logo { width: 75%; height: auto; margin-left: -5em; }

/* Links */
a, a:visited { color: #40cbee; }

a {
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}

a:hover {
	color: #fff;
}

/* Layout */
.wrap { margin: 0 auto; padding: 0 0 2000px 0; min-height: 100%; height: 100%; display: block; }
#grid-main { position: static; height: 100%; opacity: 0.15; }
#content { position: fixed; top: 0; width: 100%; padding: 3em 1em; }
.grid-col, #grid-main, #content {
	height: 100%;
}
.grid-line {
	border-right: 1px solid #fff;
	height: 100%;
}
.col {
	position: relative;
	width: 20%;
	float: left;
	display: inline-block;
	padding: 30px 0;
}
.two { width: 40%; }
.three { width: 60%; }
.four { width: 80%; }

.box { border-bottom: 1px solid #dedede; padding: 30px; width: 100%; background-color: #fff; margin: 0 0 0 -1px; box-sizing: border-box; box-shadow: inset 1px 1px 0px 0px #dedede; }

/* Typography */

h1 { font-size: 4em; margin: 0; padding: 30px;}
p { font-size: 1.1em; margin: 0 0 .5em 0; padding: 30px; line-height: 1.5em; color: #fff; letter-spacing: .05em; }

/* Other */
.clear { clear: both; }

/* --------- Small screens --------- */

@media (max-width: 600px) {
	.col { display: block; }
	.two, .three, .four { width: 100%; }
	.gridline { width: 20%; float: left; display: inline-block; }
	.ind { width: 100%; display: block; }
	.logo { width: 95%; }
}