html, body {
	margin: 0;
	font-family: Calibri, sans-serif;
	overflow-x: hidden;
}
#page {
	display: grid;
	grid-template-columns: auto 900px auto;
	align-content: center; 
	font-size: 20px;
	line-height: 1.5em;
}
#page > div {
	padding: 40px 25px;
}
#page div.g {
	background: #eeeeee;
}
#page div.bt {
	border-top: 5px solid #3464a6;
}
#page div.fg {
	background: linear-gradient(to right, #bbb, #eee);
}
span.email:after {
	content: "@lugosoft.com";
}
.b {
	color: #3464a6;
}
h1 {
	margin-top: 0;
	color: #3464a6;
	font-size: 1.2em;
}
h2 {
	margin: 0;
	color: #3464a6;
	font-size: 1.2em;
}
h4 {
	border-bottom: 1px solid black;
}

a {
	color: black;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.s {
	color: #888;
	padding: 0 5px;
}
p {
	margin: 1em 0 0 0;
}
p:first-child {
	margin-top: 0;
}

@media only screen and (max-width: 1100px) {
	.logo {
		max-width: 250px;
	}
	.i {
		height: 500px;
		right: -50px;
		top: -70px;
	}
	#page {
		min-height: 0;
		height: auto;
		grid-template-columns: 60px auto 60px;
		line-height: 1.5em;
	}
	#page div {
		padding: 25px 15px;
	}
	#page div.cr {
        	top: -20px;
	}
}
@media only screen and (max-width: 700px) {
	#page {
		grid-template-columns: 25px auto 25px;
		font-size: 16px;
		line-height: 1.5em;
		min-height: 0;
	}
	#page div.bt {
		border-top: 3px solid #3464a6;
	}
	#page div {
		padding: 10px 10px;
	}
	.logo {
		margin: 15px 0;
	}
}