body {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: BlinkMacSystemFont, -apple-system, 'Helvetica Neue', 'Segoe UI', 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

main h1 {
	margin: 0 0 0.5em;
	padding-left: 1.4rem;
	border-bottom: 2px solid #fed91c;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 30pt;
}

h2 {
	font-size: 38pt;
	line-height: 38pt;
	margin: 0;
}

h3 {
	font-size: 20pt;
	margin: 0;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	background-color: rgba(254, 254, 254, 1);

	border-bottom: 1px solid rgba(200, 200, 200, 0.2);
	outline: 1px solid rgba(220, 220, 220, 0.2);

	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
}

header div {
	width: 1000px;

	display: flex;
	justify-content: space-between ;
	align-items: center;

	height: 80px;
}

.logo {
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	margin:  0;

	font-weight: 300;
}

.logo:before {
	content: url(../img/svg/aperture.svg);
	margin-right: 10px;
}

header nav {
	display: flex;
}

header nav a {
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 18pt;
	font-weight: 300;
	text-decoration: none;

	margin-right: 2em;
}

header nav a:last-child {
	margin-right: 0
}

header nav a:hover {
	background-image: linear-gradient(#fff 95%, #fed91c 10%);
}

.tel-button {
	border: 4px solid #fed91c;

	text-align: center;
	text-decoration: none;
	background-color: white;
	padding: 0.3em 0.7em 0.4em;
}

.tel-button:hover {
	background-color: #fed91c;
	color: white;
}

/*
header a:hover:before {
	content: "\203A\2002";
	margin-left: -19.5px;
}*/

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(220, 220, 220, 0.2);
	margin-top: 80px;
}

.column {
	width: 1000px;
	background-color: white;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.productline {
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	justify-content: space-around;

	border-bottom: 1px solid rgba(0,0,0,0.2);
	margin-bottom: 2em;
}

.product {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 20%;

	position:relative;

	border-left: 1px dashed rgba(0,0,0,0.15);
	margin-bottom: 2em;

	text-decoration: none;
}

.product:hover>span {
	display: flex;
	position: absolute;
	bottom: 0;
}

.product h3 {
	margin: 0;
	height: 40px;
	width: 100%;
	background-color: #fed91c;
}

.product h3 span {
	font-size: 26px;
	font-weight: 600;
	padding-left: 1rem;
}

.product img {
	width: 90%;
	margin-top: 0.5em;
	border-radius: 100%;
}

.product>span {
	display: none;
	padding: 0.5rem 0.5rem 1rem 1rem;
	background: rgba(254, 217, 28, 0.7);
	font-size: 10pt;
	color: rgba(0, 0, 0, 0.6);
	line-height: 10pt;
	max-height: 70%;
	overflow: hidden;
}

.articles {
	display: flex;
	flex-direction: row;
	flex-flow: wrap;

	justify-content: space-around;

	/*border-bottom: 2px dashed rgba(0,0,0,0.15);*/
}

article {
	display: flex;
	flex-direction: column;
	flex-basis: 45%;
	border-left: 1px dashed rgba(0,0,0,0.15);
	width: 100%;
	margin-bottom: 2em;
}

.full-width {
	flex-basis: 95%;
}

.article-color {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	height: 30px;
	width: 100%;
	line-height: 30px;
	background-color: #fed91c;

}

.article-item {
	display: flex;
	flex-direction: row;
	flex-flow: nowrap;

	padding: 0.5em;
}

.article-item img {
	width: 20%;
	height: 100%;
	object-fit: contain;

	margin-right: 1em;
	margin-top: 0.5em;
	border-radius: 100%;
	border: 3px solid #fed91c;
}

.text {
	display: flex;
	flex-direction: column;
}

.text h3 {
	font-weight: 600;
}

.text div {
	display: flex;
	flex-direction: row;
	flex-flow: nowrap;
	font-style: italic;
	font-size: 10pt;
	color: rgba(0,0,0,0.45);
	margin-top: 0.5em;
}

.text div a {
	font-style: italic;
	font-size: 10pt;
	color: rgba(0,0,0,0.45);
	margin-left: 0.3em;
}

.text span {
	margin: 0.8em 0;
}


footer {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-basis: 80px;
	flex-shrink: 0;


	width: 100%;
	height: 60px;
	background-color: white;

	border-top: 1px solid rgba(220, 220, 220, 0.2);
	outline: 1px solid rgba(200, 200, 200, 0.2);
}



/* COLORS */

h1, h2, h3, h4  {
	color: #212121;
}

a, span, p, div {
	color: #333333;
}


/* СЕПАРАТОРЫ
.block {
	padding-bottom: 3em;
	border-bottom: 2px groove rgba(200, 200, 200, 0.2);
}
*/

/* Мобильные стили */


@media all and (max-width: 1050px) {
	header {
		justify-content: space-between;
	}
	.logo {
		margin-left: 60px;
	}

	header a {
		margin-right: 0.5em;
	}
}


@media all and (max-width: 800px) {

	header {
		justify-content: center;
	}

	header nav {
		display: none;
	}


}