@font-face {
	font-family: gill-sans-mt-pro;
	src: local("Gill Sans MT Pro"),
		 local("GillSansMTPro-Book"),
		 url(../fonts/GillSansMTPro-Book.otf) format("opentype");
  }

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: gill-sans-mt-pro;
}

body {
	background-color: rgba(65, 65, 65, 0.6);
	background-position: left top 10rem;
	background-image: url(../images/bg.png);
	background-blend-mode: overlay;
	background-attachment: fixed;
	background-size: cover;
    background-repeat: no-repeat;
	color: #eee;
	text-align: center;
	display: flex;
	flex-flow: column;
}

svg {
	width: 15rem;
}

ol, ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

p {
	max-width: 30rem;
	margin: 1.5rem auto;
}

a {
	display: table;
	margin: 0 auto;
	color: #eee;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#content {
	background-color: rgba(5, 5, 5, 0.9);
	flex: 0 1 auto;
	font-size: 1.6rem;
}

#content p, #content ul {
	opacity: 0;
	animation: fadein 1.2s linear .4s 1 forwards;
}

#logo {
	opacity: 0;
	margin: 6rem 0 2rem 0;
	animation: fadein 1.2s linear .2s 1 forwards;
}

#contact li {
	margin: 2.5rem;
}

#clients {
	background-color: rgba(7, 7, 7, 0.7);
	padding: 2rem;
	flex: 1 1 auto;
}

#clients h1, #clients ol {
	opacity: 0;
	animation: fadein 1.2s linear .6s 1 forwards;
}

#clients h1 {
	font-size: 1.6rem;
	margin: 0;
}

#clients ol {
	column-count: 3;
	column-gap: 1rem;
	margin: 1rem auto;
}

#clients li {
	width: auto;
}

@media only screen and (min-width: 1025px) {
	#content {
		padding-bottom: 5rem;
	}
	#clients ol {
		width: 50%;
	}
}

@media only screen and (max-width: 599px) {
	#clients ol {
		column-count: 2;
	}
}

@media only screen and (max-width: 450px) {
	#contact li {
		margin: 1.5rem;
	}

	#clients ol {
		column-count: 1;
	}
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}