#logo-main {
	position: fixed;
	top: 50px;
	left: 45px;
	z-index: 101;
	background: none !important;
}
#logo-main .b-logo {
	width: 35px;
	height: 39px;
}
#logo-main .b-logo .b-shape
{
	fill: var(--color-black);
}

#header
{
	background-color: var(--color-primary);
	color: var(--color-white);
}
	#header .wrapper
	{
		margin: 0 auto;
		width: 100%;
		max-width: 960px;
		padding: var(--content-padding);
	}

	#header img
	{
		width: 100%;
		max-width: 760px;
		margin: 0 auto;
	}
	#header img.desktop
	{
		display: block;
	}
	#header img.mobile
	{
		display: none;
	}
	#header-image
	{
		margin-bottom: var(--content-padding);
	}
	#header-text
	{
		text-align: center;
	}

#kuplat
{
	display: flex;
	flex-wrap: wrap;
	border: 15px solid #fff;
}

.kupla
{
	background-color: var(--color-accent);
	color: var(--color-white);
	width: 20%;
	border: 15px solid #fff;
}
	.kupla:nth-child(odd) .bottom
	{
		transform: scaleX(-1);
	}
	.kupla:nth-child(4n){ background-color: var(--color-accent); }
	.kupla:nth-child(4n) .comment .quote { color: var(--color-accent); }
	.kupla:nth-child(4n+1){ background-color: var(--color-primary); }
	.kupla:nth-child(4n+1) .comment .quote { color: var(--color-primary); }
	.kupla:nth-child(4n+2){ background-color: var(--color-beige); }
	.kupla:nth-child(4n+2) .comment .quote { color: var(--color-beige); }
	.kupla:nth-child(4n+3) { background-color: var(--color-offwhite); }
	.kupla:nth-child(4n+3) .comment .quote { color: var(--color-offwhite); }
	.kupla .content
	{
		background-color: var(--color-black);
		padding: var(--content-padding) calc(var(--content-padding) / 2);
		padding-bottom: 0;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 100%;
		/*
		max-width: 520px;
		*/
		
	}
	.kupla .comment
	{
		padding-top: var(--content-padding);
		text-align: center;
		position: relative;
	}
			.kupla .comment .quote
			{
				position: absolute;
				font-size: 42px;
				top: calc(var(--content-gap) / 2);
			}
	.kupla .image
	{
		width: 300px;
		height: 300px;
		background-size: 102%;
		background-position: 50% 50%;
		border-radius: 50%;
	}
	.kupla .bottom
	{
		background: url('../static/img/puhekupla-bottom.png') no-repeat 50% -2px;
		background-size: 100% 100%;
		height: 150px;
	}
@media only screen and (max-width: 1920px) {
	.kupla
	{
		width: 25%;
	}
}
@media only screen and (max-width: 1440px) {
	.kupla
	{
		width: 33%;
	}
}
@media only screen and (max-width: 1024px) {
	.kupla
	{
		width: 50%;
	}
}
@media only screen and (max-width: 640px) {
	#header img
	{
		max-width: 320px;
	}
	#header img.desktop
	{
		display: none;
	}
	#header img.mobile
	{
		display: block;
	}
	#kuplat
	{
		border: 0;
	}
	.kupla
	{
		width: 100%;
		border: 0;
	}
	.kupla .bottom
	{
		height: 130px;
		margin-bottom: 30px;
	}
	#logo-main {
		position: fixed;
		top: 40px;
		left: 35px;
		z-index: 101;
		background: none !important;
	}
	#logo-main .b-logo {
		width: 25px;
		height: 29px;
	}
}