/* Author: Daniel Astacio */

@font-face {
  font-family: aileron;
  src: url(../fonts/Aileron-Bold.ttf),
  	   url(../fonts/Aileron-Bold.otf);
}

body {
	font-family: aileron;
	transition: all 1s;
	background-color: black;
	color: white;
	padding: 5% 0;
	max-width: 1200px;
	margin: 0 auto;
}

img {
	width: 100%;
}

.hub, .container {
	position: relative;
}

::selection {
  background-color: rgb(255,77,77); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background-color: rgb(255,77,77); /* Gecko Browsers */
}

/* Pseudo styles */

.active {
	color: rgb(255,77,77);
	border-bottom: 2px solid white;
}

/* Hub Styles */

.hub {
	font-size: 20px;
}

.hub .brand {
	float: left;
	padding: 30px;
	color: rgb(255,77,77);
}

.hub .name {
	font-size: 30px;
}

.hub .tagline {
	font-size: 13px;
}

.hub nav {
	padding: 30px;
	padding-top: 37px;
	display: inline-block;
}

.hub nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hub nav li {
	display: inline-block;
	margin-left: 5px;
	cursor: pointer;
}

.hub nav li:hover {
	color: rgb(255,77,77);
	transition: color 0.2s;
}

.hub .contact {
	float: right;
	padding: 30px;
}

.hub .contact a {
	color: white;
	text-decoration: underline;
	display: block;
}

.hub .contact a:hover {
	text-decoration: none;
}

.container {
    margin-top: 100px;
    border-bottom: 1px solid white;
    padding-bottom: 50px;
}

.container p {
	max-width: 600px;
	color: white;
	display: inline-block;
	font-size: 23px;
	padding: 10px 10px 0 0;
	line-height: 1.2em;
	top: 0;
	position: relative;
	animation: 1.2s linear slideup;
	-webkit-animation: 1.2s linear slideup;
	-moz-animation: 1.2s linear slideup;
	-o-animation: 1.2s linear slideup;
}

div.col-md-6 {
	padding-left: 0;
}

.container aside {
	font-size: 23px;
	top: 0;
	position: relative;
	animation: 1.2s linear slideup;
	-webkit-animation: 1.2s linear slideup;
	-moz-animation: 1.2s linear slideup;
	-o-animation: 1.2s linear slideup;
}

.container figure {
	float: right;
}

footer {
	padding: 30px;
	text-align: center;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes slideup {
	0% {
		top: 300px;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-webkit-keyframes slideup {
	0% {
		top: 300px;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-moz-keyframes slideup {
	0% {
		top: 300px;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-o-keyframes slideup {
	0% {
		top: 300px;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}