@font-face {
    font-family: "cera";
    src: url("Cera_GR.woff") format('woff');
}
img.b-lazy
{
	background-image: url(loading.svg);
	background-position: center center;
	background-repeat: no-repeat;
}
img.b-loaded
{
	background-image: none;
}
body
{
	padding: 0;
	margin: 0;
	background: #fff;
	font-family: cera, sans-serif;
	color: #000;
	font-size: 16px;
	line-height: 130%;
}
hr
{
	border: none;
	height: 1px;
	background: #000;
	padding: 0;
	margin: 20px 0;
}
.narrow .c1-1 h3
{
	margin-top: 24px;
}
.bg, .bg a, .bg a span
{
	color: #000;
}
.green .bg
{
	background: #a1b792;
	position: relative;
	z-index: 1;
}
.bgimage
{
	z-index: 2;
	left: 0px;
	top: 0px;
	position: absolute;
	opacity: 0.40;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	background: transparent url(about.background.svg) no-repeat center center;
	background-size: cover;
}
h1, h2, h3, p
{
	font-weight: normal;
	padding: 0;
	margin: 0 0 12px;
	line-height: 130%;
}
p
{
	line-height: 150%;
}
p.tag
{
	margin: 0 0 4px;
	line-height: 130%;
}
h2
{
	font-size: 170%;
}
h3
{
	font-size: 130%;
	margin-bottom: 2px;
}
.text
{
	font-size: 80%;
}
.text img
{
	max-width: 80%;
}

a, a:visited
{
	text-decoration: none;
	color: #000;
	border-bottom: solid 1px #fff;
	padding-bottom: 2px;
}
.bg a.icon, .bg a.icon:hover, .bg a.icon:visited
{
	border: none;
	padding-bottom: 3px;
}
a.icon span
{
	padding-bottom: 2px;
}
a.scroll:after
{
	position: absolute;
	content: '';
	display: inline-block;
	width: 12px;
	height: 15px;
	margin-top: 9px;
	margin-left: 2px;
	background: transparent url(arrow.svg) no-repeat;
	background-size: contain;
}
p a, .info a,
p a:visited, .info a:visited
{
	border-bottom: dashed 1px #aaa;
}
a:hover, a.active
{
	border-bottom: solid 1px #aaa;
}
a.icon span, a.icon:visited span, .bg p a, .bg p a:visited
{
	border-bottom: dashed 1px #000;
}
a.icon:hover span, .bg a:hover, .bg a.active
{
	border-bottom: solid 1px #000;
}
a.icon:before {
	content: '';
	height: 20px;
	width: 20px;
	display: inline-block;
	margin-bottom: -8px;
	margin-right: 10px;
}
a.ig:before {
	background: transparent url(ig.white.svg) no-repeat;
	background-size: contain;
}
a.li:before {
	background: transparent url(linkedin.logo.white.svg) no-repeat;
	background-size: contain;
}


.green .bg .c
{
	position: relative;
	z-index: 3;
}
.bg .c
{
	min-height: 800px;
}
.c, header
{
	width: 1020px;
	margin: 0 auto 24px;
}
.c
{
	display: flex;
	justify-content: space-between;
}
.narrow .c1-1.text
{
	margin: 48px auto 144px;
	width: 600px;
	padding: 30px;
	background: #fff;
}
.narrow h2
{
	text-align: center;
}
.c1-1
{
	width: 1002px;
}
.c1-1.text
{
	width: 1020px;
}
.c1-2
{
	width: 480px;
}
.c1-2.text
{
	width: 498px;
}
.c1-3
{
	width: 306px;
}
.c1-3.text
{
	width: 324px;
}
.c2-3
{
	width: 654px;
}
.c1-4
{
	width: 219px;
}
.c1-4.text
{
	width: 237px;
}

header
{
	margin-top: 30px;
	text-align: center;
}
nav ul, nav li
{
	list-style-type: none;
	margin: 0;
	display: inline;
}
nav ul
{
	padding: 0 25px 0 0;
}
nav li:after
{
	color: #aaa;
	content: '/';
	margin-left: 30px;
}
nav li:last-child:after
{
	content: '';
}
nav a
{
	padding-left: 30px;
}
nav span:after
{
	color: #aaa;
	content: '/';
	margin-left: 10px;
}
.img
{
	border: solid 1px #aaa;
	background: #d9d9d9;
	padding: 8px;
}
.img img {
	border: none;
	display: block;
	width: 100%;
}
.img > img, .img > div
{
	border: solid 1px #d9d9d9;
	width: 100%;
	display: block;
	box-sizing: border-box;
}
.img > div {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.info
{
	display: none;
}
.before > div:after, .after > div:after {
	padding: 10px 200px;
	position: absolute;
	top: 15px;
	width: 250px;
	text-align: center;
	right: -250px;
	transform: rotate(20deg);
	background: #f8f8f8;
	color: #000;
	font-size: 16px;
	white-space: nowrap;
	content: 'Before redesign';
	transition: all 0.3s;
	box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
}
.after > div:after {
	content: 'After redesign';
}
.before:hover > div:after, .after:hover > div:after {
	opacity: 0;
}
h3 img
{
	vertical-align: text-top;
	padding-left: 30px;
	position: absolute;
}
.dashed
{
	padding-top: 4px;
	background: transparent url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%204%22%20width%3D%2214%22%20height%3D%224%22%3E%0A%0A%20%20%20%20%3Cline%20x1%3D%220%22%20x2%3D%2214%22%20y1%3D%220%22%20y2%3D%220%22%20stroke%3D%22rgb(170%2C170%2C170)%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%228%2C%206%22%2F%3E%0A%0A%3C%2Fsvg%3E') repeat-x;
}
.dotted
{
	padding-top: 4px;
	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207%204%22%20width%3D%227%22%20height%3D%224%22%3E%0A%0A%20%20%20%20%3Cline%20x1%3D%222%22%20x2%3D%2214%22%20y1%3D%222%22%20y2%3D%222%22%20stroke%3D%22rgb(170%2C170%2C170)%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%221%2C%206%22%2F%3E%0A%0A%3C%2Fsvg%3E');
}

footer
{
	margin: 50px 0 50px;
	padding-top: 20px;
	border-top: solid 2px #cecece;
	border-bottom: solid 1px #d7d7d7;
}
.green footer
{
	margin-top: 0px;
	border-top: none;
	padding-top: 0px;
}
footer .c
{
	margin-bottom: 8px;
}
/*
@media screen and (max-width: 1019px) {
	.c, header, footer {
		box-sizing: border-box;
		padding: 0 20px;
		width: 100%;
	}
	.c > div {
		margin-left: 15px;
		margin-right: 15px;
	}
	.c > div:first-child {
		margin-left: 0px;
	}
	.c > div:last-child {
		margin-right: 0px;
	}
	
}
*/
@media screen and (max-width: 1019px) {
	.info
	{
		width: 90%!important;
		margin: 0 auto;
		text-align: left;
		padding-bottom: 20px;
		font-size: 80%;
		display: block;
	}
	.c, header, footer
	{
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 0;
		width: 100%;
	}
	footer, .green footer
	{
		width: 90%;
		margin: 20px auto;
		padding-left: 0;
	}
	footer .c > div.text
	{
		width: 100%;
	}
	.c.dotted, .c.dashed, footer
	{
		margin-bottom: 24px;
	}
	header nav ul
	{
		flex-wrap: wrap;
		justify-content: center;
	}
	header nav li
	{
		display: flex;
		margin-bottom: 10px;
	}
	header nav li:after
	{
		content: '';
	}
	.c > div
	{
		margin-bottom: 24px;
	}
	.c1-1, .c1-2, .c1-3, .c1-4,
	.c2-3, .c2-4,
	.c1-4.text, .c1-3.text, .c1-2.text, .c1-1.text, .narrow .c1-1.text,
	.dotted, .dashed
	{
		box-sizing: border-box;
		width: 90%;
	}
}