/* color:#322b80;*/
@font-face {
    src: url("../fonts/tradegothiceighteen.otf");
    font-family: "tradegothiceighteen";
}
@font-face {
    src: url("../fonts/merriweather.ttf");
    font-family: "merriweather";
}
@font-face {
    src: url("../fonts/TradeGothicBoldCondTwenty.otf");
    font-family: "TradeGothicBoldCondTwenty";
}
html {
	height: 100%;
	min-height: 100%;
	background-color: #fff;
}
body {
	margin:0 auto;
	color:#322b80;
	background-color: #fff;
	text-align: center;
	width: 100%;
}
a {
	text-decoration: none;
	color:#322b80;
}
* {
	margin:0px;
	padding:0px;
}
/********** INDEX *********/
.logo {
	position: fixed;
	top:20px;
	left:20px;
	width: 60px;
	height: auto;
	z-index: 9999999;
}
.logo img {
	width: 100%;
}
.tradegothiceighteen {
	font-weight: normal;
}
h2 {
	margin-top: 70px;
	font-family: "tradegothiceighteen";
	font-size: 22px;
	text-transform: uppercase;
}
h1 {
	font-size: 100px;
	font-family: "tradegothicbold";
	text-transform: uppercase;
}
p {
	margin:0 auto;
	font-size: 18px;
	width: 350px;
	margin-bottom: 50px;
}
.project {
	width: 33.33%;
	height: auto;
	display:inline-table;
	margin-bottom: 30px;
}
.project:last-of-type {
	padding-bottom: 100px;
}
.project h2 {
margin-top: 10px;
	font-size: 20px;
}
.project img {
	width: 100%;
	max-height:380px;
}
.selected{
	font-size:28px; margin-bottom: -10px; color:#000;
}
@media (max-width: 1450px) {
	.project {
		width: 50%;
	}
	.project img {
		width: 100%;
		max-height:380px;
	}
}
@media (max-width: 480px) {
	.project {
		width: 100%;
	}
	h2 {
		font-size: 18px;
	}
	h1 {
		font-size: 70px;
	}
	p {
		width: 90%;
	}
}