* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: .9em Tahoma, Verdana, Sans-Serif, Arial; background: url(../images/body.gif) repeat; color: #7f7f7f; }
h1 { font: normal 3.4em "Trebuchet MS", Helvetica, Arial; }
h2 { font: normal 1.8em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 15px; }
h3 { font: normal 1.4em "Trebuchet MS", Helvetica, Arial; margin: 0 0 20px; }
h4 { font: normal 1.2em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 4px; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper { max-width: 1200px; width: 100%; margin: auto; padding: 0 20px 0 0; }

@media (max-width: 1100px) {
	#wrapper { padding: 0 20px; }
}
.clr { clear: both; }

img.twitter {
	position:relative;
	top: 21px;
	right: 20px;
	border-style: none;
}

div.call {
	border: 3px solid #337ABD;
	border-radius: 8px;
	color: #337ABD;
	font-size: 20px;
	margin: 0 auto;
	text-align: center;
	width: 290px;
}

.center {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 28%;
}

div#or{
	color: #337ABD;
	font-size: 20px;
	margin: 0 auto;
	text-align: center;
}
.call a {
    color: #337ABD;
}

#top-section {
	display: flex;
	align-items: flex-start;
	padding: 20px 0;
	gap: 0;
	flex-wrap: wrap;
}

#logo {
	flex: 0 0 200px;
	padding: 10px 20px 10px 0;
	margin-top: 60px;
}
	#logo h1 a { color: #fff; }
		#logo h1 a span { color: #808080; }

#portfolio.main-portfolio {
	flex: 1;
	padding: 10px 0;
	min-width: 0;
}

@media (max-width: 1100px) {
	#top-section {
		flex-direction: column;
		align-items: center;
	}
	#logo {
		flex: 0 0 auto;
		text-align: center;
		padding: 10px;
		margin-top: 0;
	}
	#portfolio.main-portfolio {
		width: 100%;
	}
	#portfolio.main-portfolio h2 {
		text-align: center;
	}
	#portfolio.main-portfolio .portfolio-grid {
		justify-content: center;
	}
}

#pitch { clear: both; }
	#pitch h1 { font-size: 2.4em; color: #304D6F; margin: 0 0 20px; }
	#pitch em { font-size: 1.3em; font-weight: bold; line-height: 1.6em; }
.content { background: url(../images/content.gif) repeat; padding: 20px; }
.link { background: #304D6F; color: #fff; padding: 5px 10px; font-size: .9em; }
#main { padding: 20px; }
.content .content-col .row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.col {
	flex: 1 1 250px;
	min-width: 200px;
}

@media (max-width: 600px) {
	.col {
		flex: 1 1 100%;
	}
}
	.case img { float: left; clear: left; margin: 0 20px 20px 0; background: #121212; padding: 3px; }
	.short { padding: 0 0 15px 0; background: url(../images/line.gif) repeat-x left bottom; }
	.case a, .article a { color: #ddd; font-weight: bold; }
	.date { font-size: .84em; margin: 0 0 3px; }
#footer { clear: both; background: url(../images/line.gif) repeat-x; padding: 20px 20px 10px; font-size: .9em; position:relative; bottom:0;}
	#footer a { color: #ccc; margin: 0 10px 0 0; border-bottom: 1px dotted #444; padding: 0 0 1px; }
	#links { float: right; }
		#links a { margin: 0 0 0 10px; }
	#footer p { margin: 0 0 8px; }

/* Portfolio Section */
#portfolio { padding: 30px 0; }
#portfolio h2 { color: #304D6F; margin: 0 0 25px; font-size: 2em; }

.portfolio-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
}

.portfolio-item {
	background: #1a1a1a;
	border-radius: 8px;
	padding: 20px;
	flex: 1 1 calc(33.333% - 14px);
	min-width: 250px;
	max-width: calc(33.333% - 14px);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid #2a2a2a;
}

@media (max-width: 900px) {
	.portfolio-item {
		flex: 1 1 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}
}

@media (max-width: 600px) {
	.portfolio-item {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.portfolio-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.portfolio-item h3 {
	color: #dfdfdf;
	margin: 0 0 10px;
	font-size: 1.3em;
}

.portfolio-item .status {
	font-size: 0.85em;
	padding: 4px 10px;
	border-radius: 12px;
	display: inline-block;
	margin-bottom: 15px;
}

.portfolio-item .status.live {
	background: #2d5a2d;
	color: #8fdf8f;
}

.portfolio-item .status.offline {
	background: #5a2d2d;
	color: #df8f8f;
}

.portfolio-item .status.invite-only {
	background: #5a4d2d;
	color: #dfcf8f;
}

.portfolio-item .status.development {
	background: #2d4a5a;
	color: #8fcfdf;
}

.portfolio-item p {
	color: #999;
	font-size: 0.95em;
	line-height: 1.5;
	margin-bottom: 15px;
}

.portfolio-item .tech-stack {
	font-size: 0.8em;
	color: #666;
	border-top: 1px solid #333;
	padding-top: 12px;
	margin-top: 10px;
}

.portfolio-item a {
	color: #5a9fd4;
}

.portfolio-item a:hover {
	color: #7bb8e8;
	text-decoration: underline;
}

/* Spin-offs section centered */
.spinoffs-section {
	text-align: center;
	padding-left: 20px;
}

.spinoffs-section .portfolio-grid {
	justify-content: center;
}